扩展语法与切片方法

Question

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

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

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

如果我console.log这个

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

但我也可以使用切片方法创建一个数组的副本.考虑到上面的相同数组,如果我做这样的事情......

var citrus = fruits.slice(0);

然后控制台记录它,它将给我完全相同的数组,我将通过传播语法

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

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

Answer 1

抛开性能slice只是一个函数,Array.prototype所以它只适用于数组.在另一方面扩展语法将任何迭代(对象满足工作可迭代协议),以便将工作开箱上的任何String,Array,TypedArray,Map和Set.您还可以轻松创建自定义迭代.

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

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

Answer 2

性能将取决于其运行的发动机。与大多数 Javscript 代码一样，它可能会在各种不同的引擎中运行。因此，使用任何感觉更美观的东西。对我来说，这已经传播了。

...是纯粹的美丽。

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

Answer 3

在Chrome中进行的测量表明，分片的性能要比散布运算符高得多，每秒有67M次操作，而每秒有4M次操作。如果您是为Chrome或Electron应用程序（使用Chromium）而构建的，那么我会特别关注大数据和实时应用程序。

编辑：

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

Answer 4

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

\n

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

\n

尝试这个：

\n

var a = [];\na.length = 3;\nconsole.log("slice:", a.slice());\nconsole.log("spread:", [...a]);\n

\n

通过 Chrome 浏览器开发者控制台，我得到以下结果：

\n

slice: (3) [empty \xc3\x97 3]\nspread: (3) [undefined, undefined, undefined]\n

\n

如果你的数组特别巨大+稀疏，速度array.slice()会特别快。[...array]可能会挂起您的浏览器。

\n