javascript中如何提高擴充運算子的效能？

在這篇文章中，我們會進行一個有趣的測試，看看我們如何提高擴充運算子的效能。

讓我們先簡單介紹一下擴充運算子在陣列中的工作原理。

擴充運算符，也就是我們常用的三個，讓陣列展開變成每個小塊。然後使用中括號語法[]，重新組裝這些小塊建構一個新陣列。

擴充運算子可以被放置在中括號[]裡面的任何位置。

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，對我是前進的動力和最大的肯定

原文連結：https:/ /dmitripavlutin.com/javascript-spread-operator-performance-optimization/

更多程式相關知識，請造訪：程式設計影片！ ！

以上是javascript中如何提高擴充運算子的效能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！