JavaScript 运算符大全（含示例）

📘 JavaScript 运算符大全（含示例）

整理不易，收藏、点赞加关注！

JavaScript 运算符是开发中最常用也最容易混淆的一部分。本文将按功能分类，详尽列出所有 JS 运算符及其使用场景 + 示例代码，便于你在开发中快速查阅。

---

✅ 目录

1. 算术运算符（Arithmetic）
2. 赋值运算符（Assignment）
3. 比较运算符（Comparison）
4. 逻辑运算符（Logical）
5. 位运算符（Bitwise）
6. 字符串运算符
7. 条件（三元）运算符
8. 解构赋值运算符
9. 扩展运算符（展开运算符 …）
10. 空值合并运算符（??） vs 逻辑或（||）
11. 类型运算符（typeof, instanceof）
12. 其他常见符号（delete, in, void, new, yield 等）

---

1️⃣ 算术运算符

运算符	描述	示例	结果
+	加法	2 + 3	5
-	减法	5 - 2	3
*	乘法	4 * 2	8
/	除法	10 / 2	5
%	取模	10 % 3	1
++	自增	let a = 1; a++	2（先返回1再+1）
--	自减	let b = 2; --b	1
**	幂运算	2 ** 3	8

---

2️⃣ 赋值运算符

运算符	描述	示例	结果
=	赋值	let a = 10	a = 10
+=	加后赋值	a += 5	a = a + 5
-=	减后赋值	a -= 3	a = a - 3
*=	乘后赋值	a *= 2	a = a * 2
/=	除后赋值	a /= 2	a = a / 2
%=	取模后赋值	a %= 4	a = a % 4

---

3️⃣ 比较运算符

运算符	描述	示例	结果
==	相等（类型转换）	'5' == 5	true
===	全等（类型也比较）	'5' === 5	false
!=	不等（类型转换）	'5' != 5	false
!==	严格不等	'5' !== 5	true
>	大于	5 > 3	true
<	小于	3 < 5	true
>=	大于等于	5 >= 5	true
<=	小于等于	4 <= 3	false

---

4️⃣ 逻辑运算符

运算符	描述	示例	结果
&&	与（AND）	true && false	false
`		`	或（OR）	`false		true`	true
!	非（NOT）	!true	false

---

5️⃣ 位运算符（用于二进制处理）

运算符	描述	示例	结果
&	与	5 & 1	1
`	`	或	`5	1`	5
^	异或	5 ^ 1	4
~	非（取反）	~5	-6
<<	左移	5 << 1	10
>>	有符号右移	5 >> 1	2
>>>	无符号右移	-5 >>> 1	2147483645

---

6️⃣ 字符串运算符

• 字符串连接：+

let str = 'Hello' + ' ' + 'World';
console.log(str); // 'Hello World'

---

7️⃣ 条件（三元）运算符

let age = 18;
let result = age >= 18 ? '成年人' : '未成年';
console.log(result); // 成年人

---

8️⃣ 解构赋值运算符

数组解构

const [a, b] = [1, 2];
console.log(a); // 1

对象解构

const { name, age } = { name: 'Tom', age: 20 };
console.log(name); // Tom

---

9️⃣ 扩展运算符（Spread ...）

数组展开

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

对象展开

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

---

🔟 ?? vs ||：空值合并 vs 逻辑或

运算符	用途	示例	结果
`		`	有“值”就用（Falsy）	`‘’		‘默认’`	'默认'
??	只判断 null/undefined	'' ?? '默认'	''

✅ ?? 更适合保留 0、false、‘’ 这些有效值

---

🔟 类型判断运算符

运算符	描述	示例
typeof	获取变量类型	typeof 'abc' // string
instanceof	判断某对象是否为某构造函数的实例	[] instanceof Array // true

---

🔟 其他常用运算符/关键字

关键字	描述	示例
delete	删除对象属性	delete obj.name
in	检查属性是否存在于对象中	'name' in obj
new	创建对象的实例	new Date()
void	返回 undefined（多用于立即执行函数）	void 0
yield	暂停并返回值（Generator）	yield 1
await	等待异步操作完成	await fetch(url)

---

📝 总结

• || 常用于“兜底值”，但可能屏蔽有效值（如 0）
• ?? 更精准地判断是否为 null / undefined
• === 永远比 == 更安全
• 解构与展开运算符能极大提高可读性和性能
• 三元运算符适用于简单的条件判断

---

📚 推荐组合使用场景

场景	推荐运算符组合
表单默认值	value ?? defaultValue
判断并赋值	`x = x		100`
对象深拷贝	{ ...obj }
条件判断	isOk ? '是' : '否'
判断类型是否是数组	Array.isArray(arr) 或 arr instanceof Array

---

如果你觉得这份 JS 运算符指南对你有帮助，
请收藏 + 点赞 + 关注！让学习更高效！