知识篇 -- JS运算符详解

Ray Shine 2024/1/30 JavaScript基础知识

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

在JavaScript中，运算符是用于对值（操作数）执行某种操作的特殊符号。它们是构建任何程序逻辑的基础，允许我们进行计算、比较、逻辑判断、赋值等操作。理解不同类型运算符的用法和优先级，对于编写正确且高效的JavaScript代码至关重要。

# 一、算术运算符 (Arithmetic Operators) 计算

用于执行基本的数学计算。

+ (加法)：

let sum = 5 + 3; // 8
let strSum = "Hello" + " World"; // "Hello World" (字符串连接)
let mixedSum = "5" + 3; // "53" (字符串被转换为字符串)

- (减法)：

let diff = 10 - 4; // 6
let mixedDiff = "10" - 4; // 6 (字符串被转换为数字)

* (乘法)：

let prod = 6 * 7; // 42
let mixedProd = "6" * 7; // 42

/ (除法)：

let div = 10 / 2; // 5
let zeroDiv = 10 / 0; // Infinity
let nanDiv = 0 / 0; // NaN

% (取模/余数)：
```
let rem = 10 % 3; // 1
```
** (幂运算，ES2016新增)：
```
let power = 2 ** 3; // 8 (2的3次方)
```

++ (自增)：将操作数加1。

前缀自增 (++x)：先加1，再使用新值。
后缀自增 (x++)：先使用旧值，再加1。

let i = 0;
console.log(++i); // 1
console.log(i);   // 1

let j = 0;
console.log(j++); // 0
console.log(j);   // 1

-- (自减)：将操作数减1。
- 前缀自减 (--x)：先减1，再使用新值。
- 后缀自减 (x--)：先使用旧值，再减1。

# 二、比较运算符 (Comparison Operators) 比较

用于比较两个值，并返回一个布尔值 (true 或 false)。

== (相等)：比较两个值是否相等，会进行类型转换。类型转换

console.log(5 == "5");   // true
console.log(0 == false); // true
console.log(null == undefined); // true

!= (不相等)：
```
console.log(5 != "5");   // false
```

=== (全等)：比较两个值是否相等，不进行类型转换。推荐使用。严格比较

console.log(5 === "5");   // false
console.log(0 === false); // false
console.log(null === undefined); // false

!== (不全等)：
```
console.log(5 !== "5");   // true
```
> (大于)：
< (小于)：
>= (大于或等于)：
<= (小于或等于)：

# 三、逻辑运算符 (Logical Operators) 逻辑判断

用于组合布尔表达式，并返回一个布尔值。

&& (逻辑与)：如果两个操作数都为 true，则返回 true。
- 短路求值：如果第一个操作数为 false，则不会评估第二个操作数。
```
console.log(true && false); // false
console.log(5 > 3 && 10 < 20); // true
```
|| (逻辑或)：如果任一操作数为 true，则返回 true。
- 短路求值：如果第一个操作数为 true，则不会评估第二个操作数。
```
console.log(true || false); // true
console.log(5 < 3 || 10 < 20); // true
```

! (逻辑非)：反转操作数的布尔值。

console.log(!true); // false
console.log(!(5 > 3)); // false

?? (空值合并运算符，ES2020新增)：当左侧操作数为 null 或 undefined 时，返回右侧操作数，否则返回左侧操作数。 ES2020

let name = null;
let defaultName = "Guest";
console.log(name ?? defaultName); // "Guest"

let age = 0;
let defaultAge = 18;
console.log(age ?? defaultAge); // 0 (0不是null或undefined)

# 四、赋值运算符 (Assignment Operators) 赋值

用于给变量赋值。

= (赋值)：
```
let a = 10;
```
+= (加法赋值)：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。
**= (幂赋值，ES2016新增)：x **= y 等同于 x = x ** y。

# 五、位运算符 (Bitwise Operators) 底层操作

对数字的二进制表示进行操作。在日常Web开发中不常用，但在某些特定场景（如性能优化、图形处理）可能会用到。

& (按位与)
| (按位或)
^ (按位异或)
~ (按位非)
<< (左移)
>> (有符号右移)
>>> (无符号右移)

# 六、三元运算符 (Conditional/Ternary Operator) 条件表达式

根据条件返回两个值中的一个。是 if...else 语句的简写形式。

语法：condition ? valueIfTrue : valueIfFalse

示例：

let age = 20;
let status = (age >= 18) ? "成年" : "未成年"; // "成年"

# 七、其他运算符特殊

typeof (类型运算符)：返回操作数的字符串表示的数据类型。

console.log(typeof 10);        // "number"
console.log(typeof "hello");   // "string"
console.log(typeof true);      // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (这是一个历史遗留的bug)
console.log(typeof {});        // "object"
console.log(typeof []);        // "object"
console.log(typeof function(){}); // "function"

instanceof (实例运算符)：检查对象是否是特定类的实例。

let arr = [1, 2, 3];
console.log(arr instanceof Array); // true

in (属性运算符)：检查对象是否包含某个属性。

let person = { name: "Alice" };
console.log("name" in person); // true
console.log("age" in person);  // false

delete (删除运算符)：删除对象的属性。

let obj = { a: 1, b: 2 };
delete obj.a;
console.log(obj); // { b: 2 }

理解JavaScript的各种运算符及其优先级是编写高效、准确代码的关键。在实际开发中，合理选择和组合运算符，能够帮助你实现复杂的逻辑和功能。

← 字符串原型与原型链 →

一ξひβθ光 i