Question

我不清楚这部分代码是如何工作的：100％

function putOnTable(){
    console.log("put on table: ");
    Object(_utils_aAnimationWrapper__WEBPACK_IMPORTED_MODULE_4__["default"])(
        element, '', 'position', schema.inCan, schema.outOfCan, schema.dur,
        '', true, 'forwards',
    );

我正在使用var a = [1, 2, 3]; [x, y, ...a ] = [0, ...a, 4]; // OUTPUT: [0, 1, 2, 3, 4]运算符来解构数组a。

我希望在第二行进行一堆作业。

...将被分配为0，x将被分配为y（它将数组...a中的元素作为单独的值传递）。

不过，我不清楚a是如何分配给4的。实际上，JS在执行以下操作时会引发异常：

...a

为什么这段代码为什么输出修改后的数组以...a = 4; // Uncaught SyntaxError: Rest parameter may not have a default initializer结尾，而不是抛出异常？究竟如何运作？

Answer 1

它被执行如下

var a = [1, 2, 3];
[x, y, ...a ] = [0, ...a, 4];
[x, y, ...a ] = [0, 1, 2, 3, 4];

这意味着RHS数组中的第一个值分配给x，RHS数组中的第二个值分配给y，其余值分配给a。

因此，x的值为0，y为1，而a为[2, 3, 4]

Answer 2

...a等于.slice(start, end)（左，解构）或.concat(a)（右，散布）：

 [0, ...a, 4]

等于：

[0].concat(a).concat([4]) // [0,1,2,3,4]

位置：

[x, y, ...a] = array

等于：

x = array[0];
y = array[1];
a = array.slice(2);

Answer 3

不过，我不清楚如何将...a分配给4。

不是。

让我们把东西分开：

在赋值的右侧，您正在使用带有 spread元素的数组文字。 a的值“展平”到新数组中。

因此，[0, ...a, 4]等效于[0].concat(a, [4])。结果是一个新的数组。

var a = [1, 2, 3];

console.log('spread element', [0, ...a, 4]);
console.log('concat', [0].concat(a, [4]));

在左侧，您正在使用具有 rest元素的数组解构。 [x, y, ...a ]的意思是

将可迭代对象的第一个值分配给x
将可迭代对象的第二个值分配给y
将可迭代的剩余值作为数组分配给a

这两个是等效的：

var a = [1,2,3,4];
var [x, y, ...z] = a;
console.log('destructuring', x, y, z);

var x = a[0];
var y = a[1];
var z = a.slice(2);
console.log('manual + slice', x, y, z);

当然，将两者结合起来是完全可以的。在作业中，左侧不关心右侧的计算方式，反之亦然。

您的示例令人困惑的是，您在结构化分配中再次使用了a，但这与用新值覆盖a的值相同。但是最终结果是

[0, ...a, 4]导致[0,1,2,3,4]
x的值为0
y的值为1
a的值为[2,3,4]

实际上，JS在执行以下操作时会引发异常：...a = 4;

您收到的错误消息很奇怪。确实应该只是语法错误。

...本身没有任何意义。它不是运算符，是一个标点符号（如;或,），根据使用（和允许）的上下文而具有不同的含义。

另请参阅What is SpreadElement in ECMAScript documentation? Is it the same as Spread operator at MDN?

Answer 4

在第一个示例中，LHS中的传播即...充当收集者，而在RHS中它充当传播/休息。在IE上，当您在LHS上为变量a分配值时。

var a = [1, 2, 3];

[x, y, ...a ] = [0, ...a, 4];

console.log(a)

让我们一步一步走：

让我们从RHS开始。进行[0, ...a, 4]将生成[0, 1, 2, 3, 4]。亲自看看：

var a = [1, 2, 3];

console.log([0, ...a, 4]);

现在，LHS是进行分配的一面。在RHS上，想象一下任何带有扩展运算符为array的变量，随时可以为其分配新值。

因此，我们尝试将[0, 1, 2, 3, 4]分配给变量x，然后分配给y，其余分配给数组a（按此顺序）。因此，数组a将具有前两次分配（即2, 3, 4）之后剩下的所有内容。

var a = [1, 2, 3]; // a will get overwritten [x, y, ...a ] = [0, 1, 2, 3, 4]; // same as [x, y, ...a ] = [0, ...a, 4]; console.log(a);

最后，您要问的最后一个问题是：“不过，我不清楚...如何将... a分配给4？”

答案：不是。但是，如果您执行类似[...a] = [4]的操作，则会导致名为a的数组包含[4]。

您可以阅读有关扩展语法here (MDN)和here (YDKJS)的更多信息。

数组解构和散布运算符

4 个答案: