1.3JavaScript语言的非运算符(Non-Operator)和运算符(Operator)

1.非运算符

非运算符	描述
`空白`	空格(`U+0020`)、水平制表符(`\t`,`U+0009`)、垂直制表符(`\v`,`U+000B`)、分页符(`\f`,`U+000C`)。
`行结束符`	换行符(`\n`,`U+000A`)、回车符(`\r`,`U+000D`)、行分隔符(`U+2028`)、段落分隔符(`U+2029`)。
`,`	逗号
`;`	分号
`()`	圆括号
`[]`	方括号
`{}`	花括号
`...`	省略号

2.一元运算符

运算符	名称	描述
`+a`	取正	`a` 的值本身。
`-a`	取负	`a` 的负值。
`++a`	前递增	`a` 的值加 1，然后返回 `a`。
`--a`	前递减	`a` 的值减 1，然后返回 `a`。
`a++`	后递增	返回 `a`，然后将 `a` 的值加 1。
`a--`	后递减	返回 `a`，然后将 `a` 的值减 1。

3.算术运算符

运算符	描述
`a + b`	加法，字符串连接。
`a - b`	减法
`a * b`	乘法
`a / b`	除法
`a % b`	求余
`a ** b`	求幂

4.赋值运算符

运算符	名称
`a = b`	赋值
`a += b`	加法赋值
`a -= b`	减法赋值
`a *= b`	乘法赋值
`a /= b`	除法赋值
`a %= b`	求余赋值
`a **= b`	求幂赋值
`a &&= b`	逻辑与赋值
`a \|\|= b`	逻辑或赋值
`a &= b`	按位与赋值
`a \|= b`	按位或赋值
`a ^= b`	按位异或赋值
`a <<= b`	左移位赋值
`a >>= b`	有符号右移位赋值
`a >>>= b`	无符号右移位赋值

5.相等性运算符

=== 运算符与 Object.is() 静态方法的区别：

//区别一
0 === +0  // true
0 === -0  // true
+0 === -0 // true
Object.is(0, +0)  // true
Object.is(0, -0)  // false
Object.is(+0, -0) // false

//区别二
NaN === 除了NaN的任何值  // false
NaN === NaN            // false
Object.is(NaN, 除了NaN的任何值)  // false
Object.is(NaN, NaN)            // true

运算符	名称	描述
`a == b`	相等(不推荐)	先进行强制类型转换，再比较 `a` 和 `b` 的值是否相等，如果值相等，则返回 `true`。字符串类型：字符相同(区分大小写)、字符顺序相同。
`a === b`	全等(推荐)	不进行强制类型转换，再比较 `a` 和 `b` 的类型和值是否全相等，需类型和值同时都相等，则返回 `true`。注意：`undefined === undefined`、`null === null` 都会返回 `true`，但 `undefined === null` 会返回 `false`。注意：如果 `a` 和 `b` 都是对象，则仅当它们引用同一对象时才会返回 `true`。注意：其它详见“`===` 运算符与 `Object.is()` 静态方法的区别”章节。字符串类型：类型相同、字符相同(区分大小写)、字符顺序相同。
`a != b`	不相等(不推荐)	先进行强制类型转换，再比较 `a` 和 `b` 的值是否不相等，如果值不相等，则返回 `true`。
`a !== b`	不全等(推荐)	不进行强制类型转换，再比较 `a` 和 `b` 的类型和值是否不相等，如果类型和值有其一不相等或全不相等，则返回 `true`。注意：不全等运算符(`!==`)是全等运算符(`===`)的否定，`a !== b` 与 `!(a === b)` 的结果始终相同。

6.关系比较运算符

运算符	名称	描述
`a < b`	小于	如果 `a` 小于 `b`，则返回 `true`。
`a <= b`	小于或等于	如果 `a` 小于或等于 `b`，则返回 `true`。
`a > b`	大于	如果 `a` 大于 `b`，则返回 `true`。
`a >= b`	大于或等于	如果 `a` 大于或等于 `b`，则返回 `true`。

7.布尔逻辑运算符

运算符	名称	描述
`!表达式`	逻辑非(not)	如果表达式的计算结果为 `false`，则返回 `true`，否则返回 `false`。如果想得到表达式的计算结果，可以取反两次：`!!表达式`。
`表达式1 && 表达式2`	逻辑与(and)	如果左侧表达式1的计算结果为 `false`，则不计算右侧表达式2并返回左侧表达式1的返回值。如果左侧表达式1的计算结果为 `true`，则继续计算右侧表达式2并返回右侧表达式2的返回值。
`表达式1 \|\| 表达式2`	逻辑或(or)	如果左侧表达式1的计算结果为 `true`，则不计算右侧表达式2并返回左侧表达式1的返回值。如果左侧表达式1的计算结果为 `false`，则继续计算右侧表达式2并返回右侧表达式2的返回值。

8.位运算符

运算符	名称	示例	结果
`~a`	按位非 NOT	~5	-6
`a & b`	按位与 AND	5 & 1	1
`a \| b`	按位或 OR	5 \| 1	5
`a ^ b`	按位异或 XOR	5 ^ 1	4
`a << b`	左移位	5 << 1	10
`a >> b`	有符号右移位	5 >> 1	2
`a >>> b`	无符号右移位	5 >>> 1	2

9.三元条件运算符

运算符	描述
`(表达式1) ? (表达式2) : (表达式3)`	如果表达式1的计算结果为 `true`，则返回表达式2，否则返回表达式3。

10.分组运算符

实例	描述
`(1 + 2) * 3 // 3 * 3`	分组运算符 `()` 用于控制表达式中求值的优先级。它还充当某些语法结构中任意表达式的容器，否则会出现歧义或语法错误，比如立即调用的函数表达式、对象字面量解构赋值中给已声明的变量赋值时等。

11.逗号运算符

示例	描述
`let num1, num2, num3; let num1 = 1, num2 = 2, num3 = 3;` `const num1 = 1, num2 = 2, num3 = 3;`	用来在同一条语句中同时声明(初始化)多个变量或常量。
`let num = (5, 1, 4, 8, 0); // num 的值为 0`	对每个操作数从左往右求值，并返回最后一个操作数的值。

12.可选链`?.`运算符

运算符	描述
`o?.a`	如果 `o` 为 `null` 或 `undefined`，则不计算 `a` 并返回 `undefined`，否则 `o?.a` 的结果与 `o.a` 的结果相同。
`o?.[a]`	如果 `o` 为 `null` 或 `undefined`，则不计算 `a` 并返回 `undefined`，否则 `o?.[a]` 的结果与 `o[a]` 的结果相同。
`f?.(实参)`	如果 `f` 为 `null` 或 `undefined`，则不计算实参并返回 `undefined`，否则 `f?.(实参)` 的结果与 `f(实参)` 的结果相同。注意：`?.` 不会检测 `f` 是不是函数。

13.Null运算符

运算符	名称	描述
`a ?? b`	Null合并	如果 `a` 为 `null` 或 `undefined`，则返回 `b`，否则返回 `a`。
`a ??= b`	Null合并赋值	如果 `a` 为 `null` 或 `undefined`，则将 `b` 赋值给 `a`，否则返回 `a`。

14.展开(Spread)运算符(`...`)

展开(Spread)操作符又称为扩展操作符。

14.1展开数组字面量

14.1.1用于变量赋值

注意：展开运算符 ... 必须在 [] 内使用。

注意：对新数组的元素的更改不会反应到老数组的元素。

//新数组中的元素全部由老数组中的元素组成。
let arr1 = [1, 2, 3];
let arr2 = [...arr1];  
console.log(arr2);  // [1, 2, 3]

//新数组中的部分元素由老数组中的元素组成。
//新老数组无重复元素
let arr1 = [1, 2, 3];
let arr2 = [0, ...arr1, 4, 5];  
console.log(arr2);  // [0, 1, 2, 3, 4, 5]

//新老数组有重复元素，不会去重，仅此复制而已。
let arr1 = [1, 2, 3];
let arr2 = [1, ...arr1, 2, 3];  
console.log(arr2);  // [1, 1, 2, 3, 2, 3]

实际上，展开运算符可以展开任何可迭代(Iterable)对象。

let s = "12";
let arr = [...s];
console.log(arr);  // [1, 2]

let s = new Set([1, 2]);
let arr = [...s];
console.log(arr);  // [1, 2]

14.1.2用于函数实参

规则参考上面的“用于变量赋值”章节。

//方法调用
function f(a, b, c) {
  console.log(a, b, c);
}

let arr = [1, 2, 3];
f(...arr);  // 1 2 3

14.2展开对象字面量

14.2.1用于变量赋值

注意：展开运算符 ... 必须在 {} 内使用。

注意：对新对象的属性的更改不会反应到老对象的属性。

//新对象中的属性全部由老对象中的属性组成。
let o1 = { a: 1, b: 2 };
let o2 = {...o1};
console.log(o2);  // { a: 1, b: 2 }

//新对象中的部分属性由老对象中的属性组成。
//新老对象无同名属性
let o1 = { a: 1, b: 2 };
let o2 = {...o1, c: 3 };
console.log(o2);  // { a: 1, b: 2, c: 3 }

//新老对象有同名属性，后面的属性会覆盖前面的属性。
let o1 = { a: 1, b: 2 };
let o2 = {...o1, a: 3 };
console.log(o2);  // { a: 3, b: 2 }

let o1 = { a: 1, b: 2 };
let o2 = { a: 3, ...o1 };
console.log(o2);  // { a: 1, b: 2 }

14.2.2用于函数实参

JavaScript 语言不支持展开作为实参的对象字面量。

15.delete运算符

运算符	描述
`delete 对象名.属性名;` `delete 对象名[表达式];`	删除一个对象的属性。

16.in运算符

运算符	描述
`'属性名' in 对象名;` `"属性名" in 对象名;`	如果指定对象存在指定的属性，则返回 `true`。

17.instanceof运算符

运算符	描述
`对象名 instanceof 引用类型名`	如果指定对象是指定引用类型(或指定引用类型的派生类型)的实例，则返回 `true`。

18.typeof运算符

运算符	描述
`typeof 操作数;` `typeof (操作数);`	返回一个表示操作数类型的字符串值。

操作数类型	返回的字符串值
`BigInt`	`"bigint"`
`Number`	`"number"`
`Boolean`	`"boolean"`
`String`	`"string"`
`Symbol`	`"symbol"`
`Undefined`	`"undefined"`
`Null`	`"object"`
`Object`以及任何其它类型	`"object"`
`Function`(函数定义和类定义以及实现了内部`[[Call]]` 方法的对象)	`"function"`

19.void运算符

运算符	描述
`void 表达式;` `void (表达式);`	对指定表达式求值，然后返回 `undefined`。

原创文章，作者：huoxiaoqiang，如若转载，请注明出处：https://www.huoxiaoqiang.com/javascript/javascriptlang/1944.html