为什么ES6 JavaScript中解构赋值与常规赋值行为不同？

这事儿的核心在于赋值的时机和变量更新的顺序，解构赋值和普通分步赋值的执行逻辑完全不一样：

先看正确的解构赋值写法 #

[pre, cur] = [cur, pre + cur];

解构赋值的规则是：先一次性计算出右侧所有表达式的值，再把这些值分别赋给左侧的变量。

拿初始状态pre=0, cur=1来走一遍第一次next()的流程：

1. 先计算右侧数组的两个值：cur是1，pre+cur是0+1=1，所以右侧得到[1, 1]
2. 再把数组的第一个值赋给pre，第二个值赋给cur → pre=1, cur=1
3. 返回cur=1，这就是第一个输出的数

第二次next()：

1. 右侧数组计算：cur=1，pre+cur=1+1=2 → 得到[1,2]
2. 赋值后pre=1, cur=2，返回2
3. 以此类推，就得到了正常的斐波那契序列1,2,3,5,8...

再看出问题的分步赋值写法 #

pre = cur;
cur = pre + cur;

这种写法是逐行执行，每一行赋值都会立即改变变量的值，下一行会直接用更新后的变量。

还是初始状态pre=0, cur=1：

1. 第一行pre = cur → pre直接变成1
2. 第二行cur = pre + cur → 这里的pre已经是更新后的1，cur还是原来的1，所以计算得1+1=2，cur变成2
3. 返回2，这是第一个输出

第二次next()：

1. pre = cur → pre变成2
2. cur = pre + cur → 现在pre=2，cur=2，计算得2+2=4，cur变成4
3. 返回4，接下来就是8,16...的等比序列了

总结 #

解构赋值相当于先把要用到的“旧值”都存起来，再统一更新变量；而分步赋值是改一个变量就用一个新值，后面的计算会被前面的更新影响。这就是为什么看起来类似的写法，结果却完全不同。

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