在這篇文章中，我們會進行一個有趣的測試，看看我們如何提高擴充運算子的效能。
讓我們先簡單介紹一下擴充運算子在陣列中的工作原理。
擴充運算符，也就是我們常用的三個，讓陣列展開變成每個小塊。然後使用中括號語法[]，重新組裝這些小塊建構一個新陣列。
擴充運算子可以被放置在中括號[]裡面的任何位置。
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]，比較兩者的表現：
以下是效能測試結果：
如如預期的那樣，在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中文網其他相關文章！
