说明

每天10分钟，重构你的前端知识体系专栏笔记。

一、更新表达式 UpdateExpression

左值表达式搭配 ++ – 运算符，可以形成更新表达式。

-- a;
++ a;
a --
a ++

二、一元运算表达式 UnaryExpression

更新表达式搭配一元运算符，可以形成一元运算表达式。

delete a.b;
void a;
typeof a;
- a;
~ a;
! a;
await a;

三、乘方表达式 ExponentiationExpression

乘方表达式也是由更新表达式构成的。它使用 ​​**​​ 号。

++i ** 30

// -2 这样的一元运算表达式，是不可以放入乘方表达式的，需要加括号
2 ** 2 // 正确 4
-2 ** 2 // 报错
(-2)**2  // 4

注意：​​**​​ 运算是右结合的

4 ** 3 ** 2 // 262144

262144 == 4 * 4 * 4 * 4 * 4 * 4 * 4 * 4 * 4  //(4的9次方)

// 显然等价于
4 ** (3 ** 2) // 262144
// 而不是
(4 ** 3) ** 2 // 4096

四、乘法表达式 MultiplicativeExpression

乘方表达式可以构成乘法表达式，用乘号或者除号、取余符号连接就可以了。

x * 2;

乘法表达式有三种运算符：

*  // 乘
/  // 除
%  // 取余

五、加法表达式 AdditiveExpression

加法表达式是由乘法表达式用加号或者减号连接构成的。

加法表达式有两种运算符

+  // 还能表示字符串连接
-

六、移位表达式 ShiftExpression

移位表达式由加法表达式构成，移位是一种位运算，分成三种：

  • ​​<<​​ 向左移位
  • ​​>>​​ 向右移位
  • ​​>>>​​ 无符号向右移位

NOTE：移位运算把操作数看做二进制表示的整数，然后移动特定位数。所以左移 n 位相当于乘以 2 的 n 次方，右移 n 位相当于除以 2 取整 n 次。

8 << 2 // 8*(2**2) == 32
8 >> 2 // 8/(2**2) == 2
-1 >>> 1  // 2147483647
// -1的原码
0000 0000 0000 0000 0000 0000 0000 0001
// -1的反码
1111 1111 1111 1111 1111 1111 1111 1110
// -1的补码
1111 1111 1111 1111 1111 1111 1111 1111

// 右边移1位
01111 1111 1111 1111 1111 1111 1111 111

-1 >>> 1 // 2 ** 31 - 1 == 2147483647

七、关系表达式 RelationalExpression

移位表达式可以构成关系表达式（大于、小于、大于等于、小于等于等运算符号连接），统称为关系运算。

<=
>=
<
>
instanceof
in

注意：​​<=​​​ 和 ​​>=​​​ 完全是针对数字的，所以 ​​<=​​​ 并不等价于 ​​< 或 ==​​ 。

null <= undefined
//false
null == undefined
//true

八、相等表达式 EqualityExpression

在语法上，相等表达式是由关系表达式用相等比较运算符（如 ==）连接构成的。

1、运算符

  • ==
  • !=
  • ===
  • !==

其中 ​​==​​ 是一个JavaScript中著名的设计失误。

类型不同的变量比较时 == 运算只有三条规则

  • ​​undefined​​​ 与​​null​​ 相等
  • 字符串和​​bool​​ 都转为数字再比较
  • 对象转换成​​primitive​​ 类型再比较

关于 ​​primitive​​​ 可以看看​​ECMAScript 原始类型​​​，以及这篇文章：​​JavaScript-变量-原始类型primitive type​​

false == '0' // true
[] == 0 // true
[] == false // true

九、位运算表达式

9.1、按位与表达式 BitwiseANDExpression

由按位与运算符（​​&​​）连接按位异或表达式构成，按位与表达式把操作数视为二进制整数，然后把两个操作数按位做与运算。

9.2、按位异或表达式 BitwiseANDExpression

由按位异或运算符（​​^​​）连接按位与表达式构成，按位异或表达式把操作数视为二进制整数，然后把两个操作数按位做异或运算。异或两位相同时得 0，两位不同时得 1。

// 不用其他变量实现两个数的交互
let a = 123, b = 456;

a = a ^ b;
b = a ^ b;
a = a ^ b;

console.log(a); // 456
console.log(b); // 123

9.3、按位或表达式 BitwiseORExpression

由按位或运算符（​​|​​）连接相等表达式构成，按位或表达式把操作数视为二进制整数，然后把两个操作数按位做或运算。

按位或运算常常被用在一种叫做 ​​Bitmask​​​ 的技术上。有时间可以看看这篇：​​位掩码(BitMask)的介绍与使用​​

十、逻辑与表达式和逻辑或表达式

10.1、逻辑与表达式

由按位或表达式经过逻辑与运算符连接构成。

false && undefined; // false
// 短路逻辑 foo()不执行
true || foo();

10.2、逻辑或表达式

由逻辑与表达式经逻辑或运算符连接构成。

false || 1; // 1

十一、条件表达式 ConditionalExpression

由逻辑或表达式和条件运算符构成，条件运算符又称​​三目运算符​​​，它有三个部分，由两个运算符​​?​​​和​​:​​配合使用。

condition ? branch1 :