运算符概述

运算符分类

JavaScript运算符按照功能可以分为以下几类。

按功能分类

类别 运算符 东巴文说明
算术运算符 +, -, *, /, %, **, ++, -- 数学计算
比较运算符 ==, ===, !=, !==, >, <, >=, <= 值的比较
逻辑运算符 &&, ||, ! 布尔运算
赋值运算符 =, +=, -=, *=, /=, %=, **= 变量赋值
条件运算符 ?: 三元运算
位运算符 &, |, ^, ~, <<, >>, >>> 二进制操作
字符串运算符 +, += 字符串拼接
其他运算符 , delete, in, instanceof, new, typeof, void 特殊用途

按操作数数量分类

// 一元运算符 - 一个操作数
let x = -5;        // 负号
let y = !true;     // 逻辑非
let z = ++x;       // 自增

// 二元运算符 - 两个操作数
let sum = 1 + 2;   // 加法
let isEqual = a === b;  // 比较

// 三元运算符 - 三个操作数
let result = a > b ? "大" : "小";

按优先级分类

// 高优先级先执行
let result = 2 + 3 * 4;  // 14,不是20
// 等价于
let result = 2 + (3 * 4);  // 14

// 使用括号改变优先级
let result2 = (2 + 3) * 4;  // 20

运算符优先级

优先级决定了运算的执行顺序,优先级高的先执行。

优先级表(从高到低)

优先级 运算符 描述 东巴文记忆
1 () 分组 括号最高
2 . [] () 成员访问、函数调用 访问优先
3 new 创建实例 -
4 ++ -- 后置递增/递减 后置较高
5 ! ~ + - ++ -- typeof void delete 一元运算符 一元次之
6 ** 幂运算 幂运算
7 * / % 乘、除、取余 乘除优先
8 + - 加、减 加减在后
9 << >> >>> 位移动 位运算
10 < <= > >= in instanceof 比较 比较运算
11 == != === !== 相等 相等比较
12 & 按位与 -
13 ^ 按位异或 -
14 | 按位或 -
15 && 逻辑与 -
16 || 逻辑或 -
17 ?: 条件运算符 -
18 = += -= ... 赋值 赋值较低
19 , 逗号 逗号最低

优先级示例

// 示例1:算术运算
console.log(2 + 3 * 4);        // 14
console.log((2 + 3) * 4);      // 20

// 示例2:比较和逻辑
console.log(true || false && false);  // true
// 等价于 true || (false && false)
console.log((true || false) && false); // false

// 示例3:条件和赋值
let a = 1, b = 2;
let max = a > b ? a : b;       // 2
console.log(max);

// 示例4:混合运算
let x = 2;
let y = x++ + x * 2;           // 2 + 3 * 2 = 8
console.log(y);                // 8

记忆技巧

东巴文口诀

括号成员最高级,
一元运算紧跟随,
幂运算在乘除前,
加减之后是比较,
逻辑与比逻辑或,
条件赋值逗号低。

运算符结合性

结合性决定了相同优先级的运算符的执行顺序。

左结合(从左到右)

// 大多数运算符是左结合
let a = 10 - 5 - 2;  // 等价于 (10 - 5) - 2 = 3
console.log(a);      // 3

let b = 100 / 10 / 2; // 等价于 (100 / 10) / 2 = 5
console.log(b);      // 5

let c = 1 < 2 < 3;   // 等价于 (1 < 2) < 3 → true < 3 → 1 < 3 → true
console.log(c);      // true

右结合(从右到左)

// 赋值运算符是右结合
let a, b, c;
a = b = c = 5;       // 等价于 a = (b = (c = 5))
console.log(a, b, c); // 5 5 5

// 幂运算符是右结合
let d = 2 ** 3 ** 2; // 等价于 2 ** (3 ** 2) = 2 ** 9 = 512
console.log(d);      // 512

// 条件运算符是右结合
let e = true ? 1 : false ? 2 : 3;
// 等价于 true ? 1 : (false ? 2 : 3)
console.log(e);      // 1

// 一元运算符是右结合
let f = !!true;      // 等价于 !(!true)
console.log(f);      // true

结合性表

结合性 运算符 东巴文说明
左结合 +, -, *, /, %, &&, ||, <, >, == 等 从左到右计算
右结合 =, +=, -=, **, ?:, !, ~, new 等 从右到左计算

复杂表达式解析

// 示例:分析复杂表达式
let result = 2 + 3 * 4 > 10 && true || false;

// 解析步骤:
// 1. 3 * 4 = 12(乘法优先级最高)
// 2. 2 + 12 = 14(加法次之)
// 3. 14 > 10 = true(比较运算)
// 4. true && true = true(逻辑与)
// 5. true || false = true(逻辑或)

console.log(result);  // true

// 使用括号使意图更清晰
let result2 = ((2 + (3 * 4)) > 10) && true || false;
console.log(result2);  // true

东巴文建议:当表达式复杂时,使用括号明确运算顺序,提高代码可读性。

常见陷阱

优先级陷阱

// 陷阱1:比较运算符优先级高于赋值
let a, b;
a = b = 5 > 3;  // 等价于 a = (b = (5 > 3))
console.log(a, b);  // true true

// 陷阱2:逻辑与优先级高于逻辑或
let result = true || false && false;
console.log(result);  // true(不是false)

// 陷阱3:typeof优先级很高
console.log(typeof 1 + 2);    // "number2"
console.log(typeof (1 + 2));  // "number"

结合性陷阱

// 陷阱1:幂运算右结合
console.log(2 ** 3 ** 2);  // 512,不是64

// 陷阱2:连续比较
console.log(1 < 2 < 3);    // true
console.log(3 > 2 > 1);    // false!(3 > 2 = true, true > 1 = false)

// 正确写法
console.log(1 < 2 && 2 < 3);  // true
console.log(3 > 2 && 2 > 1);  // true

最佳实践

// 1. 使用括号明确意图
let result = (a + b) * c;  // 清晰
let result2 = a + b * c;   // 需要记住优先级

// 2. 拆分复杂表达式
let isValid = age >= 18 && age <= 65;
let hasPermission = role === "admin" || role === "editor";
let canAccess = isValid && hasPermission;

// 3. 避免连续比较
// 错误
if (min <= value <= max) {}
// 正确
if (value >= min && value <= max) {}

// 4. 使用有意义的变量名
let isAdult = age >= 18;
let canVote = isAdult && hasID;

下一步

了解了运算符概述后,让我们深入学习各类运算符:

  1. 算术运算符 - 学习算术运算
  2. 比较运算符 - 学习比较运算
  3. 逻辑运算符 - 学习逻辑运算

东巴文(db-w.cn) - 让编程学习更简单

东巴文寄语:理解运算符的优先级和结合性,是写出正确表达式的基础。记住:有疑问就用括号,让代码意图更清晰。在 db-w.cn,我们帮你掌握每一个细节!