ES6 解构：数组重排序机制答案

【问题标题】：ES6 destructuring: Array reordering mechanismES6 解构：数组重排序机制
【发布时间】：2017-07-09 21:52:27
【问题描述】：

我正在阅读Kyle Simpson's book (You don't Know JS - ES6 and beyond)，他给出了这个关于重新排序数组的示例：

 var a1 = [ 1, 2, 3 ],
    a2 = [];

[ a2[2], a2[0], a2[1] ] = a1;

console.log( a2 );                  // [2,3,1]

有人可以帮助我了解发生了什么（我期待它返回 [3, 1, 2]）。如果我输入其他元素，它会变得更加混乱：

[ a2[2], a2[0], a2[0] ] = a1; // [3, undefined, 1]
[ a2[1], a2[0], a2[0] ] = a1; // [3, 1]

【问题讨论】：

【解决方案1】：

您可以使用Babel's REPL 找出代码编译后的内容。（我已经用额外的 cmets 对输出进行了注释。）

var a1 = [1, 2, 3],
    a2 = [];

a2[2] = a1[0];  // a1[0] = 1
a2[0] = a1[1];  // a1[1] = 2
a2[1] = a1[2];  // a1[2] = 3
console.log(a2); // [2,3,1]

【讨论】：

【解决方案2】：

解构模式中的位置映射到源数组中的索引。所以相当于：

a2[2] = a1[0];
a2[0] = a1[1];
a2[1] = a1[2];

你期望的结果来自：

a2 = [ a1[2], a1[0], a1[1] ];

这与解构相反。

这个：

[ a2[2], a2[0], a2[0] ] = a1;

从不分配给a2[1]，所以你会得到未定义的元素。你给a2[0]赋值了两次，第一次是2，然后是3，所以最终的值是3。

【讨论】：

【解决方案3】：

其实很简单。

在 ES6 中销毁数组基本上是这样的：

如果你有

var arr = [1, 2, 3, 4];

这意味着当你写类似的东西时

[a, b, c, d] = arr;

你说的是真的

a = arr[0];
b = arr[1];
c = arr[2];
d = arr[3];

注意a、b、c或d的位置对应数组arr的索引，这样如果你写

[a, c, b, d] = arr;

你真正的意思是

a = arr[0];
c = arr[1];
b = arr[2];
d = arr[3];

【讨论】：

【解决方案4】：

它只是将解构和向arr2 添加值的两个步骤合二为一。就像你这样做一样。

 var a1 = [1, 2, 3],
   a2 = [];

var [one, two, three] = a1;
a2[0] = two;
a2[1] = three;
a2[2] = one
console.log(a2)

【讨论】：