跳到主要内容

JavaScript 运算符优先级详解

在编写 JavaScript 代码时,我们经常会遇到包含多个运算符的复杂表达式。这时,运算符的执行顺序就变得至关重要。JavaScript 中的运算符优先级规则决定了表达式的计算顺序。本文将深入探讨 JavaScript 运算符的优先级,帮助大家更好地理解和掌握运算符的使用。

运算符优先级表​

下面是 JavaScript 中常见运算符的优先级表,按照优先级从高到低的顺序排列:

const operatorPrecedence = {
  '()': '函数调用',
  '[]': '数组下标',
  '.': '对象属性访问',
  '++': '后置递增',
  '--': '后置递减',

  '+': '一元加号',
  '-': '一元减号',
  '~': '按位非',
  '!': '逻辑非',

  '*': '乘法',
  '/': '除法',
  '%': '取模',

  '+': '加法',
  '-': '减法',

  '<<': '左移',
  '>>': '右移',
  '>>>': '无符号右移',

  '<': '小于',
  '<=': '小于等于',
  '>': '大于',
  '>=': '大于等于',
  in: '属性是否存在',
  instanceof: '对象类型比较',

  '==': '相等',
  '!=': '不等',
  '===': '全等',
  '!==': '不全等',

  '&': '按位与',
  '^': '按位异或',
  '|': '按位或',

  '&&': '逻辑与',
  '||': '逻辑或',

  '?:': '条件运算符',

  '=': '赋值',
  '+=': '加法赋值',
  '-=': '减法赋值',
  '*=': '乘法赋值',
  '/=': '除法赋值',
  '%=': '取模赋值',
  '<<=': '左移赋值',
  '>>=': '右移赋值',
  '>>>=': '无符号右移赋值',
  '&=': '按位与赋值',
  '^=': '按位异或赋值',
  '|=': '按位或赋值',

  ',': '逗号运算符',
};

运算符优先级规则​

1. 括号优先​

使用括号()可以显式地指定运算的优先级。括号内的表达式会优先进行计算。

let result = (5 + 2) * 3; // 21

2. 优先级高的运算符先执行​

当表达式中出现多个运算符时,优先级高的运算符会先执行。例如,乘除法的优先级高于加减法。

let result = 5 + 2 * 3; // 11

3. 同优先级运算符从左到右计算​

对于优先级相同的运算符,通常从左到右依次计算。但是赋值运算符是个例外,它们的计算顺序是从右到左。

let result = 10 - 5 + 2; // 7
let x = (y = z = 1); // 从右到左赋值

常见运算符优先级分析​

算术运算符​

算术运算符包括加法+、减法-、乘法*、除法/和取模%。它们的优先级从高到低依次为:

  1. 乘除取模(*, /, %)
  2. 加减(+, -)
let result = 10 + 5 * 2 - 3; // 17

比较运算符​

比较运算符用于比较两个值的大小或相等性。常见的比较运算符有<, >, <=, >=, ==, ===, !=, !==。它们的优先级低于算术运算符。

let isGreater = 5 + 2 > 6; // true

逻辑运算符​

逻辑运算符包括逻辑与&&、逻辑或||和逻辑非!。它们的优先级低于比较运算符,高于赋值运算符。

let result = true || (false && !true); // true

条件运算符​

条件运算符?:是一个三元运算符,用于根据条件选择不同的值。它的优先级低于逻辑运算符,高于赋值运算符。

let max = a > b ? a : b;

赋值运算符​

赋值运算符用于给变量赋值。最基本的赋值运算符是=,此外还有一些复合赋值运算符,如+=, -=, *=, /=等。赋值运算符的优先级较低,通常在其他运算符计算完后才执行。

let x = 5;
x += 3; // 等同于 x = x + 3

运算符优先级的最佳实践​

1. 使用括号明确优先级​

在编写复杂表达式时,适当地使用括号可以明确运算的优先级,提高代码的可读性。即使括号不改变运算结果,添加括号也能让代码的意图更加清晰。

let result = (a + b) * (c - d);

2. 拆分复杂表达式​

当表达式变得过于复杂时,可以考虑将其拆分为多个简单的表达式,并使用变量存储中间结果。这样可以提高代码的可读性和可维护性。

let sum = a + b;
let diff = c - d;
let result = sum * diff;

3. 注意赋值运算符的优先级​

赋值运算符的优先级较低,在复合语句中可能会导致意料之外的结果。为了避免混淆,建议将赋值操作单独放在一行。

let x = y + z;
x *= 2;
编辑此页
最后由 sumingcheng 于 更新