本文深入探讨了JavaScript中赋值运算符（如`+=`）与自增运算符（如`++`）在复杂表达式中的交互与执行顺序。文章详细解析了ECMAScript规范中关于左侧表达式优先评估、右侧表达式求值以及最终赋值的机制，并通过具体代码示例，逐步拆解了包含多重副作用的表达式，揭示了变量值在不同阶段的变化，帮助开发者清晰理解运算符优先级、求值顺序及其对最终结果的影响。
在JavaScript中，理解运算符的优先级和结合性是编写可预测代码的关键。当涉及到带有副作用的运算符，如赋值运算符（=、+=等）和自增/自减运算符（++、--），其执行顺序可能会变得复杂，尤其是在一个表达式中多次修改同一个变量时。本文将通过一个具体示例，深入剖析这些运算符在JavaScript中的实际工作机制。
运算符优先级与表达式解析
首先，我们必须明确JavaScript中运算符的优先级。自增/自减运算符（++、--）通常具有比赋值运算符（=、+=等）更高的优先级。这意味着在一个混合表达式中，++或--会先于赋值操作符被解析。
考虑以下表达式：
立即学习“Java免费学习笔记（深入）”；
let i = 1; let j = (i+=2) * (i+=3 + ++i); console.log(j); // 打印 30
初看之下，这个结果可能令人困惑。为了理解为什么会打印30，我们需要结合运算符优先级和ECMAScript规范中关于赋值运算符的求值规则。
一个常见的误解是，i += 3 + ++i 会被解析为 (i += 3) + (++i)。然而，由于+运算符的优先级高于+=，且++的优先级高于+，实际的解析顺序是： i += (3 + (++i))
这表明，整个3 + (++i)部分会作为一个整体，作为+=运算符的右侧操作数进行求值。
ECMAScript规范与赋值运算符的求值流程
根据ECMAScript规范，对于一个赋值表达式，例如 LeftHandSideExpression op= RightHandSideExpression (其中op是+、-等)，其求值过程遵循以下关键步骤：
- 评估左侧表达式 (LeftHandSideExpression)： 首先，JavaScript会评估赋值运算符左侧的表达式（即变量i本身），获取其引用或当前值。这个值在整个赋值操作完成之前会被“保存”起来。
- 评估右侧表达式 (RightHandSideExpression)： 接下来，评估赋值运算符右侧的整个表达式。在这个阶段，如果右侧表达式中包含对同一变量的修改（例如++i），这些修改会立即生效，并影响右侧表达式的最终求值结果。
- 执行二元操作并赋值： 最后，将第一步中保存的左侧表达式的值，与第二步中求得的右侧表达式的值，进行op操作（例如加法），并将最终结果赋回给左侧的变量。
为了更好地理解，我们可以将 i += expression 概念化为以下步骤：
// 假设原始表达式是 i += expression; let lval = i; // 步骤1: 存储i的当前值 let rval = expression; // 步骤2: 评估expression，期间i可能被修改 i = lval + rval; // 步骤3: 使用lval（原始i值）与rval进行计算并赋值
逐步解析复杂示例
现在，我们应用上述规则来逐步解析原始示例：
let i = 1; let j = (i+=2) * (i+=3 + ++i);
初始化：i 的初始值为 1。
第一部分：i+=2 的求值
- 评估左侧 i： 此时 i 的值为 1。这个值被“保存”下来，用于后续的加法。
- 评估右侧 2： 值为 2。
- 执行操作并赋值： i = (保存的 i 值) + 2，即 i = 1 + 2 = 3。
- i+=2 的结果： 赋值表达式的结果是赋给i的新值，即 3。
此时，表达式变为 j = 3 * (i+=3 + ++i)，并且 i 的当前值为 3。
第二部分：i+=3 + ++i 的求值
这个表达式可以看作 i += (3 + ++i)。
- 评估左侧 i： 此时 i 的值为 3。这个值被“保存”下来，用于后续的加法。
-
评估右侧 (3 + ++i)：
- 首先评估 ++i (优先级最高)。
- ++i 会立即将 i 的值从 3 变为 4。
- ++i 的结果是 4。
- 然后评估 3 + 4。
- 结果是 7。
- 所以，右侧表达式 (3 + ++i) 的最终求值结果是 7。
- 首先评估 ++i (优先级最高)。
- 执行操作并赋值： i = (保存的 i 值) + (右侧表达式结果)，即 i = 3 + 7 = 10。
- i+=3 + ++i 的结果： 赋值表达式的结果是赋给i的新值，即 10。
此时，表达式变为 j = 3 * 10。
最终计算：j = 3 * 10 = 30。
所以，console.log(j) 最终打印 30。
总结与注意事项
- 优先级与结合性： 理解运算符的优先级是正确解析复杂表达式的第一步。++和--通常具有最高的优先级。
- 赋值运算符的求值机制： 对于var op= expr形式的赋值，JavaScript会先获取var的初始值，然后完整评估expr（期间var可能被修改），最后用var的初始值与expr的结果进行op操作，并将最终结果赋给var。
- 副作用的即时性： 自增/自减运算符（++、--）的副作用（即修改变量的值）在它们被求值时会立即发生，并影响同一表达式中后续部分的求值。
- 代码可读性： 尽管理解这些机制对于深入JavaScript至关重要，但在实际开发中，应尽量避免在单个复杂表达式中多次修改同一个变量。这种做法会大大降低代码的可读性和可维护性，容易引入难以发现的bug。如果需要多次修改，建议将表达式拆分为多个独立的语句，以确保清晰的执行顺序。
- 参考规范： 当遇到不确定的行为时，查阅ECMAScript语言规范是解决疑问的最权威方式。
通过对这些规则的深入理解，开发者可以更准确地预测JavaScript代码的行为，尤其是在处理涉及副作用的复杂表达式时。
