javascript - 传播语法与切片方法

Question

我试图通过以下方法了解扩展语法与切片方法之间的区别。

假设我想制作一个数组的实际副本，我可能可以使用扩展语法轻松完成

var fruits = ["Banana", "Chips" , "Orange", "Lemon", "Apple", "Mango"]
var newCitrus = [...fruits]

如果我控制台记录这个

["Banana", "Chips", "Orange", "Lemon", "Apple", "Mango"] 

但我也可以使用 slice 方法创建数组的副本。考虑上面的相同数组，如果我做这样的事情......

var citrus = fruits.slice(0);

然后控制台记录它，它会给我完全相同的数组，我会通过传播语法得到它

["Banana", "Chips", "Orange", "Lemon", "Apple", "Mango"] 

因为他们两个编码/写代码的时间差不多，这里有什么区别？我通常应该选择哪种方法？

Answer 1

抛开性能 slice 只是 Array.prototype 上的一个函数，所以它只适用于数组。另一方面，Spread 语法适用于任何可迭代对象(满足 iterable protocol 的对象)，因此它可以开箱即用地适用于任何 String、Array、 TypedArray、Map 和 Set。您也可以轻松create custom iterables .

在sliceing 和spreading 空洞数组(稀疏数组)方面也有区别。正如您在下面看到的，slice 将保留稀疏性，而 spread 将使用 undefined 填充空洞。

Array(3)         // produces sparse array: [empty × 3]
Array(3).slice() // produces [empty × 3]
[...Array(3)]    // produces [undefined, undefined, undefined]

扩展语法也可用于制作对象的浅克隆:

const obj = { foo: 'bar', baz: 42 };
const clone = { ...obj };
obj.foo === clone.foo // true
obj.baz === clone.baz // true
obj === clone         // false (references are different)