JS——幾種陣列遍歷方式總結
序言
本文是轉載內容,但是原版已不可尋,此處貼出本文轉載來源,點選進入原文:CSDN
概述
JS陣列遍歷,基本就是for,forin,foreach,forof,map等等一些方法,以下介紹幾種本文分析用到的陣列遍歷方式以及進行效能分析對比
正文
第一部分 用法
第一種:普通for迴圈
程式碼如下:
for(j = 0; j < arr.length; j++) { }
簡要說明: 最簡單的一種,也是使用頻率最高的一種,雖然效能不弱,但仍有優化空間
第二種:優化版for迴圈
程式碼如下:
for(j = 0,len=arr.length; j < len; j++) { }
簡要說明: 使用臨時變數,將長度快取起來,避免重複獲取陣列長度,當陣列較大時優化效果才會比較明顯。
這種方法基本上是所有迴圈遍歷方法中效能最高的一種
第三種:弱化版for迴圈
程式碼如下:
for(j = 0; arr[j]!=null; j++) { }
簡要說明: 這種方法其實嚴格上也屬於for迴圈,只不過是沒有使用length判斷,而使用變數本身判斷
實際上,這種方法的效能要遠遠小於普通for迴圈
第四種:foreach迴圈
程式碼如下:
arr.forEach(function(e){ });
簡要說明: 陣列自帶的foreach迴圈,使用頻率較高,實際上效能比普通for迴圈弱
第五種:foreach變種
程式碼如下:
Array.prototype.forEach.call(arr,function(el){ });
簡要說明: 由於foreach是Array型自帶的,對於一些非這種型別的,無法直接使用(如NodeList),所以才有了這個變種,使用這個變種可以讓類似的陣列擁有foreach功能。
實際效能要比普通foreach弱
第六種:forin迴圈
程式碼如下:
for(j in arr) { }
簡要說明: 這個迴圈很多人愛用,但實際上,經分析測試,在眾多的迴圈遍歷方式中
它的效率是最低的
第七種:map遍歷
程式碼如下:
arr.map(function(n){ });
簡要說明: 這種方式也是用的比較廣泛的,雖然用起來比較優雅,但實際效率還比不上foreach
第八種:forof遍歷(需要ES6支援)
程式碼如下:
for(let value of arr) { });
簡要說明: 這種方式是es6裡面用到的,效能要好於forin,但仍然比不上普通for迴圈
各種遍歷方式的效能對比
上述列舉了幾種方式都有一一做過對比分析,基本上可以得出的結論是:
普通for迴圈才是最優雅的
(PS:以上所有的程式碼都只是進行空的迴圈,沒有再迴圈內部執行程式碼,僅僅是分析各自迴圈的時間而已)
效能對比截圖
分析結果1
以下截圖中的資料是,在chrome (支援es6)中運行了100次後得出的結論(每次執行10次,一共10個迴圈,得到的分析結果)
第二部分 用法分析
1. JavaScript遍歷的常用的遍歷方法是for迴圈和for-in,ES5的時候加上了forEach方法(IE9以下不支援)。
/****js原生遍歷****/ //for迴圈遍歷陣列 for(var i=0;i<arrTmp.length;i++){ console.log(i+": "+arrTmp[i]) } //for-in遍歷物件屬性,i指代屬性名 for(var i in objTmp){ console.log(i+": "+objTmp[i]) } //forEach遍歷陣列,三個引數依次是陣列元素、索引、陣列本身 arrTmp.forEach(function(value,index,array){ console.log(value+","+index+","+array[index]) })
2. for-in迴圈是為了遍歷物件而設計的,事實上for-in也能用來遍歷陣列,但定義的索引i是字串型別的。如果陣列具有一個可列舉的方法,也會被for-in遍歷到,例如:
//for-in遍歷陣列 for(var i in arrTmp){ console.log(i+": "+arrTmp[i]) } //for-in會遍歷到陣列的屬性 arrTmp.name="myTest"; for(var i in arrTmp){ console.log(i+":"+arrTmp[i]) } //輸出 0:value1 1:value2 2:value3 name:myTest
3. for迴圈和for-in能正確響應break、continue和return語句,但forEach不行。
//只會輸出value1 value2 for(var i=0;i<arrTmp.length;i++){ console.log(i+": "+arrTmp[i]); if(i==1){ break; } } //會輸出value1 value2 value3 arrTmp.forEach(function(value){ console.log(value+); if(value==1){ return; } })
4. ES6中,新增了for-of遍歷方法。它被設計用來遍歷各種類陣列集合,例如DOM NodeList物件、Map和Set物件,甚至字串也行。官方的說法是:
for...of語句在可迭代物件(包括 Array, Map, Set, String, TypedArray,arguments 物件等等)上建立一個迭代迴圈,對每個不同屬性的屬性值,呼叫一個自定義的有執行語句的迭代掛鉤
// for-of遍歷陣列,不帶索引,i即為陣列元素 for(let i of arrTmp){ console.log(i) } //輸出 "value1" "value2" "value3" // for-of遍歷Map物件 let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); for (let [key, value] of iterable) { console.log(value); } //輸出 1 2 3 // for-of遍歷字串 let iterable = "china中國"; for (let value of iterable) { console.log(value); } //輸出 "c" "h" "i" "n" "a" "中" "國"
5. 上面的方法,注重點都是陣列的元素或者物件的屬性值。如果單純的想獲取物件的屬性名,js有原生的Object.keys()方法(低版本IE不相容),返回一個由物件的可列舉屬性名組成的陣列:
/****Object.keys()返回鍵名陣列****/ //陣列型別 let arr = ["a", "b", "c"]; console.log(Object.keys(arr)); // (3) ['0', '1', '2'] // 類陣列物件 let anObj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.keys(anObj)); // (3) ['2', '7', '100'] //一般物件 let xyz = {z: "zzz", x: "xxx", y: "yyy"}; console.log(Object.keys(xyz)); // (3) ["z", "x", "y"]
javascript原生遍歷方法的建議用法:
用for迴圈遍歷陣列 用for-in遍歷物件 用for-of遍歷類陣列物件(ES6) 用Object.keys()獲取物件屬性名的集合
Q:for … of迴圈和for … in迴圈有何區別 ?
A:for … in迴圈,它遍歷的實際上是物件的屬性名稱。一個Array陣列實際上也是一個物件,它的每個元素的索引被視為一個屬性。當我們手動給Array物件添加了額外的屬性後,for … in迴圈將帶來意想不到的意外效果:
for in 遍歷陣列時會為把陣列索引作為鍵值 如:陣列0、1、2、3、4、5、…的鍵;當我們這樣寫:
var arr=[1,2,3,4,5,6]; arr.value='val'; //在使用for in 遍歷時 for(var i in arr){ console.log(i+' '+arr[i]);//這時的i為鍵值,不為陣列索引 } //輸出 0 1 1 2 2 3 3 4 4 5 5 6 value val 接著執行,這時出現問題: arr;//輸出[1, 2, 3, 4, 5, 6] //使用 console.log(arr)時,這樣 console.log(arr);//輸出[1, 2, 3, 4, 5, 6, value: "val"] //alert(arr)時 alert(arr);//輸出[1, 2, 3, 4, 5, 6]
而當我們使用for of 時:
var arr=[1,2,3,4,5,6]; arr.value='val'; //在使用for in 遍歷時 for(var v of arr){ console.log(v);//v為陣列的項 } //輸出 1 2 3 4 5 6
直接遍歷出值,杜絕使用for in 時,下標索引的影響
jQuery的$.each
jQuery的遍歷方法通常被用來遍歷DOM元素,用於陣列和物件的是$.each()方法,它接受三個引數,分別指代陣列索引/元素/陣列本身(跟forEach相比,第1個和第2個引數正好是相反的,不要記錯了。):
/****$.each()遍歷物件和陣列****/ $.each(arrTmp,function(index,value,array){ console.log(index+": "+value) }); $.each(objTmp,function(key,value){ console.log(key+": "+value) });
map
這裡的map不是“地圖”的意思,而是指“對映”。[].map(); 基本用法跟forEach方法類似:
array.map(callback,[ thisObject]);
callback的引數也類似:
[].map(function(value, index, array) { // ... });
map方法的作用不難理解,“對映”嘛,也就是原陣列被“對映”成對應新陣列。下面這個例子是數值項求平方:
var data=[1,3,4] var Squares=data.map(function(val,index,arr){ console.log(arr[index]==val); // ==> true return val*val }) console.log(Squares); // ==> [1, 9, 16]