写文章

学习JavaScript红宝书（十二）——操作符（上）

吐槽君 分类：javascript

操作符

ECMA-262 描述了一组可用于操作数据值的操作符。

一元操作符

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

递增/递减操作符

递增和递减操作符是一种一元操作符，它直接照搬自 C 语言。根据前缀和后缀两个版本，它一共有四种情况：

++age; // 前缀递增版
--age; // 前缀递减版
age++; // 后缀递增版
age--; // 后缀递减版

使用前缀版时，变量的值会在语句被求值前就改变。在计算机科学中，这通常被称为具有副作用。
比如：

newAge = ++age + 1;

等价于

age = age + 1;
newAge = age + 1;

而后缀版在计算结束后，再进行递增/递减操作。

newAge = age++ + 1;

等价于

newAge = age + 1;
age = age + 1;

因此前后两种方式得到的 newAge 值是不一样的。要注意这种差别，并根据情况思考应该使用前缀版还是后缀版。

这 4 个操作符可以作用于任何值。遵循如下规则：

  1. 字符串，如果是有效的数值形式，则转换为数值再应用改变。变量类型从字符串变成数值。
  2. 字符串，如果不是有效的数值形式，则将变量的值设置为 NaN 。变量类型从字符串变成数值。
  3. 布尔值，如果是 false，则转换为 0 再应用改变。变量类型从布尔值变成数值。
  4. 布尔值，如果是 true，则转换为 1 再应用改变。变量类型从布尔值变成数值。
  5. 浮点值，加 1 或减 1。
  6. 对象，则调用其 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

一元加/减

如果将一元加应用到非数值，则会执行与使用 Number()转型函数一样的类型转换，之后再赋值正或负。

布尔值 false 和 true 转换为 0 和 1，再赋正负。

字符串如果可以转换成数值就附上正负，如果不能就得到NaN。

对象会调用它们的 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

减号则会把数值变成负数:

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

加性操作符

加法操作符

加法操作符（+）用于求两个数的和：

let result = 1 + 2;

如果两个操作数都是数值：

  1. 如果有任一操作数是 NaN，则返回 NaN；

  2. 如果是 Infinity 加 Infinity，则返回 Infinity；

  3. 如果是-Infinity 加-Infinity，则返回-Infinity；

  4. 如果是 Infinity 加-Infinity，则返回 NaN；

  5. 如果是+0 加+0，则返回+0；

  6. 如果是-0 加+0，则返回+0；

  7. 如果是-0 加-0，则返回-0。

如果有一个操作数是字符串：

  1. 另一个也是字符串，则按先后顺序拼接两个字符串；

  2. 另一个操作数是对象、数值或布尔值，则调用它们的 toString()方法以获取字符串，然后拼接。对于 undefined 和 null，则调用 String()函数，分别获取"undefined"和"null"。

比如：

let result2 = 5 + "5"; // 一个数值和一个字符串
console.log(result2); // "55"

减法操作符

一般用于数值相减。

减法操作符的特殊情况和加法有些不同：

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

可以看一下下面的例子：

let result1 = 5 - true; // true 被转换为1，所以结果是4
let result2 = NaN - 1; // NaN
let result3 = 5 - 3; // 2
let result4 = 5 - ""; // ""被转换为0，所以结果是5
let result5 = 5 - "2"; // "2"被转换为2，所以结果是3
let result6 = 5 - null; // null 被转换为0，所以结果是5

乘性操作符

ECMAScript 定义了 3 个乘性操作符：乘法、除法和取模。如果乘性操作符有不是数值的操作数，则该操作数会被 Number()转型函数转换为数值。

乘法操作符

乘法操作符由一个星号（*）表示，可以用于计算两个数值的乘积：

let result = 34 * 56;

当遇到特殊值时：

  1. 如果有任一操作数是 NaN，则返回 NaN。
  2. 如果是 Infinity 乘以 0，则返回 NaN。
  3. 如果是 Infinity 乘以非 0 的有限数值，则根据第二个操作数的符号返回 Infinity 或-Infinity。
  4. 如果是 Infinity 乘以 Infinity，则返回 Infinity。
  5. 如果有不是数值的操作数，则先在后台用 Number()将其转换为数值，然后再应用上述规则。

除法操作符

除法操作符由一个斜杠（/）表示，用于计算第一个操作数除以第二个操作数的商：

let result = 66 / 11;

当遇到特殊值时：

  1. 如果有任一操作数是 NaN，则返回 NaN。
  2. 如果是 Infinity 除以 Infinity，则返回 NaN。
  3. 如果是 0 除以 0，则返回 NaN。
  4. 如果是非 0 的有限值除以 0，则根据第一个操作数的符号返回 Infinity 或-Infinity。
  5. 如果是 Infinity 除以任何数值，则根据第二个操作数的符号返回 Infinity 或-Infinity。
  6. 如果有不是数值的操作数，则先在后台用 Number()函数将其转换为数值，然后再应用上述规则。

取模操作符

取模操作符，即取余数。由一个百分比符号（%）表示：

let result = 26 % 5; // 等于1

当遇到特殊值时：

  1. 如果被除数是无限值，除数是有限值，则返回 NaN。
  2. 如果被除数是有限值，除数是 0，则返回 NaN。
  3. 如果是 Infinity 除以 Infinity，则返回 NaN。
  4. 如果被除数是有限值，除数是无限值，则返回被除数。
  5. 如果被除数是 0，除数不是 0，则返回 0。
  6. 如果有不是数值的操作数，则先在后台用 Number()函数将其转换为数值，然后再应用上述规则。

指数操作符

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; // 9

布尔操作符

布尔操作符一共有 3 个：逻辑非、逻辑与和逻辑或。

逻辑非

逻辑非操作符由一个叹号（!）表示，可应用给 ECMAScript 中的任何值。它首先将操作数（任意数据类型）转换为布尔值，然后再对其取反。

它遵循如下规则：

  1. 如果操作数是对象，则返回 false。
  2. 如果操作数是空字符串，则返回 true。
  3. 如果操作数是非空字符串，则返回 false。
  4. 如果操作数是数值 0，则返回 true。
  5. 如果操作数是非 0 数值（包括 Infinity），则返回 false。
  6. 如果操作数是 null，则返回 true。
  7. 如果操作数是 NaN，则返回 true。
  8. 如果操作数是 undefined，则返回 true。

可以看下面的例子：

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

同时使用两个叹号（!!），相当于调用了转型函数 Boolean()：

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

逻辑与

逻辑与操作符由两个和号（&&）表示：

let result = true && false;

遵循数学真值表。
如果有操作数不是布尔值，则逻辑与并不一定会返回布尔值。它遵循如下规则：

  1. 如果第一个操作数是对象，则返回第二个操作数。
  2. 如果第二个操作数是对象，则只有第一个操作数求值为 true 才会返回该对象。
  3. 如果两个操作数都是对象，则返回第二个操作数。
  4. 如果有一个操作数是 null，则返回 null。
  5. 如果有一个操作数是 NaN，则返回 NaN。
  6. 如果有一个操作数是 undefined，则返回 undefined。

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

let found = true;
let result = found && someUndeclaredVariable; // 这里会出错
console.log(result); // 不会执行这一行

因为第一个操作数是 true，所以会返回第二个对象。而 someUndeclaredVariable 是未声明的变量，所以这里会报错。

当我们把第一个操作符改成 false:

let found = false;
let result = found && someUndeclaredVariable; // 不会出错
console.log(result); // 会执行

因为第一个操作数是 false，所以会直接返回 false。这个时候第二个变量会被无视，所以也就不会报错。

逻辑或

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

let result = true || false;

逻辑或也符合数学真值表的判定方法。

遇到有操作数不是布尔值时，遵循如下规则：

  1. 如果第一个操作数是对象，则返回第一个操作数。
  2. 如果第一个操作数求值为 false，则返回第二个操作数。
  3. 如果两个操作数都是对象，则返回第一个操作数。
  4. 如果两个操作数都是 null，则返回 null。
  5. 如果两个操作数都是 NaN，则返回 NaN。
  6. 如果两个操作数都是 undefined，则返回 undefined。

逻辑或操作符也具有短路的特性。只不过对逻辑或而言，第一个操作数求值为 true，第二个操作数就不会再被求值了。这里不再举例说明。

基于这个特性，可以避免给变量赋值 null 或 undefined。比如：

let myObject = preferredObject || backupObject;

其中，preferredObject 变量包含首选的值，backupObject 变量包含备用的值。如果 preferredObject 不是 null，则它的值就会赋给 myObject；如果 preferredObject 是 null，则 backupObject 的值就会赋给 myObject。这种模式在 ECMAScript 代码中经常用于变量赋值。

关系操作符

关系操作符包括小于（<）、大于（>）、小于等于（<=）和大于等于（>=）。

当两个变量都是数值时，按数学规则比较大小。

当有不同数据类型时，按如下规则：

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

在使用关系操作符比较两个字符串时，关系操作符会比较字符串中对应字符的编码。所以一般来说，“字母顺序靠后”的更大。但如果比较大小写字母，这个规则就不适用：

let result = "Brick" < "alphabet"; // true

在这里，字符串"Brick"被认为小于字符串"alphabet"，因为字母 B 的编码是 66，字母 a 的编码是 97。所以要把他们都转成大写或小写再去比较才有意义：

let result = "Brick".toLowerCase() < "alphabet".toLowerCase(); // false

在比较两个数值字符串也是这样：

let result = "23" < "3"; // true

我们第一反映会觉得 23 大，但是因为是字符串，他们会比较“2”和“3”在编码里的数值。字符"2"的编码是 50，而字符"3"的编码是 51。所以后者更大。

但是如果其中一个是数值，那么另一个会先被转换成数值再比较：

let result = "23" < 3; // false

当字符串不能转换成数值时。字符串首先会被转换为 NaN。而 NaN 和任何变量比较时都会返回 False。所以会有下面这样的神奇情况：

let result = "a" < 3; // 因为"a"会转换为NaN，所以结果是false
let result1 = NaN < 3; // false
let result2 = NaN >= 3; // false

回复

我来回复

  • 暂无回复内容