传播语法与切片方法

Question

我试图了解以下方法中传播语法与切片方法之间的区别。

假设我想制作一个数组的实际副本，我可能可以使用扩展语法轻松地做到这一点

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

如果我 console.log 这个

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

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

 var citrus = fruits.slice(0);

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

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

由于它们都花费大约相同的时间来编码/编写，这里有什么区别？我通常应该选择哪种方法？

原文由 iRohitBhatia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

除了性能 slice 只是 --- Array.prototype --- 上的一个函数，所以它只适用于数组。另一方面，Spread 语法将适用于任何可迭代对象（满足 可迭代协议 的对象），因此它可以在任何 String , Array , TypedArray 上开箱即用 --- , Map 和 Set 。您还可以轻松 创建自定义 iterables 。

slice ing 和 spread ing 带孔数组（稀疏数组）也有区别。正如您在下面看到的， 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)

原文由 Bartosz Gościński 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 Chrome 中进行的测量 表明，slice 的性能远高于传播运算符，每秒 6700 万次操作，而每秒 400 万次操作。如果您正在为 Chrome 或 Electron 应用程序（使用 Chromium）构建，我会选择切片，尤其是对于大数据和实时应用程序。

编辑：

看起来 Spread 运算符现在快得多，尽管仍然比 Slice 慢：

原文由 Jonathan Bursztyn 发布，翻译遵循 CC BY-SA 4.0 许可协议