数组解构中的 SPREAD 运算符

Question

在下面的示例中，未映射的数组项必须映射到左侧的 rest 参数，但由于某种原因，output 不同，

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", "Earth", ...planets, "Saturn"];

console.log(first); //Output: Mercury
console.log(second); //Output: Earth

现在对于下面，预计 output 是，

console.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

但实际的 output 是，

console.log(rest); //Output: "Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn", "Saturn"

资料来源： https://www.freecodecamp.org/news/array-destructuring-in-es6-30e398f21d10/

这里发生了什么事？

Answer 1

当您将行星传播到您的第二个阵列中时，您会将planets阵列中的所有元素放入第二个阵列中，因此：

["Mercury", "Earth", ...planets, "Saturn"];

...评估为：

["Mercury", "Earth", "Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn", "Saturn"];

然后你从这个数组中解构第一个和第二个元素，给你"Mercury"和"Earth" 。 然后使用 rest 模式...rest检索剩余元素（即从索引 2 开始的元素）并将它们存储在名为rest的数组中。 因此，您的rest数组包含上述数组中的所有元素，不包括第一个和第二个元素：

["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn", "Saturn"]

要获得预期的 output，您可以通过忽略前两个元素来破坏第一个数组：

 const [,,...rest] = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"]; console.log(rest);

Answer 2

您可以使用Set()

Set object 可让您存储唯一值

 var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"]; var [first, second, ...rest] = new Set(["Mercury", "Earth", ...planets, "Saturn"]); console.log(first); console.log(second); console.log(rest);

Answer 3

您可以有选择地传播。 当您传播...planets时，它会将所有值从 planets 数组复制到您正在创建的数组中。

您可以在传播之前简单地使用切片。

 var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"]; var [first, second, ...rest] = ["Mercury", "Earth", ...planets.slice(2, planets.length - 1), "Saturn"]; console.log(first); console.log(second); console.log(rest)