如何在JavaScript中提高扩展运算符的性能？

    在本文中，我们将进行一个有趣的测试，以了解如何提高扩展运算符的性能。  

    让我们首先简单介绍一下扩展运算符如何在数组中工作。  

    扩展运算符是常用的三个运算符，它使数组扩展成每个小块。然后，使用方括号语法[]重新组合这些小片段，以构建新的数组。  

    扩展运算符可以放在方括号[]内的任何位置。

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

    附加到头部和尾部功能

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

    第一个是appendToTail()：

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

    第二个是appendToHead()：

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

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

    性能测试

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

    Chrome 76

    Firefox 68

    Safari 12.1

    以下是性能测试结果：

    正如预期的那样，在Firefox和Safari浏览器中[...array, item]和[item, ...array]具有相同的性能。

    但是，在Chrome中，[...array, item]的执行速度比[item, ...array]快两倍。 这是一个有用的结果。

    要在Chrome中提高扩展运算符的性能，请在数组文字的开头使用扩展运算符：

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

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

    用几句话描述它的工作原理，如下：

    如果没有这个优化，当引擎遇到扩展运算符[...iterable, item]时，它会调用可迭代对象的迭代器iterator.next()。在每次迭代时，结果数组的内存都会增加，迭代结果会被添加到结果数组中。

    但是快速路径优化检测到已知的可迭代（如整数数组）并完全跳过迭代器对象的创建。 然后引擎读取扩展数组的长度，仅为结果数组分配一次内存。 然后通过索引传播数组，将每个项目添加到结果数组中。

    快速路径优化会跳过迭代对象的创建，只为结果分配一次内存。 从而性能提高。

    支持的数据结构

快速路径优化适用于以下标准JavaScript数据结构。

    数组

    字符串

    Sets

    Maps

    在Map对象中，仅支持map.keys()和map.values()方法：

    结论

    当扩展数组位于数组的开头时，由于快速的路径优化，可以提高性能。 它适用于V8引擎7.2版（Chrome v72和NodeJS v12包含的功能特性）。  

    通过此优化，性能测试表明[... array，item]的执行速度至少是[item，... array]的两倍。  

    请注意，尽管快速路径确实有用，但是建议您在性能很重要或处理大型数组的地方使用它。  

    因为在大多数情况下，优化是强制性的，所以最终用户可能不会感到任何不同。  

    您是否还知道JavaScript中有任何有趣的性能优化，能否在下面的评论中告诉我？  

    如果本文能给您带来帮助或启发的提示，请不要吝啬你的赞美和好评，这是我的动力和最大的肯定