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

2021-09-27 05:22:40 字數 2594 閱讀 2972

為了保證的可讀性,本文採用意譯而非直譯。

本文主要講解怎麼提高展開運算的效能,在此之前先簡單說說展開運算在陣列中的工作原理。

展開運算子或三個點,接受乙個陣列陣列或通常是可迭代的[... 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. 附加到頭部和尾部函式

在開始對比效能之前,先定義兩個函式。

}const numbers = [1, 2, 3];

}const numbers = [1, 2, 3];

乍一看,沒有理由認為這些函式的效能會不同,但是,事實勝於熊辯,來 look look.

2. 效能測試

在macbook pro膝上型電腦上用以下3個瀏覽器的執行[... array,item] 和 [item,... array],來看看對應的效能:

測試結果:

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

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

為了保證的可讀性,本文採用意譯而非直譯。測試結果 如上面所看到,在firefox和safari瀏覽器中 array,item 和 item,array 的效能基本一樣。但是,在chrome中,array,item 的執行速度比 item,array 快兩倍。這個結果對咱們來說很有用。要在chrome...

展開運算子

複製陣列 錯誤方法 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...

Kotlin展開運算子

當你需要傳遞乙個陣列引數時,在kotlin中需要你解包陣列,以便每個陣列元素在函式中能作為單獨的引數來呼叫。我們使用 號來展開這個陣列。fun main one,two,three,four 下面這為錯誤的 fun main type mismatch inferred type is listbu...