JS 运算符优先级|极客笔记

JS 运算符优先级

在编写 JavaScript 代码时，了解运算符的优先级是非常重要的，因为不同运算符的优先级决定了它们在表达式中的执行顺序。当表达式中存在多个运算符时，JavaScript 会按照运算符的优先级来决定哪部分先执行，哪部分后执行。

在本文中，我们将详细介绍 JavaScript 中各种运算符的优先级，希望对大家更好地理解 JavaScript 代码有所帮助。

分组运算符 ()

分组运算符 () 用来改变表达式的计算顺序，括号内的表达式会被优先执行。以下是一个简单的示例：

let result = 2 + 3 * 4;
console.log(result); // 输出 14

result = (2 + 3) * 4;
console.log(result); // 输出 20

从上面的示例可以看出，括号内的表达式先执行，然后再乘以 4。

成员访问运算符 .

成员访问运算符 . 用来访问对象的属性或方法。它的优先级是非常高的，如果出现在表达式中，将会被优先执行。以下是一个示例：

let person = {
  name: 'Alice',
  age: 30
};

console.log(person.name.length); // 输出 5

在上面的示例中，person.name 会先执行，然后再调用 length 属性。

索引运算符 []

索引运算符 [] 用来访问数组或对象的属性。它的优先级也是比较高的。以下是一个示例：

let fruits = ['apple', 'banana', 'orange'];

console.log(fruits[1]); // 输出 banana

在上面的示例中，fruits[1] 会先执行，然后返回对应的元素。

函数调用运算符 ()

函数调用运算符 () 用来调用函数。它的优先级也是比较高的。以下是一个示例：

function add(a, b) {
  return a + b;
}

let result = add(2, 3) * 4;
console.log(result); // 输出 20

在上面的示例中，函数调用 add(2, 3) 会先执行，然后再乘以 4。

逻辑非 !

逻辑非运算符 ! 用来取反一个表达式的值。它的优先级比较高，会先执行。以下是一个示例：

let isTrue = false;

console.log(!isTrue); // 输出 true

在上面的示例中，!isTrue 会先执行，然后返回取反的结果。

乘法 `*`，除法 /，求余 %

乘法 *、除法 /、求余 % 等算术运算符的优先级一样，都比加法和减法高。它们在表达式中从左到右依次执行。以下是一个示例：

let result = 10 + 5 * 2;
console.log(result); // 输出 20

result = 10 / 2 % 3;
console.log(result); // 输出 1

在上面的示例中，乘法 5 * 2 会先执行，然后再加上 10。同理，除法 10 / 2 会先执行，然后再求余。

加法 +，减法 –

加法 +、减法 - 的优先级比乘法、除法、求余低，它们在表达式中从左到右依次执行。以下是一个示例：

let result = 10 * 2 + 5;
console.log(result); // 输出 25

result = 10 - 2 + 3;
console.log(result); // 输出 11

在上面的示例中，乘法 10 * 2 会先执行，然后再加上 5。同理，减法 10 - 2 会先执行，然后再加上 3。

比较运算符 `==`，!=，`===`，`!==`，>，<，>=，<=

比较运算符的优先级比算术运算符低，在表达式中从左到右依次执行。以下是一个示例：

let result = 10 * 2 > 5;
console.log(result); // 输出 true

result = 'Hello' + ' ' + 'World' === 'Hello World';
console.log(result); // 输出 true

在上面的示例中，乘法 10 * 2 会先执行，然后再与 5 比较大小。同理，字符串拼接 'Hello' + ' ' + 'World' 会先执行，然后再与 'Hello World' 比较。

逻辑与 &&，逻辑或 ||

逻辑与 && 和逻辑或 || 的优先级比比较运算符低，在表达式中从左到右依次执行。以下是一个示例：

let result = 10 > 5 || 3 < 1;
console.log(result); // 输出 true

result = true && false;
console.log(result); // 输出 false

在上面的示例中，比较运算符 10 > 5 会先执行，然后再进行逻辑或操作。

赋值运算符 =，+=，-=，*=，/=，%=

赋值运算符的优先级是比较低的，一般是从右往左执行。以下是一个示例：

let a, b, c;

a = b = c = 10;
console.log(a, b, c); // 输出 10 10 10

a += 5 * 2;
console.log(a); // 输出 20

在上面的示例中，赋值链 a = b = c = 10 会从右往左执行，先将 c 赋值给 b，然后再将 b 赋值给 a。

三元条件运算符 ?

三元条件运算符 ? 的优先级比赋值运算符低，在表达式中从左到右依次执行。以下是一个示例：

let result = (10 > 5) ? 'Yes' : 'No';
console.log(result); // 输出 Yes

let isTrue = false;
result = isTrue ? 'True' : 'False';
console.log(result); // 输出 False

在上面的示例中，比较运算符 (10 > 5) 会先执行，然后根据结果返回对应的值。

结论

通过本文的详绣介绍，相信大家对 JavaScript 中各种运算符的优先级有了更深入的了解。在编写代码时，要注意运算符的优先级，避免出现逻辑错误。

JS 运算符优先级