探索 JavaScript 和 TypeScript 中的运算符
运算符是编程语言中最基本的工具，用于执行各种操作。JavaScript 和 TypeScript 提供了多种运算符，从基本的数学计算到复杂的逻辑判断，应有尽有。虽然很多人在工作中经常见到，却不会使用或者知道他们的正确用法，那么本文将总结这些运算符，并通过代码示例展示它们的实际应用。
1. 算术运算符
算术运算符用于执行基本的数学运算，如加法、减法、乘法和除法。
let a = 10;
let b = 3;
console.log(a + b); // 加法: 13
console.log(a - b); // 减法: 7
console.log(a * b); // 乘法: 30
console.log(a / b); // 除法: 3.333...
console.log(a % b); // 取余: 1
a++; // 自增: 11
b--; // 自减: 2
2. 赋值运算符
赋值运算符用于将值赋给变量，并且可以结合其他运算符简化代码。
let x = 5;
x += 3; // 等同于 x = x + 3; 结果: 8
x *= 2; // 等同于 x = x * 2; 结果: 16
3. 比较运算符
比较运算符用于比较两个值，结果为布尔值（true 或 false）。
console.log(10 > 5); // 大于: true
console.log(10 < 5); // 小于: false
console.log(10 == "10"); // 相等: true（不考虑类型）
console.log(10 === "10"); // 全等: false（考虑类型）
console.log(10 != 5); // 不相等: true
console.log(10 !== "10"); // 不全等: true
4. 逻辑运算符
逻辑运算符用于处理布尔逻辑，常用于条件判断。
console.log(true && false); // 逻辑与: false
console.log(true || false); // 逻辑或: true
console.log(!true); // 逻辑非: false
5. 位运算符
位运算符在二进制位级别操作数，适用于底层编程和性能优化场景。
console.log(5 & 1); // 按位与: 1
console.log(5 | 1); // 按位或: 5
console.log(5 ^ 1); // 按位异或: 4
console.log(~5); // 按位非: -6
console.log(5 << 1); // 左移: 10
console.log(5 >> 1); // 右移: 2
6. 三元运算符
三元运算符是简化条件判断的一个常用工具。
let age = 20;
let canVote = age >= 18 ? "Yes" : "No";
console.log(canVote); // Yes
7. 类型运算符
类型运算符用于检查变量的类型或构造函数。
console.log(typeof "hello"); // string
console.log(10 instanceof Number); // false
console.log("length" in [1, 2, 3]); // true
8. 解构赋值运算符
解构赋值用于从数组或对象中提取值并赋给变量，简化了变量的声明与初始化过程。
let [m, n] = [1, 2];
console.log(m); // 1
console.log(n); // 2
let { p, q } = { p: 10, q: 20 };
console.log(p); // 10
console.log(q); // 20
9. 展开运算符 (...)
展开运算符用于展开数组或对象，常用于复制或合并操作。
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }
10. 新增的短路运算符和赋值运算符
现代 JavaScript 和 TypeScript 引入了一些新的运算符，简化了条件判断和赋值操作：
- 可选链运算符 (
?.)：用于安全地访问嵌套属性，避免null或undefined错误。 - 空值合并运算符 (
??)：返回左侧操作数，除非它是null或undefined。 - 逻辑与赋值运算符 (
&&=)：仅当左侧为true时赋值。 - 逻辑或赋值运算符 (
||=)：仅当左侧为false时赋值。 - 空值合并赋值运算符 (
??=)：仅当左侧为null或undefined时赋值。
let user = null;
let name = user?.name ?? "Anonymous"; // 使用可选链和空值合并
let x = 5;
x &&= 10; // x 是 5（true），所以 x 被赋值为 10
let y = 0;
y ||= 20; // y 是 0（false），所以 y 被赋值为 20
结论
这篇文章总结了 JavaScript 和 TypeScript 中常见的运算符及其用法（即使有些用法在实际工作中并不常用），并通过实例展示了每个运算符的实际应用场景。希望对你理解和使用这些运算符有所帮助。
