JavaScript操作符的优先级和结合性

操作符优先级的基本概念

在 JavaScript 中，操作符优先级决定了表达式中不同操作符执行的先后顺序。这就好比我们在做数学运算时，会遵循先乘除后加减的规则。例如，对于表达式 3 + 5 * 2，根据数学运算规则，乘法操作符 * 的优先级高于加法操作符 +，所以先计算 5 * 2 得到 10，然后再计算 3 + 10 得到最终结果 13。

在 JavaScript 里，同样存在这样一套优先级规则。当一个表达式中包含多个操作符时，具有较高优先级的操作符会先被求值。比如在表达式 a && b || c 中，逻辑与操作符 && 的优先级高于逻辑或操作符 ||，所以会先计算 a && b，只有当 a && b 的结果为 false 时，才会去计算 c。

常见操作符的优先级分组

成员访问操作符：包括点号（.）和方括号（[]）。它们用于访问对象的属性或数组的元素，优先级非常高。例如：

let obj = {prop: 10};
let arr = [1, 2, 3];
console.log(obj.prop); // 使用点号访问对象属性
console.log(arr[1]);  // 使用方括号访问数组元素

在表达式 obj.prop 中，点号操作符会首先执行，获取 obj 对象的 prop 属性值。

函数调用操作符：即圆括号 ()。当一个函数名后跟圆括号时，就表示函数调用。例如：

function add(a, b) {
    return a + b;
}
let result = add(3, 5);
console.log(result);

这里圆括号操作符使得 add 函数被调用，其优先级也较高。

后置递增和递减操作符：++ 和 -- 放在变量名之后。例如：

let num = 5;
let newNum = num++;
console.log(newNum); // 输出 5，先返回 num 的值，再自增
console.log(num);    // 输出 6，num 已经自增

后置递增（或递减）操作符会在表达式求值后才对变量进行递增（或递减）操作。

前置递增和递减操作符：++ 和 -- 放在变量名之前。例如：

let num1 = 5;
let newNum1 = ++num1;
console.log(newNum1); // 输出 6，先自增，再返回 num1 的值
console.log(num1);    // 输出 6，num1 已经自增

前置递增（或递减）操作符会先对变量进行递增（或递减）操作，然后再返回变量的值。前置递增和递减操作符的优先级高于后置操作符。

一元操作符：包括 +（正号）、-（负号）、~（按位非）、!（逻辑非）等。例如：

let num2 = 5;
let negNum = -num2;
let bool = true;
let negBool =!bool;
console.log(negNum); // 输出 -5
console.log(negBool); // 输出 false

一元操作符只作用于一个操作数，并且优先级较高。

乘法、除法和取模操作符：*（乘法）、/（除法）、%（取模）。例如：

let result1 = 5 * 3;
let result2 = 10 / 2;
let result3 = 7 % 3;
console.log(result1); // 输出 15
console.log(result2); // 输出 5
console.log(result3); // 输出 1

这些操作符优先级相同，按照从左到右的顺序进行计算。

加法和减法操作符：+（加法）、-（减法）。例如：

let sum = 3 + 5;
let diff = 7 - 4;
console.log(sum); // 输出 8
console.log(diff); // 输出 3

加法和减法操作符优先级相同，并且低于乘法、除法和取模操作符，计算顺序也是从左到右。

位操作符：包括 <<（左移）、>>（有符号右移）、>>>（无符号右移）、&（按位与）、^（按位异或）、|（按位或）。例如：

let num3 = 5; // 二进制为 00000101
let shifted = num3 << 2; // 左移 2 位，结果为 20，二进制为 00010100
console.log(shifted);

位操作符主要用于对二进制位进行操作，它们之间也有不同的优先级顺序。按位与 & 的优先级高于按位异或 ^，按位异或 ^ 的优先级高于按位或 |。

关系操作符：<（小于）、>（大于）、<=（小于等于）、>=（大于等于）。例如：

let a = 5;
let b = 3;
console.log(a > b); // 输出 true
console.log(a <= b); // 输出 false

关系操作符用于比较两个值的大小关系，其优先级低于算术操作符。

相等操作符：==（相等）、!=（不相等）、===（严格相等）、!==（严格不相等）。例如：

let num4 = 5;
let str = '5';
console.log(num4 == str); // 输出 true，会进行类型转换
console.log(num4 === str); // 输出 false，不进行类型转换，类型不同

相等操作符用于判断两个值是否相等，其优先级低于关系操作符。

逻辑与操作符：&&。例如：

let bool1 = true;
let bool2 = false;
console.log(bool1 && bool2); // 输出 false

逻辑与操作符只有当两个操作数都为 true 时才返回 true，否则返回 false。其优先级高于逻辑或操作符。

逻辑或操作符：||。例如：

let bool3 = true;
let bool4 = false;
console.log(bool3 || bool4); // 输出 true

逻辑或操作符只要有一个操作数为 true 就返回 true，只有当两个操作数都为 false 时才返回 false。

条件操作符：? :。例如：

let age = 18;
let message = age >= 18? '成年' : '未成年';
console.log(message); // 输出 '成年'

条件操作符是 JavaScript 中唯一的三元操作符，它根据条件的真假来返回不同的值。

赋值操作符：=、+=、-=、*=、/=、%= 等。例如：

let num5 = 5;
num5 += 3;
console.log(num5); // 输出 8，相当于 num5 = num5 + 3

赋值操作符用于给变量赋值，其优先级较低。

逗号操作符：,。例如：

let result4 = (1 + 2, 3 + 4);
console.log(result4); // 输出 7，逗号操作符会从左到右计算表达式，返回最后一个表达式的值

逗号操作符的优先级最低，它通常用于在一条语句中执行多个表达式。

操作符结合性

操作符的结合性决定了相同优先级操作符的计算顺序。在 JavaScript 中，大部分操作符具有左结合性，即从左到右进行计算。例如，对于表达式 3 + 5 - 2，由于加法和减法操作符优先级相同且具有左结合性，所以先计算 3 + 5 得到 8，然后再计算 8 - 2 得到 6。

然而，也有一些操作符具有右结合性。比如赋值操作符就是右结合的。例如：

let a1, b1, c1;
a1 = b1 = c1 = 10;

这里会先将 10 赋给 c1，然后将 c1 的值（也就是 10）赋给 b1，最后将 b1 的值（同样是 10）赋给 a1。

再比如，一元操作符也是右结合的。例如：

let num6 = - + 5;

这里先对 5 进行正号操作（正号操作不改变值），然后再进行负号操作，最终结果为 -5。

优先级和结合性的复杂表达式示例

复杂算术和逻辑表达式：

let x = 3;
let y = 5;
let z = 2;
let result5 = (x + y) * z && x > y || y < z;
console.log(result5);

在这个表达式中，首先计算括号内的 x + y 得到 8，然后计算 8 * z 得到 16。接着，16 && x > y，由于 x > y 为 false，而 16 转换为布尔值为 true，所以 16 && x > y 结果为 false。最后计算 false || y < z，因为 y < z 为 false，所以整个表达式结果为 false。

混合赋值和其他操作符的表达式：

let a2 = 5;
let b2 = 3;
let c2 = a2 += b2 * 2;
console.log(c2);

这里先计算 b2 * 2 得到 6，然后执行 a2 += 6，即 a2 = a2 + 6，a2 的值变为 11。最后将 a2 的值赋给 c2，所以 c2 的值也为 11。

位操作符与其他操作符混合的表达式：

let num7 = 5;
let num8 = 3;
let result6 = num7 & num8 + num7 << 2;
console.log(result6);

首先计算 num8 + num7 得到 8，然后 num7 << 2 得到 20（5 的二进制 00000101 左移 2 位变为 00010100 即 20）。接着计算 8 与 20 的按位与操作，8 的二进制为 00001000，20 的二进制为 00010100，按位与结果为 00000000 即 0。所以最终结果为 0。

优先级和结合性对代码理解和优化的影响

代码理解方面：清晰地掌握操作符的优先级和结合性对于正确理解代码的执行逻辑至关重要。在阅读复杂的表达式时，如果不了解这些规则，就可能误解代码的意图。例如，对于表达式 a && b || c && d，如果不熟悉逻辑操作符的优先级，可能会错误地先计算 a || c。正确的理解是先计算 a && b 和 c && d，然后再进行逻辑或操作。
代码优化方面：合理利用操作符的优先级和结合性可以使代码更简洁高效。例如，在一些情况下，可以避免不必要的括号。但同时，也要注意不要为了追求简洁而过度省略括号，导致代码可读性下降。比如，在表达式 (a + b) * c 中，如果 + 和 * 的优先级非常明确，并且代码阅读者也熟悉这些规则，那么可以省略括号写成 a + b * c。但在一些复杂的表达式中，为了确保代码的清晰性，适当添加括号是必要的。

此外，在编写代码时，了解操作符的结合性也有助于避免一些潜在的错误。例如，在连续赋值操作中，如果不了解赋值操作符的右结合性，可能会错误地认为是从左到右依次赋值，从而导致逻辑错误。

总之，深入理解 JavaScript 操作符的优先级和结合性是编写高质量、可维护 JavaScript 代码的重要基础。无论是新手还是有经验的开发者，都应该不断复习和实践这些规则，以提高代码的准确性和效率。