數組解構中的 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)