扩展语法与切片方法

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"] 

由于两者都需要花费大约相同的时间进行编码/写，所以这里有什么区别？我通常应该选择哪种方法？

Answer 1

slice之外的性能只是Array.prototype上的一个函数，因此它仅适用于数组。另一方面，传播语法将适用于任何可迭代的对象（满足iterable protocol的对象），因此它将在任何String，Array，TypedArray，{ {1}}和Map。您也可以轻松create custom iterables。

传播语法也可以用于创建对象的浅表克隆：

Set

Answer 2

性能将取决于其运行所在的引擎。与大多数Javscript代码一样，它可能会在各种不同的引擎中运行。因此，请使用在美学上感觉更好的东西。对我来说，这很普遍。

...是纯粹的美丽。

如果您决定使用slice，请跳过0，只说.slice()。

Answer 3

Measuring in Chrome显示，分片的性能远比扩展运算符好，每秒67M次操作，而每秒4M次操作。如果您是为Chrome或Electron应用程序（使用Chromium）而构建的，那么我会特别关注大数据和实时应用程序。

Answer 4

Chrome（72+）的新版本似乎消除了性能差距。 https://measurethat.net/Benchmarks/ListResults/2667

Answer 5

这两种方法实际上并不等效。 Slice是Array.prototype上的一个函数，并且知道数组的实现。它将创建一个非常有效的深层副本。不过更重要的是，.slice()将保留数组的稀疏信息。

相反，[...Array]将从现有数组的可迭代视图中简单地创建一个新数组。不一定有效。

尝试一下：

var a = [];
a.length = 3;
console.log("slice:", a.slice());
console.log("spread:" [...a]);

在Chrome浏览器下，我得到：

slice: (3) [empty × 3]
spread: (3) [undefined, undefined, undefined]

如果数组特别大且稀疏，array.slice()将非常快。 [...array]可能会挂起您的浏览器。