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