遍歷陣列的常用方法forEach,filter,map等

小呀麼小程式設計師發表於2019-04-11

1.最傳統的for迴圈遍歷

    var arr=[1,2,3,4];
    for(var i=0;i<arr,length;i++){
        console.log(arr[i]);
    }
    //優化版
    for(var i=0;len=arr.length;i<len;i++){
        console.log(arr[i]);
    }
    //使用臨時變數len將陣列的長度存起來,避免重複獲取,當陣列較大時,優化效果比較明顯

2.for…in迴圈

var arr=[1,2,3,4];
for(var i in arr){
    console.log(arr[i]);
}

3.for…of

var arr=['a','b','c','d'];
for(var item of arr){
    console.log(item);
}

for…in和for…of迴圈的區別
迴圈物件屬性時使用for…in,在遍歷陣列的時候使用for…of
for…in是ES5標準,for…of是ES6標準
for…in迴圈出來的結果是key,而for…of迴圈出來的結果是value
for…of不能遍歷普通物件,要和Object.keys()搭配使用

var arr=[1,2,3,4];
arr.name='zhangsan'

for(var i in arr){
    console.log(arr[i]);
}

for(var item of arr){
    console.log(item);
}

//for..in會遍歷出後新增的自定義屬性,但是for..of只可以迴圈可迭代的可迭代屬性,不可迭代屬性在迴圈中被忽略了
//迭代?
//可迭代物件是包含Symbol.iterator屬性的物件,這個Symbol.iterator屬性對應著能夠返回該物件的迭代器的函式
//在ES6中,所有的集合物件(陣列,Set和Map)以及字串都是可迭代物件,可迭代物件可以與ES6中新增的for..of

4.forEach

var arr=[1,2,3,4];
//element 表示arr的單元項,index 表示arr單元項對應的索引值
arr.forEach(function(element,index){
    console.log(element+'-'+index);
})

//未賦值的值是不會在foreach迴圈迭代的,但是手動賦值為undefined的元素是會被列出的
//例如:' '

5.map

var arr=[1,2,3,4];
//callback對陣列元素進行操作,並將所有操作結果放入陣列中並返回該陣列
var arr2=arr.map(function(item){
    return item.toUppercase();
})

console.log(arr2);

6.filter

//返回一個包含所有在回撥函式上返回為true的元素新陣列,回撥函式在此擔任的是過濾器的角色,當元素符和條件,過濾器就返回true,filter則會返回所有符合過濾條件的元素
var arr=[1,2,3,4];
var arr2=arr.filter(function(item){
    if(item>2){
        return item;
    }
})
console.log(arr2);

7.every

//當陣列中的每一個元素在callback上被返回true時就返回true(注意:要求每一個單元項都返回true時才為true)
var arr=[1,2,3,4];
var arr1=arr.every(function(item){
    if(item>0){
        return item;
    }
})

console.log(arr1) //true

8.some

//只要陣列中有一項在callback上就返回true
var arr=[1,2,3,4];
var arr1=arr.some(function(item){
    if(item>3){
        return item;
    }
})

console.log(arr1); //true

相關文章