js 運算子 JS中,如何提高展開運算子的效能

2021-10-11 11:41:13 字數 1863 閱讀 5629

為了保證的可讀性,本文採用意譯而非直譯。測試結果:

如上面所看到,在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', '!'] 複製**

setconst 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快速路徑優化確實很有用,但是在大多數情況下,可以不用強制進行優化,因為終端使用者很可能不會感覺到差別,當然,如果咱們在處理大型陣列,就可能些優化方案。

JS中,如何提高展開運算子的效能

為了保證的可讀性,本文採用意譯而非直譯。本文主要講解怎麼提高展開運算的效能,在此之前先簡單說說展開運算在陣列中的工作原理。展開運算子或三個點,接受乙個陣列陣列或通常是可迭代的 arrayoriterable 並將陣列元素分解,並使用這些分解部分構造乙個新陣列。展開運算子可以放在陣列中的任何位置 co...

JS之展開運算子 合併運算子

把物件或者陣列裡面的東西直接開啟,一般多用於陣列裡面 陣列拼接 var arr1 4 5,6 var arr2 7 8,9 var arr3 1 2,3 arr1,arr2 console.log arr3 1,2,3,4,5,6,7,8,9 進行函式的引數傳遞 var res math.max a...

展開運算子

複製陣列 錯誤方法 arr2 arr1 console.log arr1 arr2 true 傳統方法 let arr3 arr1.concat console.log arr1 arr3 false 新方法 let arr1 1,2,3 let arr2 4,5,6,arr1 console.lo...