JS數組的遍歷方法彙總及區別

總的遍歷方法:
1、經典遍歷方法:for語句、forEach語句、for-in語句、for-of語句
2、其它循環方法:map(映射)方法、filter(過濾)方法、every方法、some方法、reduce方法(reduceRight)
3、不常用的方法:find方法、findIndex方法
4、ES6提供的三個新方法:keys方法、values方法、entries方法

下面是各方法的用法和區別:

一、

1、for循環是最傳統的語句,跟其它循環方法比較它的性能是最好的

    for(i = 0;i < arr.length;i++){
    }//普通版for循環
    console.log(typeof i);//number

    for(i = 0;len = arr.length;i++){
    }//優化版for循環

    for(i= 0;arr[i] != null;i++){
    }//弱化版for循環*/

2、forEach遍歷爲每個數組元素執行callback函數只可用於數組,那些已刪除(使用delete方法等情況)或者未初始化的項將被跳過(但不包括那些值爲 undefined 的項),不可鏈式調用,沒有返回值,對原數組沒有影響,不支持IE。

var eachArr = arr.forEach(function(item,index,arr){
        return item+'|'+index+'|'+arr;
    });
    /*
     1|0|1,2,3,4
     2|1|1,2,3,4
     3|2|1,2,3,4
     4|3|1,2,3,4
     */

3、for-in語句一般被用來遍歷對象的可枚舉屬性的。包括非整數類型的名稱和繼承的那些原型鏈上面的屬性也能被遍歷。for-in會把繼承鏈的對象屬性都會遍歷一遍,所以會更花時間,性能較差。

for(var key in obj){
        console.log(key+'='+obj[key]);
    };
    /*name=xiaoqian
      sex=girl
      age=21
    */

4、for-of語句是ES6專門引入用來遍歷可迭代對象的數據。遍歷Array可以採用下標循環,遍歷Map和Set就無法使用下標。爲了統一集合類型,ES6標準引入了新的iterable類型,Array、Map和Set都屬於iterable類型。它只循環集合本身的元素。
具有iterable類型的集合可以通過新的for … of循環來遍歷。

    var nArr = [{name:'hq',sex:'girl'},1,2];
     for(var val of nArr){
         console.log(val);
     }
     /*
     {name: "hq", sex: "girl"}
     1
     2
     */

用for-of語句循環遍歷集合如下:

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍歷Array
    console.log(x);
}
for (var x of s) { // 遍歷Set
    console.log(x);
}
for (var x of m) { // 遍歷Map
    con
二、

下面每個方法都接收兩個參數:要在每一項上運行的函數,運行該函數的作用域對象(可選的)。要運行的函數會接收三個參數:數組項的值(item),該項在數組中的位置(index)和數組對象本身(array)。
filter(): 對數組中的每一項運行給定函數,返回由該函數會返回true的項組成的數組
map(): 對數組中的每一項運行給定函數,返回由每次函數調用得到的結果組成的數組
every(): 對數組中的每一項運行給定函數,如果該函數對每一項都返回true,則返回true
some(): 對數組中的每一項運行給定函數,只要該函數對任一項返回true則返回true
其中各方法中的callback 函數只會在有值的索引上被調用;那些從來沒被賦過值或者使用 delete 刪除的索引則不會被調用。

三、

1、find() 方法返回數組中符合測試函數條件的第一個元素。否則返回undefined
2、 findIndex 對於數組中的每個元素,都會調用一次回調函數(採用升序索引順序),直到有元素返回 true。只要有一個元素返回 true,findIndex 立即返回該返回 true 的元素的索引值。如果數組中沒有任何元素返回 true,則 findIndex 返回 -1。

[1,2,3].findIndex(function(x) { x == 2; });
// Returns an index value of 1.

[1,2,3].findIndex(x => x == 4);
// Returns an index value of -1.
四、

ES6 提供三個新的方法 —— entries(),keys()和values() —— 用於遍歷數組。它們都返回一個遍歷器對象,可以用for…of循環進行遍歷,唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
五、

遍歷速度比較:
for > for-of > forEach > filter > map > for-in
every>some

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章