JS中，如何提升展开运算符的性能

做者：Dmitri Pavlutin

译者：前端小智

来源：dmitripavlutin.

---

阿里云最近在作活动，低至2折，有兴趣能够看看：promotion.aliyun.com/ntms/yunpar…

---

为了保证的可读性，本文采用意译而非直译。

本文主要讲解怎么提升展开运算的性能，在此以前先简单说说展开运算在数组中的工做原理。

展开运算符或三个点，接受一个数组数组或一般是可迭代的[... 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]
复制代码

如今有一个有趣的问题，展开运算符在数组中的位置是否能够提升性能?让我们来look look。

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

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

第一个函数：appendToTail()：

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

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

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

第二个函数 appendToHead()：

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

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

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

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

2. 性能测试

在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];
复制代码

但这又是为啥，为何会发生这种状况？

3.快速路径优化（ fast-path optimization）

启动V8引擎的 7.2版本（为Chrome中的JS执行提供支持），能够对展开运算符进行新的优化：快速路径优化。

简单说，它的工做原理以下：

若是没有这种优化，当引擎遇到一个展开操做符[...iterable, item]，它调用iterable对象的iterator (iterator.next())方法。在每次迭代中，最后返回的数组的内存都会增长，并将迭代结果添加到其中。

可是快速路径优化检测到一个已知的可迭代对象(就像一个整数数组)，并彻底跳过iterator对象的建立。而后，引擎读取扩展数组的长度，只为结果数组分配一次内存。而后传递展开数组的索引，将每一个元素添加到结果数组中。

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

4.支持数据结构

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

array

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

[...numbers, 5]; // => [1, 2, 3, 4, 5]
复制代码

string

const message = 'Hi';

[...message, '!']; // => ['H', 'i', '!']
复制代码

set

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

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

map

关于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引擎v7.2中可用(在Chrome v72和NodeJS v12中提供)。

经过快速路径优化，[... array，item]的执行速度至少比[item，... array]快两倍。

请注意，虽然f快速路径优化确实颇有用，可是在大多数状况下，能够不用强制进行优化，由于最终用户极可能不会感受到差异，固然，若是我们在处理大型数组，就可能些优化方案。

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：dmitripavlutin.com/javascript-…

交流（欢迎加入群，群工做日都会发红包，互动讨论技术）

阿里云最近在作活动，低至2折，有兴趣能够看看：promotion.aliyun.com/ntms/yunpar…

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。