JavaScript自增自减运算符机制及两段代码输出10、3差异问题

首先直接回应核心疑问：++（递增）、--（递减）是自带修改变量副作用的运算符，执行时会直接更改变量的存储值，这个修改行为是运算符本身的逻辑，不依赖表达式结果的赋值操作。

两类递增/递减的运算逻辑区别：

• 前置形式（++a/--a）：先对变量做加1/减1操作、修改变量值，再返回修改后的新值参与后续表达式运算
• 后置形式（a++/a--）：先返回变量当前的原值参与后续表达式运算，再对变量做加1/减1操作、修改变量值

问题1：为什么赋值场景下最终myVar输出10 #

对应代码：

var myVar = 2;
myVar = ++myVar + myVar++ + myVar--;
console.log(myVar);

加法运算遵循左结合规则，从左到右逐段计算，过程如下：

1. 计算第一个运算段++myVar：初始myVar值为2，前置递增先将myVar修改为3，返回新值3，此时累计和为3，myVar当前值为3
2. 计算第二个运算段myVar++：myVar当前值为3，后置递增先返回原值3参与加法，累计和更新为3+3=6，再将myVar修改为4
3. 计算第三个运算段myVar--：myVar当前值为4，后置递减先返回原值4参与加法，累计和更新为6+4=10，再将myVar修改为3
4. 最后将加法运算得到的最终结果10赋值给左侧的myVar，覆盖了之前副作用修改的3，因此控制台最终输出10。

问题2：为什么无赋值场景下最终myVar输出3 #

对应代码：

var myVar = 2;
++myVar + myVar++ + myVar--;
console.log(myVar);

逐段计算的副作用逻辑和上一个场景完全一致：

1. ++myVar将myVar从2修改为3，返回3
2. myVar++先返回3参与运算，再将myVar从3修改为4
3. myVar--先返回4参与运算，再将myVar从4修改为3

整个加法表达式最终计算结果为10，但因为没有赋值操作将这个结果写入myVar，myVar保留最后一次副作用修改后的值3，因此控制台最终输出3。

内容的提问来源于stack exchange，提问作者apoorva