JS如何提高展开运算符的性能?

来源:http://www.chinese-glasses.com 作者:Web前端 人气:167 发布时间:2020-05-06
摘要:时间: 2019-08-04阅读: 175标签: 性能 在这篇文章中,我们会进行一个有趣的测试,看看我们如何提高扩展运算符的性能。让我们首先简要介绍一下扩展运算符在数组中的工作原理。 本文主

10bet 1

时间: 2019-08-04阅读: 175标签: 性能

在这篇文章中,我们会进行一个有趣的测试,看看我们如何提高扩展运算符的性能。让我们首先简要介绍一下扩展运算符在数组中的工作原理。

本文主要讲解怎么提高展开运算的性能,在此之前先简单说说展开运算在数组中的工作原理。展开运算符或三个点,接受一个数组数组或通常是可迭代的[... arrayOrIterable]并将数组元素分解,并使用这些分解部分构造一个新数组。

扩展运算符,也就是我们常用的三个,让数组展开变成每个小块。 然后使用中括号语法[],重新组装这些小块构造一个新数组。扩展运算符可以被放置在中括号[]里面的任何位置。

展开运算符可以放在数组中的任何位置:

const numbers = [1, 2, 3];[0, ...numbers]; // = [0, 1, 2, 3][0, ...numbers, 4]; // = [0, 1, 2, 3, 4][...numbers, 4]; // = [1, 2, 3, 4]
const numbers = [1, 2, 3];[0, ...numbers]; // = [0, 1, 2, 3][0, ...numbers, 4]; // = [0, 1, 2, 3, 4][...numbers, 4]; // = [1, 2, 3, 4]

回答我们一开始提出的问题,扩展运算符在数组文字中的位置是否可以提高性能?让我们往后继续探究。

现在有一个有趣的问题,展开运算符在数组中的位置是否可以提高性能?让咱们来look look。

附加到头部和尾部功能

  1. 附加到头部和尾部函数

在开始性能比较之前,让我们定义两个函数。

在开始对比性能之前,先定义两个函数。

第一个是appendToTail():

10bet,第一个函数:appendToTail():

function appendToTail(item, array) { return [...array, item];}const numbers = [1, 2, 3];appendToTail(10, numbers); // = [1, 2, 3, 10]
function appendToTail(item, array) { return [...array, item];}const numbers = [1, 2, 3];appendToTail(10, numbers); // = [1, 2, 3, 10]

appendToTail()可以让你在数组的末尾插入一个值。 此函数使用了以下写法[...array, item]。

appendToTail()函数功能主要是将item插入数组的末尾。

第二个是appendToHead():

第二个函数appendToHead():

function appendToHead(item, array) { return [item, ...array];}const numbers = [1, 2, 3];appendToHead(10, numbers); // = [10, 1, 2, 3]
function appendToHead(item, array) { return [item, ...array];}const numbers = [1, 2, 3];appendToHead(10, numbers); // = [10, 1, 2, 3]

appendToHead()是一个纯函数,它返回一个新数组,其中添加的值是插入在原数组的头部。它使用[item, ...array]。

appendToHead()是一个纯函数,它返回一个新数组,通过[item,... array]骚操作将item放到所传入数组的后面。

讲道理就上面这两个函数的表现,没有理由认为这些功能会有不一样的效率。但是事实可能跟我们想象中不一样,下面让我们来继续测试吧。

乍一看,没有理由认为这些函数的性能会不同,但是,事实胜于熊辩,来 look look.

性能测试

  1. 性能测试

我用MacBook Pro在以下3个浏览器的笔记本电脑上测试[... array, item]和[item, ...array],对比两者的性能:

在MacBook Pro笔记本电脑上用以下3个浏览器的运行[... array,item]和[item,... array],来看看对应的性能:

Chrome 76Firefox 68Safari 12.1

Chrome 76Firefox 68Safari 12.1

以下是性能测试结果:

测试结果:

正如预期的那样,在Firefox和Safari浏览器中[...array, item]和[item, ...array]具有相同的性能。但是,在Chrome中,[...array, item]的执行速度比[item, ...array]快两倍。 这是一个有用的结果。要在Chrome中提高扩展运算符的性能,请在数组文字的开头使用扩展运算符:

如上面所看到,在Firefox和Safari浏览器中[... array,item]和[item,... array]的性能基本一样。

constresult = [...array, item];

但是,在Chrome中,[... array,item]的执行速度比[item,... array]快两倍。这个结果对咱们来说很有用。

但另一个问题出现了:这种问题怎么引起的?

要在Chrome中提高展开运算符的性能,只需要将展开操作放到数组的开头就哦了。

从V8引擎的7.2版本之后,为Chrome中的JavaScript执行提供支持,可以对扩展运算符进行新的优化:快速路径优化

const result = [...array, item];

用几句话描述它的工作原理,如下:

但这又是为啥,为什么会发生这种情况?

本文由10bet发布于Web前端,转载请注明出处:JS如何提高展开运算符的性能?

关键词:

最火资讯