JavaScript高级程序设计读书记录(二):语言基础,操作符,语句,函数

4. 操作符

4.1 一元操作符

只操作一个值的操作符叫一元操作符（unary operator）。一元操作符是 ECMAScript中最简单的操作符。

1. 递增/递减操作符

递增++和递减操作符-- 直接照搬自 C 语言，但有两个版本：前缀版和后缀版。
无论使用前缀递增还是前缀递减操作符，变量的值都会在语句被求值之前改变。（在计算机科学中，
这通常被称为具有副作用。）请看下面的例子：

let age = 29; 
let anotherAge = --age + 2; 
console.log(age); // 28 
console.log(anotherAge); // 30

前缀递增和递减在语句中的优先级是相等的，因此会从左到右依次求值。比如：

let num1 = 2; 
let num2 = 20; 
let num3 = --num1 + num2; 
let num4 = num1 + num2; 
console.log(num3); // 21 
console.log(num4); // 21

这里，num3 等于 21 是因为 num1 先减 1 之后才加 num2。变量 num4 也是 21，那是因为加法使用
的也是递减后的值。

递增和递减的后缀版语法一样（分别是++和–），只不过要放在变量后面。后缀版与前缀版的主要
区别在于，后缀版递增和递减在语句被求值后才发生。在某些情况下，这种差异没什么影响，比如：

let age = 29; 
age++;

把递增操作符放到变量后面不会改变语句执行的结果，因为递增是唯一的操作。可是，在跟其他操作混合时，差异就会变明显，比如：

let num1 = 2; 
let num2 = 20; 
let num3 = num1-- + num2; 
let num4 = num1 + num2; 
console.log(num3); // 22 
console.log(num4); // 21

这个例子跟前面的那个一样，只是把前缀递减改成了后缀递减，区别很明显。在使用前缀版的例子
中，num3 和 num4 的值都是 21。而在这个例子中，num3 的值是 22，num4 的值是 21。这里的不同之处在于，计算 num3 时使用的是 num1 的原始值（2），而计算 num4 时使用的是 num1 递减后的值（1）。

这 4 个操作符可以作用于任何值，意思是不限于整数——字符串、布尔值、浮点值，甚至对象都可
以。递增和递减操作符遵循如下规则。

• 对于字符串，如果是有效的数值形式，则转换为数值再应用改变。变量类型从字符串变成数值。
• 对于字符串，如果不是有效的数值形式，则将变量的值设置为 NaN 。变量类型从字符串变成
  数值。
• 对于布尔值，如果是 false，则转换为 0 再应用改变。变量类型从布尔值变成数值。
• 对于布尔值，如果是 true，则转换为 1 再应用改变。变量类型从布尔值变成数值。
• 对于浮点值，加 1 或减 1。
• 如果是对象，则调用其valueOf()方法取得可以操作的值。对得到的值应用上述规则。如果是 NaN，则调用 toString()并再次应用其他规则。变量类型从对象变成数值。

let s1 = "2"; 
let s2 = "z"; 
let b = false; 
let f = 1.1; 
let o = { 
 valueOf() { 
 return -1; 
 } 
}; 
s1++; // 值变成数值 3 
s2++; // 值变成 NaN 
b++; // 值变成数值 1 
f--; // 值变成 0.10000000000000009（因为浮点数不精确）
o--; // 值变成-2

2. 一元加和减

一元加和减操作符对大多数开发者来说并不陌生，它们在 ECMAScript 中跟在高中数学中的用途一
样。一元加由一个加号（+）表示，放在变量前头，对数值没有任何影响(与java中+=,-=存在区别)：

let num = 25; 
num = +num; 
console.log(num); // 25

如果将一元加应用到非数值，则会执行与使用 Number()转型函数一样的类型转换：布尔值 false和 true 转换为 0 和 1，字符串根据特殊规则进行解析，对象会调用它们的 valueOf()和/或 toString()方法以得到可以转换的值。

let s1 = "01"; 
let s2 = "1.1"; 
let s3 = "z"; 
let b = false; 
let f = 1.1; 
let o = { 
 valueOf() { 
 return -1; 
 } 
}; 
s1 = +s1; // 值变成数值 1 
s2 = +s2; // 值变成数值 1.1 
s3 = +s3; // 值变成 NaN 
b = +b; // 值变成数值 0 
f = +f; // 不变，还是 1.1 
o = +o; // 值变成数值-1

一元减由一个减号（-）表示，放在变量前头，主要用于把数值变成负值，如把 1 转换为-1。

4.2 位操作符

ECMAScript中的所有数值都以 IEEE 754 64 位格式存储，但位操作并不直接应用到 64 位表示，而是先把值转换为32 位整数，再进行位操作，之后再把结果转换为 64 位。对开发者而言，就好像只有 32 位整数一样，因为 64 位整数存储格式是不可见的。既然知道了这些，就只需要考虑 32 位整数即可。

特殊值NaN 和Infinity在位操作中都会被当成 0 处理。如果将位操作符应用到非数值，那么首先会使用 Number()函数将该值转换为数值（这个过程是自动的），然后再应用位操作。最终结果是数值。

1. 按位非

按位非操作符用波浪符（~）表示，它的作用是返回数值的一补数。按位非是 ECMAScript 中为数不多的几个二进制数学操作符之一。看下面的例子：

let num1 = 25; // 二进制 00000000000000000000000000011001 
let num2 = ~num1; // 二进制 11111111111111111111111111100110 
console.log(num2); // -26

这里，按位非操作符作用到了数值 25，得到的结果是?26。由此可以看出，按位非的最终效果是对
数值取反并减 1，就像执行如下操作的结果一样：

let num1 = 25; 
let num2 = -num1 - 1; 
console.log(num2); // "-26"

实际上，尽管两者返回的结果一样，但位操作的速度快得多。这是因为位操作是在数值的底层表示
上完成的。

2. 按位与

按位与操作符用和号（&）表示，有两个操作数。本质上，按位与就是将两个数的每一个位对齐，然后基于真值表中的规则，对每一位执行相应的与操作。

3. 按位或

按位或操作符用管道符（|）表示，同样有两个操作数。按位或遵循如下真值表：

4. 按位异或

按位异或用脱字符（^）表示，同样有两个操作数。下面是按位异或的真值表：

5. 左移

左移操作符用两个小于号（<<）表示，会按照指定的位数将数值的所有位向左移动。
注意，左移会保留它所操作数值的符号。比如，如果?2 左移 5 位，将得到?64，而不是正 64。

6. 有符号右移

有符号右移由两个大于号（>>）表示，会将数值的所有 32 位都向右移，同时保留符号（正或负）。
有符号右移实际上是左移的逆运算。

7. 无符号右移

无符号右移用 3 个大于号表示（>>>），会将数值的所有 32 位都向右移。对于正数，无符号右移与
有符号右移结果相同

对于负数，有时候差异会非常大。与有符号右移不同，无符号右移会给空位补 0，而不管符号位是什么。对正数来说，这跟有符号右移效果相同。但对负数来说，结果就差太多了。无符号右移操作符将负数的二进制表示当成正数的二进制表示来处理。因为负数是其绝对值的二补数，所以右移之后结果变得非常之大

4.3 布尔操作符

对于编程语言来说，布尔操作符跟相等操作符几乎同样重要。如果没有能力测试两个值的关系，那
么像 if-else 和循环这样的语句也没什么用了。布尔操作符一共有 3 个：逻辑非、逻辑与和逻辑或。

1. 逻辑非

逻辑非操作符由一个叹号（!）表示，可应用给 ECMAScript 中的任何值。这个操作符始终返回布尔值，无论应用到的是什么数据类型。逻辑非操作符首先将操作数转换为布尔值，然后再对其取反。换句话说，逻辑非操作符会遵循如下规则。

• 如果操作数是对象，则返回 false。
• 如果操作数是空字符串，则返回 true。
• 如果操作数是非空字符串，则返回 false。
• 如果操作数是数值 0，则返回 true。
• 如果操作数是非 0 数值（包括 Infinity），则返回 false。
• 如果操作数是 null，则返回 true。
• 如果操作数是 NaN，则返回 true。
• 如果操作数是 undefined，则返回 true。

逻辑非操作符也可以用于把任意值转换为布尔值。同时使用两个叹号（!!），相当于调用了转型函数 Boolean()。无论操作数是什么类型，第一个叹号总会返回布尔值。第二个叹号对该布尔值取反，从而给出变量真正对应的布尔值。结果与对同一个值使用 Boolean()函数是一样的：

console.log(!!"blue"); // true 
console.log(!!0); // false 
console.log(!!NaN); // false 
console.log(!!""); // false 
console.log(!!12345); // true

2. 逻辑与

逻辑与操作符由两个和号（&&）表示，应用到两个值

逻辑与操作符可用于任何类型的操作数，不限于布尔值。如果有操作数不是布尔值，则逻辑与并不
一定会返回布尔值，而是遵循如下规则。

• 如果第一个操作数是对象，则返回第二个操作数。
• 如果第二个操作数是对象，则只有第一个操作数求值为 true 才会返回该对象。
• 如果两个操作数都是对象，则返回第二个操作数。
• 如果有一个操作数是 null，则返回 null。
• 如果有一个操作数是 NaN，则返回 NaN。
• 如果有一个操作数是 undefined，则返回 undefined。

逻辑与操作符是一种短路操作符，意思就是如果第一个操作数决定了结果，那么永远不会对第二个操作数求值。对逻辑与操作符来说，如果第一个操作数是 false，那么无论第二个操作数是什么值，结果也不可能等于 true。

3. 逻辑或

逻辑或操作符由两个管道符（||）表示

与逻辑与类似，如果有一个操作数不是布尔值，那么逻辑或操作符也不一定返回布尔值。它遵循如
下规则。

• 如果第一个操作数是对象，则返回第一个操作数。
• 如果第一个操作数求值为 false，则返回第二个操作数。
• 如果两个操作数都是对象，则返回第一个操作数。
• 如果两个操作数都是 null，则返回 null。
• 如果两个操作数都是 NaN，则返回 NaN。
• 如果两个操作数都是 undefined，则返回 undefined。

同样与逻辑与类似，逻辑或操作符也具有短路的特性。只不过对逻辑或而言，第一个操作数求值为true，第二个操作数就不会再被求值了。

4.4 乘性操作符

ECMAScript 定义了 3 个乘性操作符：乘法、除法和取模。这些操作符跟它们在 Java、C 语言及 Perl
中对应的操作符作用一样，但在处理非数值时，它们也会包含一些自动的类型转换。如果乘性操作符有不是数值的操作数，则该操作数会在后台被使用 Number()转型函数转换为数值。这意味着空字符串会被当成 0，而布尔值 true 会被当成 1。

1. 乘法操作符

乘法操作符由一个星号（*）表示，可以用于计算两个数值的乘积。其语法类似于 C 语言,不过，乘法操作符在处理特殊值时也有一些特殊的行为。

• 如果操作数都是数值，则执行常规的乘法运算，即两个正值相乘是正值，两个负值相乘也是正值，正负符号不同的值相乘得到负值。如果 ECMAScript 不能表示乘积，则返回 Infinity 或-Infinity。
• 如果有任一操作数是 NaN，则返回 NaN。
• 如果是 Infinity 乘以 0，则返回 NaN。
• 如果是 Infinity 乘以非 0的有限数值，则根据第二个操作数的符号返回 Infinity 或-Infinity。
• 如果是 Infinity 乘以 Infinity，则返回 Infinity。
• 如果有不是数值的操作数，则先在后台用 Number()将其转换为数值，然后再应用上述规则。

2. 除法操作符

除法操作符由一个斜杠（/）表示，用于计算第一个操作数除以第二个操作数的商, 跟乘法操作符一样，除法操作符针对特殊值也有一些特殊的行为。

• 如果操作数都是数值，则执行常规的除法运算，即两个正值相除是正值，两个负值相除也是正值，符号不同的值相除得到负值。如果ECMAScript不能表示商，则返回Infinity或-Infinity。
• 如果有任一操作数是 NaN，则返回 NaN。
• 如果是 Infinity 除以 Infinity，则返回 NaN。
• 如果是 0 除以 0，则返回 NaN。
• 如果是非 0 的有限值除以 0，则根据第一个操作数的符号返回 Infinity 或-Infinity。
• 如果是 Infinity 除以任何数值，则根据第二个操作数的符号返回 Infinity 或-Infinity。
• 如果有不是数值的操作数，则先在后台用 Number()函数将其转换为数值，然后再应用上述规则。

3. 取模操作符

取模（余数）操作符由一个百分比符号（%）表示，与其他乘性操作符一样，取模操作符对特殊值也有一些特殊的行为。

• 如果操作数是数值，则执行常规除法运算，返回余数。
• 如果被除数是无限值，除数是有限值，则返回 NaN。
• 如果被除数是有限值，除数是 0，则返回 NaN。
• 如果是 Infinity 除以 Infinity，则返回 NaN。
• 如果被除数是有限值，除数是无限值，则返回被除数。
• 如果被除数是 0，除数不是 0，则返回 0。
• 如果有不是数值的操作数，则先在后台用 Number()函数将其转换为数值，然后再应用上述规则。

4.5 指数操作符

ECMAScript 7 新增了指数操作符，Math.pow()现在有了自己的操作符**，结果是一样的：

console.log(Math.pow(3, 2); // 9 
console.log(3 ** 2); // 9 
console.log(Math.pow(16, 0.5); // 4 
console.log(16** 0.5); // 4

不仅如此，指数操作符也有自己的指数赋值操作符**=，该操作符执行指数运算和结果的赋值操作：

let squared = 3; 
squared **= 2; 
console.log(squared); // 9 
let sqrt = 16; 
sqrt **= 0.5; 
console.log(sqrt); // 4

4.6 加性操作符

加性操作符，即加法和减法操作符，一般都是编程语言中最简单的操作符。不过，在 ECMAScript
中，这两个操作符拥有一些特殊的行为。与乘性操作符类似，加性操作符在后台会发生不同数据类型的转换。只不过对这两个操作符来说，转换规则不是那么直观。

1. 加法操作符

加法操作符（+）用于求两个数的和, 如果两个操作数都是数值，加法操作符执行加法运算并根据如下规则返回结果：

• 如果有任一操作数是 NaN，则返回 NaN；
• 如果是 Infinity 加 Infinity，则返回 Infinity；
• 如果是-Infinity 加-Infinity，则返回-Infinity；
• 如果是 Infinity 加-Infinity，则返回 NaN；
• 如果是+0 加+0，则返回+0；
• 如果是-0 加+0，则返回+0；
• 如果是-0 加-0，则返回-0。

不过，如果有一个操作数是字符串，则要应用如下规则：

• 如果两个操作数都是字符串，则将第二个字符串拼接到第一个字符串后面；
• 如果只有一个操作数是字符串，则将另一个操作数转换为字符串，再将两个字符串拼接在一起。

如果有任一操作数是对象、数值或布尔值，则调用它们的 toString()方法以获取字符串，然后再应用前面的关于字符串的规则。对于 undefined 和 null，则调用 String()函数，分别获取"undefined"和
“null”。

2. 减法操作符

减法操作符（-）也是使用很频繁的一种操作符，与加法操作符一样，减法操作符也有一组规则用于处理 ECMAScript 中不同类型之间的转换。

• 如果两个操作数都是数值，则执行数学减法运算并返回结果。
• 如果有任一操作数是 NaN，则返回 NaN。
• 如果是 Infinity 减 Infinity，则返回 NaN。
• 如果是-Infinity 减-Infinity，则返回 NaN。
• 如果是 Infinity 减-Infinity，则返回 Infinity。
• 如果是-Infinity 减 Infinity，则返回-Infinity。
• 如果是+0 减+0，则返回+0。
• 如果是+0 减-0，则返回-0。
• 如果是-0 减-0，则返回+0。
• 如果有任一操作数是字符串、布尔值、null 或 undefined，则先在后台使用 Number()将其转
  换为数值，然后再根据前面的规则执行数学运算。如果转换结果是 NaN，则减法计算的结果是
  NaN。
• 如果有任一操作数是对象，则调用其 valueOf()方法取得表示它的数值。如果该值是 NaN，则
  减法计算的结果是 NaN。如果对象没有 valueOf()方法，则调用其 toString()方法，然后再
  将得到的字符串转换为数值。

4.7 关系操作符

关系操作符执行比较两个值的操作，包括小于（<）、大于（>）、小于等于（<=）和大于等于（>=），用法跟数学课上学的一样。这几个操作符都返回布尔值，与 ECMAScript 中的其他操作符一样，在将它们应用到不同数据类型时也会发生类型转换和其他行为。

• 如果操作数都是数值，则执行数值比较。
• 如果操作数都是字符串，则逐个比较字符串中对应字符的编码。
• 如果有任一操作数是数值，则将另一个操作数转换为数值，执行数值比较。
• 如果有任一操作数是对象，则调用其 valueOf()方法，取得结果后再根据前面的规则执行比较。
  如果没有 valueOf()操作符，则调用 toString()方法，取得结果后再根据前面的规则执行比较。
• 如果有任一操作数是布尔值，则将其转换为数值再执行比较。

4.8 相等操作符

ECMAScript 中的相等和不相等操作符，原本在比较之前会执行类型转换，但很快就有人质疑这种转换是否应该发生。最终，ECMAScript提供了两组操作符。第一组是等于和不等于，它们在比较之前执行转换。第二组是全等和不全等，它们在比较之前不执行转换。

1. 等于和不等于

ECMAScript 中的等于操作符用两个等于号（==）表示，如果操作数相等，则会返回 true。不等于
操作符用叹号和等于号（!=）表示，如果两个操作数不相等，则会返回 true。这两个操作符都会先进
行类型转换（通常称为强制类型转换）再确定操作数是否相等。

在转换操作数的类型时，相等和不相等操作符遵循如下规则。

• 如果任一操作数是布尔值，则将其转换为数值再比较是否相等。false 转换为 0，true 转换为 1。
• 如果一个操作数是字符串，另一个操作数是数值，则尝试将字符串转换为数值，再比较是否相等。
• 如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf()方法取得其原始值，再
  根据前面的规则进行比较。

在进行比较时，这两个操作符会遵循如下规则。

• null 和 undefined 相等。
• null 和 undefined 不能转换为其他类型的值再进行比较。
• 如果有任一操作数是 NaN，则相等操作符返回 false，不相等操作符返回 true。记住：即使两
  个操作数都是 NaN，相等操作符也返回 false，因为按照规则，NaN 不等于 NaN。
• 如果两个操作数都是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，
  则相等操作符返回 true。否则，两者不相等。

下表总结了一些特殊情况及比较的结果。

2. 全等和不全等

全等和不全等操作符与相等和不相等操作符类似，只不过它们在比较相等时不转换操作数。全等操
作符由 3 个等于号（===）表示，只有两个操作数在不转换的前提下相等才返回 true，比如：

let result1 = ("55" == 55); // true，转换后相等
let result2 = ("55" === 55); // false，不相等，因为数据类型不同

不全等操作符用一个叹号和两个等于号（!==）表示，只有两个操作数在不转换的前提下不相等才
返回 true。比如：

let result1 = ("55" != 55); // false，转换后相等
let result2 = ("55" !== 55); // true，不相等，因为数据类型不同

另外，虽然 null == undefined 是 true（因为这两个值类似），但 null === undefined 是false，因为它们不是相同的数据类型。

注意 由于相等和不相等操作符存在类型转换问题，因此推荐使用全等和不全等操作符。这样有助于在代码中保持数据类型的完整性。

4.9 条件操作符

条件操作符是 ECMAScript 中用途最为广泛的操作符之一，语法跟 Java 中一样：

variable = boolean_expression ? true_value : false_value;

4.10 赋值操作符

简单赋值用等于号（=）表示，将右手边的值赋给左手边的变量, 复合赋值使用乘性、加性或位操作符后跟等于号（=）表示。这些赋值操作符是类似如下常见赋值操作的简写形式：

• 乘后赋值（*=）
• 除后赋值（/=）
• 取模后赋值（%=）
• 加后赋值（+=）
• 减后赋值（-=）
• 左移后赋值（<<=）
• 右移后赋值（>>=）
• 无符号右移后赋值（>>>=）

这些操作符仅仅是简写语法，使用它们不会提升性能。

4.11 逗号操作符

逗号操作符可以用来在一条语句中执行多个操作,在一条语句中同时声明多个变量是逗号操作符最常用的场景。不过，也可以使用逗号操作符来辅助赋值。在赋值时使用逗号操作符分隔值，最终会返回表达式中最后一个值：

let num = (5, 1, 4, 8, 0); // num 的值为 0

在这个例子中，num 将被赋值为 0，因为 0 是表达式中最后一项。逗号操作符的这种使用场景并不
多见，但这种行为的确存在。

5. 语句

5.1 if 语句

5.2 do-while 语句

5.3 while 语句

5.4 for 语句

5.5 for-in 语句

for-in 语句是一种严格的迭代语句，用于枚举对象中的非符号键属性，语法如下：

for (property in expression) statement

for (const propName in window) { 
 document.write(propName); 
}

5.6 for-of 语句

for-of 语句是一种严格的迭代语句，用于遍历可迭代对象的元素，语法如下：

for (property of expression) statement

for (const el of [2,4,6,8]) { 
 document.write(el); 
}

5.7 标签语句

标签语句用于给语句加标签，语法如下：

label: statement

start: for (let i = 0; i < count; i++) { 
 console.log(i); 
}

在这个例子中，start 是一个标签，可以在后面通过 break 或 continue 语句引用。标签语句的
典型应用场景是嵌套循环。

5.8 break 和 continue 语句

break 和 continue 语句为执行循环代码提供了更严格的控制手段。其中，break 语句用于立即退出循环，强制执行循环后的下一条语句。而 continue 语句也用于立即退出循环，但会再次从循环顶部开始执行。

break 和 continue 都可以与标签语句一起使用，返回代码中特定的位置, 这通常是在嵌套循环中。

5.9 with 语句

with 语句的用途是将代码作用域设置为特定的对象，其语法是：

with (expression) statement;

使用 with 语句的主要场景是针对一个对象反复操作，这时候将代码作用域设置为该对象能提供便利，如下面的例子所示：

let qs = location.search.substring(1); 
let hostName = location.hostname; 
let url = location.href;

上面代码中的每一行都用到了 location 对象。如果使用 with 语句，就可以少写一些代码：

with(location) { 
 let qs = search.substring(1); 
 let hostName = hostname; 
 let url = href; 
}

严格模式不允许使用 with 语句，否则会抛出错误。由于 with 语句影响性能且难于调试其中的代码，通常不推荐在产品代码中使用 with语句。

5.10 switch 语句

switch 语句在比较每个条件的值时会使用全等操作符，因此不会强制转换数据类型（比如，字符串"10"不等于数值 10）。

6. 函数

函数对任何语言来说都是核心组件，因为它们可以封装语句，然后在任何地方、任何时间执行。
ECMAScript 中的函数使用 function 关键字声明，后跟一组参数，然后是函数体。

以下是函数的基本语法：

function functionName(arg0, arg1,...,argN) { 
 statements 
}

小结

• ECMAScript 中的基本数据类型包括 Undefined、Null、Boolean、Number、String 和 Symbol。
• 与其他语言不同，ECMAScript 不区分整数和浮点值，只有 Number 一种数值数据类型。
• Object 是一种复杂数据类型，它是这门语言中所有对象的基类。
• 严格模式为这门语言中某些容易出错的部分施加了限制。
• ECMAScript 提供了 C 语言和类 C 语言中常见的很多基本操作符，包括数学操作符、布尔操作符、
  关系操作符、相等操作符和赋值操作符等。
• 这门语言中的流控制语句大多是从其他语言中借鉴而来的，比如 if 语句、for 语句和 switch
  语句等。

ECMAScript 中的函数与其他语言中的函数不一样。

• 不需要指定函数的返回值，因为任何函数可以在任何时候返回任何值。
• 不指定返回值的函数实际上会返回特殊值 undefined。