JavaScript基础概念

最新推荐文章于 2024-07-30 08:00:12 发布

原创最新推荐文章于 2024-07-30 08:00:12 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #java #开发语言

这篇文章详细介绍了JavaScript的基础知识，包括ECMAScript语法标准、DOM和BOM模型。讨论了JavaScript的数据类型，如基本数据类型和引用数据类型，以及它们在内存中的存储和复制行为。此外，还涵盖了变量、内存管理、循环结构、错误处理机制，以及严格模式的使用。文章提供了丰富的示例和注意事项，帮助读者深入理解JavaScript的核心概念。

组成

ECMAScript：JavaScript语法标准
DOM：文档对象模型
BOM：浏览器对象模型

特性

JavaScript 对大小写是敏感的。
JavaScript 使用 Unicode 字符集。

数据

代表了特定的信息
特点：可传递（基本数据被赋值会直接复制一个一模一样的数据），可运算
内存中所有的操作目标都是数据
js调用函数时传递变量参数时是（看理解）

都是值（基本/地址值）传递
可能是值传递，也可能是引用传递（地址值）

内存

内存条 => 通电 => 产生内存空间 => 存储数据 => 处理数据 => 断电 => 内存和数据都消失
内存生命周期

分配内存空间，获得使用权
存储数据，可以反复操作
释放内存空间

释放内存

局部变量：函数执行完自动释放
对象：变成垃圾对象=>垃圾回收器回收

变量

可变化的量，由变量名和变量值组成
每个变量对应一块内存，变量名用来查找内存，变量值就是内存中的数值

数据、变量、内存的关系

内存用来存储数据的空间
变量是内存的标识

基本数据类型（5+2种）

字符串（String）
数字(Number)
布尔(Boolean)
对空（Null）
未定义（Undefined）
Symbol（Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。）
bigInt（大整数，ES6引入）

注释：

参数赋值传数值
null和undefined中没有任何方法

调用方法时的过程

对于str.toUpperCase()

字符串 str 是一个原始值。因此，在访问其属性时，会创建一个包含字符串字面值的特殊对象，并且具有可用的方法，例如 toUpperCase()。
该方法运行并返回一个新的字符串（由 alert 显示）。
特殊对象被销毁，只留下原始值 str。

虽然创建了特殊对象，但是实际上仍比对象类型更加轻量级

引用数据类型

基本
- 对象(Object)（剩下其他类型都是object）
- 数组(Array)
- 函数(Function)
特殊
- 正则（RegExp）
- 日期（Date）

注释：

参数赋值传地址
JavaScript的对象可以认为是键值对的集合

对象的方法定义

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    //对象方法作为一个函数定义存储在对象属性中。
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }};
document.getElementById("demo").innerHTML = person.fullName();
</script>

基本数据类型和引用数据类型区别

栈内存和堆内存（内存分配）
- 基本数据类型的值在栈内存中独立存放
- 引用数据类型的值再堆内存中存档，指向改地址的指针存放在栈内存中
访问机制
- 基本数据类型会直接访问
- 引用数据对象需要先得到在堆内存中的地址，按照这个地址去获得这个对象
复制变量的不同
- 基本数据类型复制后是完全独立的
- 应用数据类型复制后只是多了一个指针，仍然指向一个地址
参数传递不同
- 基本数据类型只是传了值，新参数和原数据互不影响
- 应用数据类型传递的是指针，新参数和原数据相互影响

声明变量

当您声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname = new String();
var x = new Number();
var y = new Boolean();
var cars = new Array();
var person = new Object();

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。
这条语句carname="name"将声明 window 的一个属性 carname。
非严格模式下，给未声明变量赋值创建的全局变量，是全局对象的可配置属性，
给未声明变量赋值创建的全局变量可以删除。

var var1 = 1; // 不可配置全局属性 
var2 = 2; // 没有使用 var 声明，可配置全局属性

运算符

字符串和数字运算结果是字符串即 '5'+ 5 ='55'

！==

类型和值至少有一个不一样

？？空值合并运算符

a??b
如果a不是null或者undefined，则结果为a
如果a是null或者undefined，则结果为b
通常用于提供默认值，例如（user ?? "匿名"）
或者用于选出第一个非null/undefined的值，firstName ?? lastName ?? nickName ?? "匿名"

与||的区别

??返回第一个非null和undefined的值
||返回第一个真值，无法区分false，0，“”和null、undefined

基本循环方式

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

for in

<script>
function myFunction(){
	var x;
	var txt="";
	var person={fname:"Bill",lname:"Gates",age:56}; 
	for (x in person){
		txt=txt + person[x];
	}
	document.getElementById("demo").innerHTML=txt;//BillGates56
}
</script>

break 带标签引用

不带标签只可以用在循环或者swtich
带标签可以跳出任何代码块（前提是break在当前代码块内）
但是 continue 不管带不带都不可以

cars=["BMW","Volvo","Saab","Ford"]; 
list: {
  document.write(cars[0] + "<br>"); 
  document.write(cars[1] + "<br>"); 
  document.write(cars[2] + "<br>"); 
  break list; 
  document.write(cars[3] + "<br>"); 
  document.write(cars[4] + "<br>"); 
  document.write(cars[5] + "<br>"); 
}
/*
BMW
Volvo
Saab
*/

switch

case的值可以是表达式或值，可以是’a’、6、true 等任意数据类型的值，也可以是表达式。

case 'error':
case age >= 18 && age <= 65:

错误处理方式

try、catch、finally

try语句测试代码块错误
catch语句处理错误
finally语句在try和catch之后，无论是否有异常都会执行

try{
... //异常的抛出
}catch(e){
 ... //异常的捕获与处理}
finally{ 
... //结束处理
}

特点

try和catch成对出现
只会检测语法错误
只会检测同步运行的错误

finally

一定会执行的代码

try块中有error，在catch后执行finally
try块中有return，优先执行finally再return
可以try…finallly,也可以try…catch…finally
try块中声明的let，finally中不能用（try块和finally块是独立的）

全局catch

在try…catch语法外的error，会触发

window.onerror = function(message, url, line, col, error) {
  // ...
};

**message：**error 信息。
**url：**发生 error 的脚本的 URL。
**line，col：**发生 error 处的代码的行号和列号。
**error：**error 对象。

throw

定义：自定义错误，术语为抛出异常throw exception
异常可以是js字符串、数字、逻辑值、对象，但是最好使用具有name和message属性的对象保持和内置error的兼容性

let json = '{ "age": 30 }'; // 不完整的数据
try {
  let user = JSON.parse(json); 
  if (!user.name) {
    throw new SyntaxError("数据不全：没有 name"); //抛出
  }
  alert( user.name );
} catch(err) {
  alert( "JSON Error: " + err.message ); // JSON Error: 数据不全：没有 name
}

error

error构造器

Error
SyntaxError
ReferenceError
TypeError等
对于内建的 error对象，name 属性刚好就是构造器的名字。message 则来自于参数（argument）。

let error = new Error(message);
let error = new SyntaxError(message);
let error = new ReferenceError(message);

自定义error

class ValidationError extends Error {
  constructor(message) {
    super(message); 
    this.name = "ValidationError";
  }
}
function test() {
  throw new ValidationError("Whoops!");
}
try {
  test();
} catch(err) {
  alert(err.message); // Whoops!
  alert(err.name); // ValidationError
  alert(err.stack); // 一个嵌套调用的列表，每个调用都有对应的行号
}

再次抛出

代码中不一定只有一个error，确保catch只处理知道的error并抛出其他所有error

function readData() {
  let json = '{ "age": 30 }';
  try {
    // ...
    fn(); // error!
  } catch (err) {
    // ...
		// 类型判断 将未知error再次抛出
    if (!(err instanceof SyntaxError)) {
      throw err; 
    }
  }
}
//在外部统一处理所有未知eoor
try {
  readData();
} catch (err) {
  alert( "External catch got: " + err ); // 捕获
}

JavaScript保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

标记的关键字是 ES5 中新添加的。

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

对象、属性和方法名

您也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名：

Array	Date	eval	function	hasOwnProperty
Infinity	isFinite	isNaN	isPrototypeOf	length
Math	NaN	name	Number	Object
prototype	String	toString	undefined	valueOf

Java 保留关键字

JavaScript 经常与 Java 一起使用。您应该避免使用一些 Java 对象和属性作为 JavaScript 标识符：

getClass	java	JavaArray	javaClass	JavaObject	JavaPackage

Windows 保留关键字

JavaScript 可以在 HTML 外部使用。它可在许多其他应用程序中作为编程语言使用。
在 HTML 中，您必须（为了可移植性，您也应该这么做）避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名：

alert	all	anchor	anchors	area
assign	blur	button	checkbox	clearInterval
clearTimeout	clientInformation	close	closed	confirm
constructor	crypto	decodeURI	decodeURIComponent	defaultStatus
document	element	elements	embed	embeds
encodeURI	encodeURIComponent	escape	event	fileUpload
focus	form	forms	frame	innerHeight
innerWidth	layer	layers	link	location
mimeTypes	navigate	navigator	frames	frameRate
hidden	history	image	images	offscreenBuffering
open	opener	option	outerHeight	outerWidth
packages	pageXOffset	pageYOffset	parent	parseFloat
parseInt	password	pkcs11	plugin	prompt
propertyIsEnum	radio	reset	screenX	screenY
scroll	secure	select	self	setInterval
setTimeout	status	submit	taint	text
textarea	top	unescape	untaint	window

HTML 事件句柄

除此之外，您还应该避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名。

onblur	onclick	onerror	onfocus
onkeydown	onkeypress	onkeyup	onmouseover
onload	onmouseup	onmousedown	onsubmit

严格模式 use strict

目的是指定代码在严格条件下执行
严格模式不能使用未声明的变量

不允许使用未声明的变量和对象（对象也是一个变量）
不允许删除变量或对象（delete x；//报错）
不允许删除函数
不允许变量重名
不允许八进制
不允许转义字符
不允许对只读属性赋值
不允许对getter方法读取的属性赋值
不允许删除不允许删除的属性（delete object.prototype）
变量名不能为eval、arguments
作用域eval创建的变量不能调用
禁止this指向全局对象（因此构造函数没加new时，会直接报错而不是指向全局对象）
**新增保留字：**implements、interface、let、package、private、protected、public、static、yield

他不是一条语句是一个字面量表达式
能且只能在脚本或者函数头部添加"use strict";

使用原因

消除代码不安全之处保证代码安全运行
提高编译器效率和运行速度
为新版本js做铺垫

声明提升

即解释器会将变量和函数的声明提升到函数的最顶部

变量

//只有声明会被提升，赋值不会
var x =10
console.log(x)//10

console.log(y)//undefined
var y =10

//即
var z
console.log(z)//undefined
z=10

函数

console.log(fn1)//ƒ fn1(){}
function fn1(){}

//函数表达式创建的函数不会被声明提前
//此时提前声明的是fn2变量，为undefined，且未赋值
console.log(fn2)//undefined
var fn2 = function(){}
console.log(fn2)//ƒ (){}

代码规范

变量名：驼峰
空格与运算符：运算符 ( = + - * / ) 前后需要添加空格:
代码缩进：
- 通常使用 4 个空格符号来缩进代码块：
- 不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。
语句规则
- 将左花括号放在第一行的结尾。
- 左花括号前添加一空格。
- 将右花括号独立放在一行。
- 不要以分号结束一个复杂的声明。
对象定义的规则:
- 将左花括号与类名放在同一行。
- 冒号与属性值间有个空格。
- 字符串使用双引号，数字不需要。
- 最后一个属性-值对后面不要添加逗号。
- 将右花括号独立放在一行，并以分号作为结束符号。
代码注释

/**
 * 返回 x 的 n 次幂的值。
 *
 * @param {number} x 要改变的值。
 * @param {number} n 幂数，必须是一个自然数。
 * @return {number} x 的 n 次幂的值。
 */
function pow(x, n) {
  ...
}

输入输出

输入

var str = prompt('请输入你的数据')
let a = readline();

输出

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
- 应当仅仅向文档输出写内容
- 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
- 文档在加载的过程中实际是一边加载一边用 document.write 写出内容到屏幕上，而加载完成后，document 就关闭。如果再调用 document.write 往网页上写内容的话，就会整个重写 document。
使用 innerHTML 写入到 HTML 元素。document.querySelector("").innerHTML = value
使用 console.log()写入到浏览器的控制台。

代码调试

console.log()：调试窗口上打印值 f12
设置断点：在每个断点上都会停止执行代码
- 调试工具点击代码左侧
- debugger停止执行js，并调用调试函数，和在调试工具中设置断点的效果一样debugger;
- 下一步：f9
- 跨步：运行下一条指令，但不会进入到一个函数中，快捷键 F10。
- 步入：快捷键 F11。和“下一步（Step）”类似，但在异步函数调用情况下表现不同。如果你刚刚才开始学 JavaScript，那么你可以先忽略此差异，因为我们还没有用到异步调用。
- 步出：继续执行到当前函数的末尾，快捷键 Shift+F11。
chrome snippets：chrome-F12-Sourse-Snippets可以再次写小小代码片段右键文件名-run可执行代码

使用误区

赋值语句返回变量值

if(x=0)//false
if(x=10)//true

swtich语句匹配要求===：即“10”和10 不可
字符串分行：直接分行报错，需要使用\

var x =" x \
x"

数组使用名字作为索引：使用名字作为索引后，数组转变为对象，不可以使用对象的方法

a["name"]="zdn"
var x = a.length//返回0
var y = a[0]//返回undefined