ES6 - 运算符

ES6 - 运算符

表达式是评估后能产生一个值的代码单元。表达式通常由以下部分组成：

• 操作数（Operands）：运算符作用的数据或值。
• 运算符（Operator）：一个符号或关键字，定义了对操作数执行的操作。

例如，在表达式 5 + 10 中，5 和 10 是操作数，而 + 是运算符。JavaScript 支持各种类型的运算符。

1. 算术运算符

执行数学计算。假设 let a = 10; let b = 5;

运算符	描述	示例	结果
+	加法	a + b	15
-	减法	a - b	5
*	乘法	a * b	50
/	除法	a / b	2
%	取模（余数）	a % b	0 (10 除以 5 的余数为 0)
**	幂运算 (ES2016)	a ** 2 (a 的 2 次方)	100
++	自增（加 1）	let c = a++; (c 是 10, a 变为 11) 或 let d = ++a; (a 变为 11, d 是 11)	变化
—	自减（减 1）	let e = b--; (e 是 5, b 变为 4) 或 let f = --b; (b 变为 4, f 是 4)	变化

2. 关系（比较）运算符

比较两个值并返回布尔值（true 或 false）。假设 let x = 10; let y = 20; let z = '10';

运算符	描述	示例	结果
>	大于	y > x	True
<	小于	x < y	True
>=	大于或等于	x >= 10	True
<=	小于或等于	y <= 10	False
==	相等（宽松）	x == z（执行类型强制转换）	True (10 == ‘10’)
===	严格相等	x === z（不执行类型强制转换）	False (number 10 !== string ‘10’)
!=	不等（宽松）	x != y	True
!==	严格不等	x !== z	True

**最佳实践：**优先使用严格相等（===）和严格不等（!==），以避免由于类型强制转换（type coercion）引起的意外行为。

3. 逻辑运算符

组合或修改布尔表达式。假设 let p = true; let q = false;

运算符	描述	示例	结果
&&	逻辑与	p && q	False (当且仅当两个操作数都为 true 时结果为 true)
||	逻辑或	p || q	True (当至少一个操作数为 true 时结果为 true)
!	逻辑非	!p	False (反转布尔值)

逻辑运算符常常使用短路求值（short-circuiting）。例如，在 expr1 && expr2 中，如果 expr1 为假，则 expr2 不会被评估。

4. 位运算符

对数字的二进制表示执行操作。这些运算符在典型的 Web 开发中较少使用，但在某些底层编程场景中很重要。

运算符	名称	描述
&	按位与	在两个操作数都具有 1 的每个位位置返回 1。
|	按位或	在至少一个操作数具有 1 的每个位位置返回 1。
^	按位异或	在操作数具有不同位的每个位位置返回 1。
~	按位非	反转其操作数的所有位。
<<	左移	将位向左移动，从右侧用零填充。
>>	有符号右移	将位向右移动，保留符号位。
>>>	无符号右移（零填充右移）	将位向右移动，从左侧用零填充。

Example: `5 & 1` (二进制 `0101 & 0001`) results in `1` (二进制 `0001`).

5. 赋值运算符

将值赋给变量。通常与其他运算符结合使用作为简写形式。

运算符	示例	等同于
=	x = y	x = y（简单赋值）
+=	x += y	x = x + y（加后赋值）
-=	x -= y	x = x - y（减后赋值）
*=	x *= y	x = x * y（乘后赋值）
/=	x /= y	x = x / y（除后赋值）
%=	x %= y	x = x % y（取模后赋值）
**=	x **= y	x = x ** y（幂运算后赋值）

简写赋值也适用于位运算符（例如，&=，|=）。

6. 其他运算符

条件（三元）运算符（? :）

是 if-else 语句的简写形式。语法：条件 ? 表达式为 true 时执行 : 表达式为 false 时执行

let age = 20;
let status = (age >= 18) ? 'Adult' : 'Minor';
console.log(status); // 输出: Adult

字符串连接运算符（+）

当用于字符串时，+ 会将它们连接起来。如果一个操作数是字符串，另一个操作数将被转换为字符串。

let greeting = 'Hello, ' + 'World!';
console.log(greeting); // 输出: Hello, World!
let message = 'Count: ' + 5;
console.log(message); // 输出: Count: 5

现代的模板字面量（template literals，使用反引号 `）通常更受青睐用于字符串构建：let message = Count: ${5};

typeof 运算符

返回一个字符串，指示未评估操作数的类型。

类型	typeof 返回的字符串
数字	"number"
字符串	"string"
布尔值	"boolean"
对象（包括 null, 数组, 对象字面量）	"object"（注意：typeof null 是一个历史遗留 bug，返回 "object"）
函数	"function"
未定义变量或值	"undefined"
Symbol (ES6)	"symbol"
BigInt (ES2020)	"bigint"

console.log(typeof 42); // "number"
console.log(typeof 'hello'); // "string"
console.log(typeof undefined); // "undefined"

instanceof 运算符

检查一个对象是否是特定构造函数或类的实例。对象 instanceof 构造函数/类

let arr = [1, 2, 3];
console.log(arr instanceof Array);  // true
console.log(arr instanceof Object); // true (数组是对象)

class Person {}
let p = new Person();
console.log(p instanceof Person); // true

逗号运算符（,）

从左到右评估多个表达式，并返回最后一个表达式的值。很少使用，有时在 for 循环中使用。

let x = (1, 2, 3);
console.log(x); // 输出: 3

扩展运算符（Spread ...）和剩余参数（Rest ...）(ES6)

扩展运算符（Spread Operator）：将可迭代对象（如数组或字符串）展开为单独的元素，或将对象展开为键值对。常用于复制数组/对象、合并它们，或将数组元素作为函数参数传递。

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

剩余参数（Rest Parameter）：将多个函数参数收集到一个数组中。必须是函数定义中的最后一个参数。

function sum(...numbers) {
  return numbers.reduce((acc, current) => acc + current, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出: 10

空值合并运算符（Nullish Coalescing Operator ??）(ES2020)

当左侧操作数是 null 或 undefined 时，返回其右侧操作数，否则返回其左侧操作数。它是一种为可能是空值的变量提供默认值的方式。

const foo = null ?? 'default string'; // foo 是 'default string'
const bar = 0 ?? 42; // bar 是 0 (0 不是 null 或 undefined)

可选链运算符（Optional Chaining ?.）(ES2020)

允许读取位于连接对象链深处的属性值，而无需显式验证链中的每个引用是否有效。如果链中的某个引用是 null 或 undefined，表达式会短路并评估为 undefined，而不是抛出错误。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName); // undefined (adventurer.dog 是 undefined，不报错)

const catName = adventurer.cat?.name;
console.log(catName); // Dinah