如何提升扩展运算符的性能

博客地址：https://github.com/Wscats/articles/issues/88

在这篇文章中，咱们会进行一个有趣的测试，看看咱们如何提升扩展运算符的性能。

让咱们首先简要介绍一下扩展运算符在数组中的工做原理。

扩展运算符，也就是咱们经常使用的三个，让数组展开变成每一个小块。 而后使用中括号语法[]，从新组装这些小块构造一个新数组。

扩展运算符能够被放置在中括号[]里面的任何位置。

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]

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

附加到头部和尾部功能

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

第一个是appendToTail()：

function appendToTail(item, array) {
  return [...array, item];
}

const numbers = [1, 2, 3];
appendToTail(10, numbers); // => [1, 2, 3, 10]

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

第二个是appendToHead()：

function appendToHead(item, array) {
  return [item, ...array];
}

const numbers = [1, 2, 3];
appendToHead(10, numbers); // => [10, 1, 2, 3]

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中提升扩展运算符的性能，请在数组文字的开头使用扩展运算符：

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

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

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

用几句话描述它的工做原理，以下：

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

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

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

支持的数据结构

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

数组

const numbers = [1, 2, 3, 4];

[...numbers, 5]; // => [1, 2, 3, 4, 5]

字符串

const message = 'Hi';

[...message, '!']; // => ['H', 'i', '!']

Sets

const colors = new Set(['blue', 'white']);

[...colors, 'green'];          // => ['blue', 'white', 'green']
[...colors.values(), 'green']; // => ['blue', 'white', 'green']
[...colors.keys(), 'green'];   // => ['blue', 'white', 'green']

Maps

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

const names = new Map([[5, 'five'], [7, 'seven']]);

[...names.values(), 'ten']; // => ['five', 'seven', 'ten']
[...names.keys(), 10];      // => [5, 7, 10]

结论

当被扩展的数组位于数组的开头时，因为快速路径优化，您能够得到性能提高。它适用于V8引擎7.2版本（Chrome v72和NodeJS v12附带的特性）。

经过此优化，性能测试显示[... array, item]的执行速度至少比[item, ...array]快两倍。

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

由于，在大多数状况下，强制优化，最终用户极可能不会感受到任何差别。

您还知道JavaScript中有哪些有趣的性能优化，能够在下面评论中告诉我？

若是文章能带您一丝帮助或者启发，请不要吝啬你的赞和Star，对我是前进的动力和最大的确定😁