JS幾種變數交換方式以及效能分析對比

2021-08-20 18:28:49 字數 2842 閱讀 4551

「兩個變數之間的值得交換」,這是乙個經典的話題,現在也有了很多的成熟解決方案,本文主要是列舉幾種常用的方案,進行大量計算並分析對比。

最近做某個專案時,其中有乙個需求是交換陣列中的兩個元素。當時使用的方法是:

arr = [item0,item1,...,itemn];

//最初使用這段**來交換第0個和第k(k當時覺得這種方法很優雅,高逼格。。。

後來,業餘時間又拿這個研究下了,順帶自己寫了個分析工具,和普通方式進行對比。

結果,大大的出乎我的意料,這種方式的效率比我想象的要低的多。以下是其中乙個測試結果的圖

於是,基於這點,又研究了下其它的幾種數值交換的方式,一起整合進入了分析工具中,才有了本文的這次總結。

其實關於js的變數交換,使用最廣泛的幾種方式基本已經是前端人員必備的技能了,本文正好藉此分析研究的契機,列舉了本次分析中用到的幾種交換方式:

適用性:適用於所有型別**如下:

tmp = a;

a = b;

b = tmp;

簡要說明: 這是用到的最廣泛的一種方式,經實戰測試分析,效能也很高

(在js中,這種方式效率確實很高,而且就算是其它語言中,只要tmp變數提前建立,效能也不會很低,反而是一些雜技派和少數派效能方面很低)

基本上可以說:經典的才是最優雅的

適用性:適用於所有型別**如下:

a = ;

b = a.b

;a = a.a;

簡要說明: 這種方式在實戰中應用的很少

適用性:適用於所有型別**如下:

a = [b, b=a][0];
簡要說明: 這種方式在各大論壇中都有看到有人使用,但經測試實際效能並不高

適用性:適用於所有型別**如下:

`[a, b] = [b, a];
簡要說明: 這也是在es6出來後看到有人用的,實際在現有的瀏覽器中測試,效能很低

適用性:適用於所有型別**如下:

a=(function()

finally}

)();

簡要說明: 這種方法應該是基本沒人使用的,也沒有什麼實用性,而且效能也是屬於在各種方法中墊底的

適用性:適用於數字或字串**如下:

a = (b = (a ^= b) ^ b) ^ a;
簡要說明: 異或方法在數字或字串時用到的比較普遍,而且效能也不低

適用性:適用於數字或字串**如下:

a ^=b;

b ^=a;

a ^=b;

簡要說明: 異或方法在數字或字串時用到的比較普遍,而且效能也不低

適用性:僅適用於數字**如下:

a = a + b;

b = a - b;

a = a - b;

簡要說明: 這種用法在只用於數字間的交換時,效能也不弱

適用性:僅適用於數字**如下:

a = b -a +(b = a);
簡要說明: 這種用法在只用於數字間的交換時,效能也不弱

適用性:僅適用於數字和字串**如下:

eval("a="+b+";b="+a);
簡要說明: 這種方式僅用於研究,實戰慎用

這種模式執行一萬次耗時等於其它執行一億次…

適用性:僅適用於陣列元素**如下:

arr[0] = arr.splice(2, 1, arr[0])[0];
簡要說明: 這種方式看起來挺優雅的,但實際上效能遠遠比不上臨時變數那種

上述列舉了幾種方式都有一一做過對比分析,基本上可以得出的結論是:

還是老老實實的用回臨時變數交換吧,經典,優雅,而且保證不會出什麼么蛾子

分析結果1

以下截圖中的資料是,在chrome中執行了一億次後得出的結論(每次執行100萬次,一共100個迴圈,得到的分析結果)

分析結果2

以下截圖資料是,在chrome (支援es6)中執行了100萬次後得出的結論(每次執行1萬次,一共100個迴圈,得到的分析結果)

可以看出,eval最慢,splice效能較低,tmp變數交換很穩定

如下demo中可以使用分析工具進行 js變數交換方式分析對比

js幾種變數交換方式分析比較

同步更新到了我個人部落格上

js幾種變數交換方式以及效能分析對比

exchange variables gracefully

JS幾種變數交換方式以及效能分析對比

其實關於js的變數交換,使用最廣泛的幾種方式基本已經是前端人員必備的技能了,本文正好藉此分析研究的契機,列舉了本次分析中用到的幾種交換方式 適用性 適用於所有型別 如下 tmp a a b b tmp 簡要說明 這是用到的最廣泛的一種方式,經實戰測試分析,效能也很高 在js中,這種方式效率確實很高,...

JS幾種陣列遍歷方式以及效能分析對比

在上一次分析了js幾種常用變數交換方式以及各自效能後,覺得這種方式挺好的,於是抽取了核心邏輯,封裝成了模板,打算拓展成乙個系列,本文則是系列中的第二篇,js陣列遍歷方式的分析對比 js陣列遍歷,基本就是for,forin,foreach,forof,map等等一些方法,以下介紹幾種本文分析用到的陣列...

JS幾種陣列遍歷方式以及效能分析對比

在上一次分析了js幾種常用變數交換方式以及各自效能後,覺得這種方式挺好的,於是抽取了核心邏輯,封裝成了模板,打算拓展成乙個系列,本文則是系列中的第二篇,js陣列遍歷方式的分析對比 js陣列遍歷,基本就是for,forin,foreach,forof,map等等一些方法,以下介紹幾種本文分析用到的陣列...