语言基础

本章内容:

语法
类型
流控制语句
理解函数

本章接下来的内容主要基于 ECMAScript 第 6 版。

3.1 语法

3.1.1 区分大小写

ECMAScript 中的一切（变量、函数名和操作符）都区分大小写。。换句话说，变量 test 和变量 Test 是两个不同的变量。类似地，typeof 不能作为函数名，因为它是一个关键字。但 Typeof 是一个完全有效的函数名。

3.1.2 标识符

标识符是指用来对变量、函数、属性等进行命名的一串字符。标识符的规则如下:

第一个字符必须是一个字母、下划线（_）或美元符号（$）;
后续的字符可以是字母、下划线、美元符号或数字。
标识符中的字母可以是扩展的 ASCII 或 Unicode 字母字符，也可以是拉丁字母字符。
标识符不能是保留字。
标识符不能以数字开头。
标识符一般采用驼峰大小写形式。即第一个单词的首字母小写，后面每个单词的首字母大写

3.1.3 注释

注释是程序员为程序添加说明的代码，它可以被 JavaScript 引擎忽略。注释分为单行注释和多行注释。单行注释以两个斜杠（//）开头，多行注释以 /_ 开始，以 _/ 结束。

3.1.4 严格模式

严格模式是一种不同的 JavaScript 解析和执行模型，ECMAScript 3 的一些不规范写法在这种模式下会被处理，对于不安全的活动将抛出错误。要对整个脚本启用严格模式，在脚本开头加上这一行：

'use strict'

它其实是一个预处理指令。任何支持的 JavaScript 引擎看到它都会切换到严格模式。

也可以单独指定一个函数在严格模式下执行

function doSomething() {
  'use strict'
  // 函数体
}

所有现代浏览器都支持严格模式。

3.1.5 语句

ECMAScript 中的语句以分号结尾。省略分号意味着由解析器确定语句在哪里结尾

let sum = a + b // 没有分号也有效，但不推荐
let diff = a - b // 加分号有效，推荐

记着加分号有助于防止省略造成的问题，比如可以避免输入内容不完整。此外，加分号也便于开发者通过删除空行来压缩代码（如果没有结尾的分号，只删除空行，则会导致语法错误）。加分号也有助于在某些情况下提升性能，因为解析器会尝试在合适的位置补上分号以纠正语法错误。

多条语句可以合并到一个 C 语言风格的代码块中。代码块由一个左花括号（{）标识开始，一个右花括号（}）标识结束：

if (test) {
  statement1
  statement2
}

if 之类的控制语句只在执行多条语句时要求必须有代码块。不过，最佳实践是始终在控制语句中使用代码块，即使要执行的只有一条语句，如下例所示：

// 有效，但容易导致错误，应该避免
if (test) console.log(test)
// 推荐
if (test) {
  console.log(test)
}

ECMAScript 关键字与保留字

ECMAScript 有一些保留的关键字，不能用作标识符或属性名。下面是这些关键字（带有的关键字是未来的保留字，实际上当前版本的 ECMAScript 已经将它们用作一些标准内建对象的属性名）：

Keyword	Keyword	Keyword	Keyword
break	do	in	typeof
case	else	instanceof	var
catch	export	new	void
class	extends	return	while
const	finally	super	with
continue	for	switch	yield
debugger	function	this
default	if	throw
delete	import	try

规范中也描述了一组未来的保留字，同样不能用作标识符或属性名。虽然保留字在语言中没有特定用途，但它们是保留给将来做关键字用的。

始终保留:
enum

严格模式下保留:

Keyword	Keyword	Keyword
implements	package	public
interface	protected	static
let	private

模块代码中保留:
await

3.3 变量

ECMAScript 变量是松散类型的，也就是说，变量的值及其类型在赋值时可以改变。有 3 个关键字可以声明变量：var、const 和 let。其中，var 在 ECMAScript 的所有版本中都可以使用，而 const 和 let 只能在 ECMAScript 6 及更晚的版本中使用。

3.3.1 var 关键字

var message // 声明一个变量

使用 var 操作符声明变量时，可以用它保存任何类型的值。如果省略初始化，则变量会被初始化为 undefined。初始化变量不会将它标识为字符串类型，只是一个简单的赋值而已。随后，不仅可以改变保存的值，也可以改变值的类型

var 声明的作用域 使用 var 操作符声明变量时，变量会被自动添加到最接近的上下文。在函数内部，最接近的上下文就是函数的局部上下文。在函数外部，变量会被添加到全局上下文。如果省略 var，则变量会被自动添加到全局上下文中。
js
```
function test() {
  var message = 'hi' // 局部变量
}
test()
console.log(message) // 出错！
```
js
```
function test() {
  message = 'hi' // 全局变量
}
test()
console.log(message) // "hi"
```
定义多个变量可以使用逗号分隔：
js
```
var message = 'hi',
  found = false,
  age = 29
```
var 声明的提升 使用 var 声明的变量会自动提升到函数作用域的顶部。提升使你在声明之前就可以访问变量，这个变量会被自动初始化为 undefined。
js
```
function foo() {
  console.log(age)
  var age = 26
}
foo() // undefined
```
上述代码等价于：
js
```
function foo() {
  var age
  console.log(age)
  age = 26
}
foo() // undefined
```

3.3.2 let 声明

let 声明的变量只在块级作用域内有效，不能在声明之前使用，否则会抛出错误。let 声明的变量不会提升到作用域顶部，如果在声明之前访问了变量，会导致 ReferenceError。

if (true) { 
  var name = 'Matt'; 
  console.log(name); // Matt 
} 
console.log(name);   // Matt 


if (true) { 
  let age = 26; 
  console.log(age);   // 26 
} 
console.log(age);     // ReferenceError: age 没有定义

这里 let声明的age作用域仅在代码块内部,在代码块外部使用时报错

let 也不允许同一个块作用域中出现冗余声明。这样会导致报错

var name; 
var name; 
let age; 
let age;  // SyntaxError；标识符 age 已经声明过了

但是在不同的作用域中如果使用了相同的标识符是不会报错的

var name = 'Nicholas';  
console.log(name);    // 'Nicholas' 
if (true) { 
 	var name = 'Matt'; 
 	console.log(name);  // 'Matt' 
}	
let age = 30; 
console.log(age);    // 30 
if (true) { 
  let age = 26; 
  console.log(age);  // 26 
}

1.暂时性死区

let 与 var 的另一个重要的区别，就是 let 声明的变量不会在作用域中被提升。

// name 会被提升 
console.log(name); // undefined 
var name = 'Matt'; 
// age 不会被提升 
console.log(age); // ReferenceError：age 没有定义 
let age = 26;

在 let 声明之前的执行瞬间被称为“暂时性死区”（temporal dead zone），在此阶段引用任何后面才声明的变量都会抛出 ReferenceError。

2.全局声明

与 var 关键字不同，使用 let 在全局作用域中声明的变量不会成为 window 对象的属性（var 声明的变量则会）。

var name = 'Matt'; 
console.log(window.name); // 'Matt' 
let age = 26; 
console.log(window.age);  // undefined

不过，let 声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续。因此，为了避免 SyntaxError，必须确保页面不会重复声明同一个变量。

3.条件声明

由于var声明的变量会被提升,JavaScript引擎会自动将多余的生命在作用域顶部合并为一个声明.因为 let 的作用域是块，所以不可能检查前面是否已经使用 let 声明过同名变量，同时也就不可能在没有声明的情况下声明它。

html

<script>  
    var name = 'Nicholas'; 
    let age = 26; 
</script> 
<script> 
    // 假设脚本不确定页面中是否已经声明了同名变量 
    // 那它可以假设还没有声明过 
    var name = 'Matt'; 
    // 这里没问题，因为可以被作为一个提升声明来处理 
    // 不需要检查之前是否声明过同名变量 
    let age = 36; 
    // 如果 age 之前声明过，这里会报错 
</script>

使用 try/catch 语句或 typeof 操作符也不能解决，因为条件块中 let 声明的作用域仅限于该块。

html

<script> 
    let name = 'Nicholas'; 
    let age = 36; 
</script> 
<script> 
    // 假设脚本不确定页面中是否已经声明了同名变量 
    // 那它可以假设还没有声明过 
    if (typeof name === 'undefined') { 
        let name; 
    } 
    // name 被限制在 if {} 块的作用域内 
    // 因此这个赋值形同全局赋值 
    name = 'Matt'; 
    try { 
        console.log(age); // 如果 age 没有声明过，则会报错 
    } 
    catch(error) { 
        let age; 
    } 
    // age 被限制在 catch {}块的作用域内 
    // 因此这个赋值形同全局赋值 
    age = 26; 
</script>

4.`for` 循环中的 `let` 声明

在 let 出现之前，for 循环定义的迭代变量会渗透到循环体外部：

for (var i = 0; i < 5; ++i) { 
  // 循环逻辑  
} 
console.log(i); // 5

改成使用 let 之后，这个问题就消失了，因为迭代变量的作用域仅限于 for 循环块内部：

for (let i = 0; i < 5; ++i) { 
  // 循环逻辑 
} 
console.log(i); // ReferenceError: i 没有定义

在使用 var 的时候，最常见的问题就是对迭代变量的奇特声明和修改：

for (var i = 0; i < 5; ++i) { 
    setTimeout(() => console.log(i), 0) 
} 
// 你可能以为会输出 0、1、2、3、4 
// 实际上会输出 5、5、5、5、5

变量提升导致的陷阱： - var声明的i会被提升到函数/全局作用域顶部 - 所有setTimeout回调共享同一个i变量
事件循环机制：
- 即使延迟为0，setTimeout回调也会进入任务队列
- 当同步代码执行完后（此时i=5）才会执行这些回调
作用域问题可视化：
同步阶段执行流 ▼
│
├─ i=0 → 创建定时器1
├─ i=1 → 创建定时器2
├─ ...
└─ i=5 → 循环结束
↓ 异步阶段 ▼
├─ 执行定时器1 (此时i=5)
├─ 执行定时器2 (此时i=5)
└─ ...

而在使用 let 声明迭代变量时，JavaScript 引擎在后台会为每个迭代循环声明一个新的迭代变量。每个 setTimeout 引用的都是不同的变量实例，所以 console.log输出的是我们期望的值，也就是循环执行过程中每个迭代变量的值。

for (let i = 0; i < 5; ++i) { 
    setTimeout(() => console.log(i), 0) 
} 
// 会输出 0、1、2、3、4

这种每次迭代声明一个独立变量实例的行为适用于所有风格的 for 循环，包括 for-in 和 for-of 循环。

3.3.3 const 声明

const 的行为与 let 基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，且尝试修改 const 声明的变量会导致运行时错误。

const age = 26; 
age = 36; // TypeError: 给常量赋值 
// const 也不允许重复声明 
const name = 'Matt'; 
const name = 'Nicholas'; // SyntaxError 
// const 声明的作用域也是块 
const name = 'Matt'; 
if (true) {  
  const name = 'Nicholas'; 
} 
console.log(name); // Matt

const 声明的限制只适用于它指向的变量的引用。换句话说，如果 const 变量引用的是一个对象，那么修改这个对象内部的属性并不违反 const 的限制。

const person = {}; 
person.name = 'Matt';  // ok

JavaScript 引擎会为 for 循环中的 let 声明分别创建独立的变量实例，虽然 const变量跟 let 变量很相似，但是不能用 const 来声明迭代变量（因为迭代变量会自增 i++）：

for (const i = 0; i < 10; ++i) {} // TypeError：给常量赋值

不过，如果你只想用 const 声明一个不会被修改的 for 循环变量，那也是可以的。也就是说，每次迭代只是创建一个新变量。这对 for-of 和 for-in 循环特别有意义：

let i = 0;  
for (const j = 7; i < 5; ++i) { 
    //for循环中的操作不涉及 j 值的改变
  console.log(j); 
} 
// 7, 7, 7, 7, 7 
for (const key in {a: 1, b: 2}) { 
  console.log(key); 
} 
// a, b 
for (const value of [1,2,3,4,5]) { 
  console.log(value); 
} 
// 1, 2, 3, 4, 5

3.3.4 声明风格及最佳实践

ECMAScript 6 增加 let 和 const 从客观上为这门语言更精确地声明作用域和语义提供了更好的支持。着这两个新关键字的出现，新的有助于提升代码质量的最佳实践也逐渐显现。

1.不使用`var`

限制自己只使用 let 和 const 有助于提升代码质量，因为变量有了明确的作用域、声明位置，以及不变的值。

2.`const`优先,`let`次之

使用 const 声明可以让浏览器运行时强制保持变量不变，也可以让静态代码分析工具提前发现不合法的赋值操作。只在提前知道未来会有修改时，再使用 let。这样可以让开发者更有信心地推断某些变量的值永远不会变，同时也能迅速发现因意外赋值导致的非预期行为。

3.4 数据类型

ECMAScript 有 6 种简单数据类型（也称为原始类型）：

Undefined
Null
Boolean
Number
String
Symbol

还有一种复杂数据类型Object:一种无序名值对的集合

所有的值都可以用上述7种数据类型之一来表示,虽然不足以表示全部数据,但 ECMScript 的数据类型很灵活,一种数据类型可以当做多种数据类型来使用

3.4.1 `typeof` 操作符

typeof操作符是用来确定任意变量的数据类型的,返回值为以下字符串之一:

undefined表示值未定义；
boolean表示值为布尔值；
string表示值为字符串；
number表示值为数值；
object表示值为对象（而不是函数）或 null；
function表示值为函数；
symbol表示值为符号。

let message = "some string"; 
console.log(typeof message);    // "string" 
console.log(typeof(message));   // "string" 
console.log(typeof 95);         // "number"

我们把一个变量（message）和一个数值字面量传给了 typeof 操作符。注意，因为 typeof 是一个操作符而不是函数，所以不需要参数（但可以使用参数）。

调用 typeof null 返回的是"object"。这是因为特殊值 null 被认为是一个对空对象的引用。

3.4.2 Undefined 类型

Undefined 类型只有一个值，就是特殊值 undefined。当使用 var 或 let 声明了变量但没有初始化时，就相当于给变量赋予了 undefined 值：

let message; 
console.log(message == undefined); // true

默认情况下，任何未经初始化的变量都会取得 undefined 值。

注意，包含 undefined 值的变量跟未定义变量是有区别的。

let message;    // 这个变量被声明了，只是值为 undefined 
// 确保没有声明过这个变量 
// let age 
console.log(message); // "undefined" 
console.log(age);     // 报错

对未声明的变量，只能执行一个有用的操作，就是对它调用 typeof。（对未声明的变量调用 delete 也不会报错，但这个操作没什么用，实际上在严格模式下会抛出错误。）

在对未初始化的变量调用 typeof 时，返回的结果是"undefined"，但对未声明的变量调用它时，返回的结果还是"undefined"

let message; // 这个变量被声明了，只是值为 undefined 
// 确保没有声明过这个变量 
// let age 
console.log(typeof message); // "undefined" 
console.log(typeof age);     // "undefined"

undefined 是一个假值。因此，如果需要，可以用更简洁的方式检测它。不过要记住，也有很多其他可能的值同样是假值。所以一定要明确自己想检测的就是 undefined 这个字面值，而不仅仅是假值。

let message; // 这个变量被声明了，只是值为 undefined // age 没有声明  
if (message) { 
  // 这个块不会执行 
} 
if (!message) { 
  // 这个块会执行 
} 
if (age) { 
  // 这里会报错 
}

3.4.3 Null 类型

Null 类型同样只有一个值，即特殊值 null。逻辑上讲，null 值表示一个空对象指针，这也是给 typeof 传一个 null 会返回"object"的原因：

let car = null; 
console.log(typeof car);  // "object"

在定义将来要保存对象值的变量时，建议使用 null 来初始化，不要使用其他值。这样，只要检查这个变量的值是不是 null 就可以知道这个变量是否在后来被重新赋予了一个对象的引用，比如：

if (car != null) {  
  // car 是一个对象的引用 
}

undefined 值是由 null 值派生而来的，因此 ECMA-262 将它们定义为表面上相等，如下面的例子所示：

console.log(null == undefined);  // true

用等于操作符（==）比较 null 和 undefined 始终返回 true。但要注意，这个操作符会为了比较而转换它的操作数（本章后面将详细介绍）。

即使 null 和 undefined有关系，它们的用途也是完全不一样的。如前所述，永远不必显式地将变量值设置为 undefined。但 null 不是这样的。任何时候，只要变量要保存对象，而当时又没有那个对象可保存，就要用 null 来填充该变量。这样就可以保持 null 是空对象指针的语义，并进一步将其与 undefined 区分开来。

null 是一个假值。因此，如果需要，可以用更简洁的方式检测它。不过要记住，也有很多其他可能的值同样是假值。所以一定要明确自己想检测的就是 null 这个字面值，而不仅仅是假值。

let message = null; 
let age;  
if (message) { 
  // 这个块不会执行 
} 
if (!message) { 
  // 这个块会执行 
} 
if (age) { 
  // 这个块不会执行 } 
if (!age) { 
  // 这个块会执行 }

语言基础 ​

3.1 语法 ​

3.1.1 区分大小写 ​

3.1.2 标识符 ​

3.1.3 注释 ​

3.1.4 严格模式 ​

3.1.5 语句 ​

ECMAScript 关键字与保留字 ​

3.3 变量 ​

3.3.1 var 关键字 ​

3.3.2 let 声明 ​

1.暂时性死区 ​

2.全局声明 ​

3.条件声明 ​

4.for 循环中的 let 声明 ​

3.3.3 const 声明 ​

3.3.4 声明风格及最佳实践 ​

1.不使用var ​

2.const优先,let次之 ​

3.4 数据类型 ​

3.4.1 typeof 操作符 ​

3.4.2 Undefined 类型 ​

3.4.3 Null 类型 ​