JavaScript 常见运算符详解

JavaScript 常见运算符详解

JavaScript 提供了丰富的运算符用于执行各种操作，包括算术运算、比较、逻辑运算等。以下是 JavaScript 中常见的运算符分类和详细说明：

---

一、算术运算符

运算符	描述	示例	结果
+	加法	5 + 2	7
-	减法	5 - 2	3
*	乘法	5 * 2	10
/	除法	5 / 2	2.5
%	取模(余数)	5 % 2	1
**	指数(ES6)	2 ** 3	8
++	自增	let a=5; a++	a=6
--	自减	let a=5; a--	a=4

注意：自增/自减运算符有前缀和后缀两种形式：

let a = 5;
let b = a++; // b=5, a=6 (后缀：先赋值再自增)
let c = ++a; // c=7, a=7 (前缀：先自增再赋值)

---

二、赋值运算符

运算符	示例	等价于
=	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

---

三、比较运算符

运算符	描述	示例	结果
==	等于(值相等)	'5' == 5	true
===	严格等于(值和类型都相等)	'5' === 5	false
!=	不等于	'5' != 5	false
!==	严格不等于	'5' !== 5	true
>	大于	5 > 3	true
<	小于	5 < 3	false
>=	大于等于	5 >= 5	true
<=	小于等于	5 <= 3	false

最佳实践：总是使用 === 和 !== 避免隐式类型转换带来的意外结果。

---

四、逻辑运算符

运算符	描述	示例	结果
&&	逻辑与	true && false	false
`		`	逻辑或
!	逻辑非	!true	false

短路求值：

// && 如果第一个操作数为假，直接返回它，否则返回第二个操作数
0 && console.log('hi')  // 输出 0 (不会执行log)

// || 如果第一个操作数为真，直接返回它，否则返回第二个操作数
null || 'default'  // 返回 'default'

---

五、位运算符

运算符	描述	示例	结果 (二进制)
&	按位与	5 & 1	0101 & 0001 = 0001 (1)
`	`	按位或	`5
^	按位异或	5 ^ 1	0101 ^ 0001 = 0100 (4)
~	按位非	~5	~0101 = 1010 (-6)
<<	左移	5 << 1	0101 << 1 = 1010 (10)
>>	右移	5 >> 1	0101 >> 1 = 0010 (2)
>>>	无符号右移	-5 >>> 1	很大的正数

---

六、三元运算符

条件 ? 表达式1 : 表达式2

示例：

let age = 20;
let status = age >= 18 ? '成人' : '未成年'; // '成人'

---

七、特殊运算符

1. 类型运算符

typeof 'hello'  // 'string'
instanceof Array  // 检查是否为数组

2. 空值合并运算符 ?? (ES2020)

let value = null ?? 'default'; // 'default'

与 || 的区别：?? 只在左侧为 null 或 undefined 时返回右侧值，而 || 会对所有假值（0, ''等）生效。

3. 可选链运算符 ?. (ES2020)

const user = { profile: { name: 'John' } };
console.log(user?.profile?.name); // 'John'
console.log(user?.address?.city); // undefined (不会报错)

4. 展开运算符 ... (ES6)

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // { a:1, b:2 }

5. 逗号运算符

let a = (1, 2, 3); // a=3 (返回最后一个表达式的值)

---

八、运算符优先级

从高到低的部分优先级：

1. () 分组
2. ++ -- ! ~ typeof 等一元运算符
3. ** 指数
4. * / %
5. + -
6. << >> >>>
7. < <= > >= instanceof
8. == != === !==
9. & ^ |
10. && ||
11. ?? (空值合并)
12. ?: (三元)
13. = += 等赋值
14. , 逗号

最佳实践：使用括号明确优先级，避免依赖隐式优先级规则。

---

九、注意事项

1. + 运算符在遇到字符串时会进行拼接：

   3 + 4 + "5"  // "75" (先3+4=7，然后7+"5")
   "3" + 4 + 5  // "345" (从左到右全部转为字符串)
   

2. 浮点数运算精度问题：

   0.1 + 0.2 === 0.3  // false (实际约为0.30000000000000004)
   

3. 使用 Object.is() 进行严格比较：

   Object.is(NaN, NaN)  // true
   Object.is(0, -0)     // false