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…

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。