JavaScript 全部运算符完全指南（截至 ES2025） ​

什么是运算符？ ​

IMPORTANT

在 JavaScript 中，运算符是用于执行操作的特殊符号或关键字。它们可以对一个或多个操作数（值或变量）进行操作，并返回一个结果。JavaScript 支持多种类型的运算符，包括算术、赋值、比较、逻辑、位运算等。本文全面整理截至 ECMAScript 2025（ES16）的所有运算符，提供通俗易懂的解释和示例，帮助初学者快速掌握。

运算符分类 ​

JavaScript 的运算符可分为以下几类：

  1. 算术运算符：用于数学计算。
  2. 赋值运算符：用于将值赋给变量。
  3. 比较运算符：用于比较两个值。
  4. 逻辑运算符：用于执行逻辑操作。
  5. 位运算符：用于操作二进制数。
  6. 一元运算符：对单个操作数进行操作。
  7. 三元运算符：基于条件的简洁判断。
  8. 字符串运算符：用于字符串连接。
  9. 逗号运算符：在单个语句中执行多个操作。
  10. 关系运算符：检查对象之间的关系。
  11. 可选链运算符：安全访问对象属性。
  12. 空值合并运算符：为 null 或 undefined 提供默认值。
  13. 生成器运算符：用于生成器函数。
  14. 成员访问运算符：访问对象属性或方法。
  15. 展开运算符：展开数组、对象或函数参数。
  16. New 运算符：创建构造函数实例。
  17. 分组运算符：改变优先级或进行函数调用。

详细说明 ​

1. 算术运算符 ​

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

运算符描述示例
+加法5 + 3 => 8
-减法5 - 3 => 2
*乘法5 * 3 => 15
/除法5 / 3 => 1.666...
%取模（余数）5 % 3 => 2
**幂（ES2016）5 ** 3 => 125

示例：

arithmetic.js
javascript
let a = 5;
let b = 3;
console.log(a + b); // 8
console.log(a - b); // 2
console.log(a * b); // 15
console.log(a / b); // 1.666...
console.log(a % b); // 2
console.log(a ** b); // 125

2. 赋值运算符 ​

赋值运算符用于将值赋给变量，包括简单赋值和复合赋值。

运算符描述示例
=简单赋值x = 10
+=加法赋值x += 5 => x = x + 5
-=减法赋值x -= 5 => x = x - 5
*=乘法赋值x *= 5 => x = x * 5
/=除法赋值x /= 5 => x = x / 5
%=取模赋值x %= 5 => x = x % 5
**=幂赋值x **= 2 => x = x ** 2
<<=左移赋值x <<= 1 => x = x << 1
>>=右移（有符号）赋值x >>= 1 => x = x >> 1
>>>=右移（无符号）赋值x >>>= 1 => x = x >>> 1
&=按位与赋值x &= 3 => x = x & 3
^=按位异或赋值x ^= 3 => x = x ^ 3
|=按位或赋值x |= 3 => x = x | 3
&&=逻辑与赋值（ES2021）x &&= true => x = x && true
||=逻辑或赋值（ES2021）x ||= false => x = x || false
??=空值合并赋值（ES2021）x ??= 0 => x = x ?? 0

示例：

assignment.js
javascript
let x = 10;
x += 5; // x = 15
x *= 2; // x = 30
x **= 2; // x = 900
x &&= true; // x = 900 (因为 900 为真值)
x ||= false; // x = 900
x ??= 0; // x = 900 (因为 x 非 null 或 undefined)

3. 比较运算符 ​

比较运算符用于比较两个值，返回布尔值。

运算符描述示例
==相等（宽松比较）5 == '5' => true
===严格相等5 === '5' => false
!=不相等5 != '5' => false
!==严格不相等5 !== '5' => true
>大于5 > 3 => true
<小于5 < 3 => false
>=大于或等于5 >= 3 => true
<=小于或等于5 <= 3 => false

示例：

comparison.js
javascript
console.log(5 == '5'); // true
console.log(5 === '5'); // false
console.log(5 != '5'); // false
console.log(5 !== '5'); // true
console.log(5 > 3); // true
console.log(5 < 3); // false

4. 逻辑运算符 ​

逻辑运算符用于执行逻辑操作，通常返回布尔值。

运算符描述示例
&&逻辑与true && false => false
||逻辑或true || false => true
!逻辑非!true => false
??空值合并（ES2020）null ?? 'default' => 'default'

示例：

logical.js
javascript
let a = true;
let b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false
console.log(null ?? 'default'); // 'default'
console.log(0 ?? 'default'); // 0

5. 位运算符 ​

位运算符对二进制数进行操作。

运算符描述示例
&按位与5 & 3 => 1
|按位或5 | 3 => 7
^按位异或5 ^ 3 => 6
~按位取反~5 => -6
<<左移5 << 1 => 10
>>右移（有符号）5 >> 1 => 2
>>>右移（无符号）5 >>> 1 => 2

示例：

bitwise.js
javascript
let a = 5; // 0101
let b = 3; // 0011
console.log(a & b); // 0001 => 1
console.log(a | b); // 0111 => 7
console.log(a ^ b); // 0110 => 6
console.log(~a); // 1010 => -6（由于补码表示）
console.log(a << 1); // 1010 => 10
console.log(a >> 1); // 0010 => 2
console.log(a >>> 1); // 0010 => 2

6. 一元运算符 ​

一元运算符只对一个操作数进行操作。

运算符描述示例
+正号+5 => 5
-负号-5 => -5
++递增x++ => x = x + 1
--递减x-- => x = x - 1
typeof返回类型typeof 5 => 'number'
void返回 undefinedvoid 0 => undefined
delete删除对象属性delete obj.prop => true
await等待 Promiseawait promise => 解析值

示例：

unary.js
javascript
let x = 5;
console.log(+x); // 5
console.log(-x); // -5
x++; // x = 6
x--; // x = 5
console.log(typeof x); // 'number'
console.log(void 0); // undefined
let obj = { prop: 1 };
delete obj.prop;
console.log(obj.prop); // undefined
async function example() {
  let promise = Promise.resolve(42);
  console.log(await promise); // 42
}
example();

7. 三元运算符 ​

三元运算符是 JavaScript 中唯一的三元运算符，用于条件判断。

运算符描述示例
? :条件运算符condition ? value1 : value2

示例：

ternary.js
javascript
let age = 18;
let canVote = age >= 18 ? 'Yes' : 'No';
console.log(canVote); // 'Yes'

8. 字符串运算符 ​

字符串运算符用于连接字符串。

运算符描述示例
+字符串连接'Hello' + 'World' => 'HelloWorld'

示例：

string.js
javascript
let firstName = 'John';
let lastName = 'Doe';
console.log(firstName + ' ' + lastName); // 'John Doe'

9. 逗号运算符 ​

逗号运算符允许在单个语句中执行多个操作，返回最后一个表达式的值。

运算符描述示例
,逗号(expr1, expr2) => expr2

示例：

comma.js
javascript
let a = (1, 2, 3);
console.log(a); // 3

10. 关系运算符 ​

关系运算符用于检查对象之间的关系。

运算符描述示例
in检查属性是否存在'prop' in obj => true
instanceof检查对象类型obj instanceof Array => true

示例：

relational.js
javascript
let obj = { name: 'John' };
console.log('name' in obj); // true
let arr = [1, 2, 3];
console.log(arr instanceof Array); // true

11. 可选链运算符 ​

可选链运算符用于安全访问对象的深层属性，避免未定义错误。

运算符描述示例
?.可选链（ES2020）obj?.prop => undefined if prop is undefined

示例：

optional-chaining.js
javascript
let user = { name: 'John', address: { city: 'New York' } };
console.log(user?.address?.city); // 'New York'
console.log(user?.contacts?.phone); // undefined

12. 空值合并运算符 ​

空值合并运算符为 null 或 undefined 提供默认值。

运算符描述示例
??空值合并（ES2020）null ?? 'default' => 'default'

示例：

nullish-coalescing.js
javascript
let value = null;
console.log(value ?? 'default'); // 'default'
let zero = 0;
console.log(zero ?? 'default'); // 0

13. 生成器运算符 ​

生成器运算符用于生成器函数，控制迭代行为。

运算符描述示例
yield暂停生成器并返回值yield value
yield*委托给另一个生成器yield* anotherGenerator()

示例：

generator.js
javascript
function* generator() {
  yield 1;
  yield* [2, 3];
}
let gen = generator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

14. 成员访问运算符 ​

成员访问运算符用于访问对象的属性或方法。

运算符描述示例
.点运算符obj.property
[]方括号运算符obj['property']

示例：

member-access.js
javascript
let obj = { name: 'John', age: 30 };
console.log(obj.name); // 'John'
console.log(obj['age']); // 30

15. 展开运算符 ​

展开运算符 ... 用于展开数组、对象或字符串中的元素。

  • 在数组中：[...arr]
  • 在对象中：{...obj}
  • 在函数调用中：func(...args)

示例：

spread.js
javascript
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 }

function sum(x, y, z) {
  return x + y + z;
}
let numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

16. New 运算符 ​

New 运算符用于创建构造函数的实例。

运算符描述示例
new创建实例new Constructor()

示例：

new.js
javascript
function Person(name) {
  this.name = name;
}
let john = new Person('John');
console.log(john.name); // 'John'

17. 分组运算符 ​

分组运算符 () 用于改变运算符的优先级或进行函数调用。

运算符描述示例
()分组或函数调用(2 + 3) * 4 或 func()

示例：

grouping.js
javascript
let result = (2 + 3) * 4; // 20
function greet() {
  console.log('Hello');
}
greet(); // 'Hello'

18. 管道运算符（提议中的运算符，尚未纳入标准） ​

管道运算符（|>）是一个提议中的运算符，旨在简化函数链式调用，提高代码可读性。例如：

pipeline.js
javascript
// 提案示例（尚未标准化）
let result = value |> func1 |> func2;

截至 2025 年 5 月，管道运算符仍处于 TC39 的 Stage 2 阶段 Pipeline Operator Proposal，尚未纳入 ES2025 标准。未来可能成为正式运算符，值得关注。

运算符优先级 ​

运算符优先级决定了表达式中运算符的执行顺序。优先级高的运算符先执行。以下是 JavaScript 运算符的详细优先级表格（从高到低），细分了每个优先级级别，包括乘法和除法的单独优先级。

优先级运算符描述结合性
21()分组无
20., [], ?.成员访问、可选链左结合
19new (带参数列表)创建实例（带参数）无
18()函数调用左结合
17new (无参数列表)创建实例（无参数）无
16++ (后置), -- (后置)后置递增/递减无
15++ (前置), -- (前置)前置递增/递减右结合
15+ (一元), - (一元)一元加、一元减右结合
15~按位取反右结合
15!逻辑非右结合
15typeof返回类型右结合
15void返回 undefined右结合
15delete删除对象属性右结合
15await等待 Promise右结合
14**幂右结合
13*乘法左结合
13/除法左结合
13%取模左结合
12+加法左结合
12-减法左结合
11<<左移左结合
11>>右移（有符号）左结合
11>>>右移（无符号）左结合
10<, <=, >, >=关系左结合
9in, instanceof关系左结合
8==, !=, ===, !==相等左结合
7&按位与左结合
6^按位异或左结合
5|按位或左结合
4&&逻辑与左结合
3||逻辑或左结合
3??空值合并左结合
2? :三元条件右结合
1=, +=, -=, *=, /=, %=, **=, <<=, >>=, >>>=, &=, ^=, |=, &&=, ||=, ??=赋值右结合
0,逗号左结合

注意：括号 ( ) 可用于改变优先级。例如，(2 + 3) * 4 会先计算加法。详细优先级参考 MDN Operator Precedence。