ES6 解构：数组重排序机制

Question

我正在通读 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]

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

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

Answer 1

您可以使用 Babel's REPL 找出代码编译后的结果。（我已经用附加注释对输出进行了注释。）

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]

Answer 2

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

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

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

Answer 3

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

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.

Answer 4

其实很简单

在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];

ES6 destructuring: Array reordering mechanism