JavaScript數組對象的迭代方法詳解

JavaScript數組對象的迭代方法詳解

上一篇博客講到了數組的方法，當然裏邊比較複雜的就是數組的迭代方法，因爲涉及到了回調函數，所以這篇博客我們來詳細講解一下js數組迭代方法的使用。

1.forEach(funcrion(value,index,arr){})：對數組的每一項運行給定函數，這個方法不進行返回，所以一般用於讓數組循環執行某方法。

    var arr=[1,2,3,4,5,6];
    arr.forEach(function(val,index,arr){
        console.log(val,index,arr);
    })
    // 其中：
    // value:每一個數組項的值 必填項
    // index:每一個數組項對應的索引
    // arr:當前的數組

注意：forEach()方法不返回值，所以回調函數中使用return會打印出來undefined。

2.map(funcrion(value,index,arr){})：對數組的每一項運行給定函數，它將返回執行函數後的結果組成的新數組。

    var aNum2 = [1.2, 1.8, 2.0, 4.3];
    console.log(aNum2.map(Math.floor()));// [1,1,2,4]
    
    var arr=[1,2,3];
    console.log(arr.map(function(val,index){
        return val*3
    }));// 3 6 9
    // 其中：
    // value:每一個數組項的值 必填項
    // index:每一個數組項對應的索引
    // arr:當前的數組

注意：map()方法有返回值，返回值爲新的數組，所以可以直接再回調函數中return。

3.every(funcrion(value,index,arr){})：對數組的每一項都運行給定函數，進項判斷，若對於每項執行函數都返回了true，則其結果爲true。

    var arr=[10,20,30];
    console.log(arr.every(function(val){
        return val>20;
    }));// false
    
    console.log(arr.every(function(val){
        return val>0;
    }));// true
    
    // 其中：
    // value:每一個數組項的值 必填項
    // index:每一個數組項對應的索引
    // arr:當前的數組

注意：every()方法所有的數組項都符合判斷時返回true,否則返回false。

4.some(funcrion(value,index,arr){})：對數組的每一項都運行給定函數，進行判斷，若存在一項符合條件的數組項，則其結果爲true。

    var arr=[10,20,30];
    console.log(arr.some(function(val){
        return val>20;
    }));// true
    
    console.log(arr.some(function(val){
        return val>0;
    }));// true
    
    console.log(arr.some(function(val){
        return val<0;
    }));// false
    
    arr.some(function(val){
        console.log(val<0);
    });//fasle false false
    // 其中：
    // value:每一個數組項的值 必填項
    // index:每一個數組項對應的索引
    // arr:當前的數組

注意：some()方法如果回調函數執行完會根據結果返回true或false，但是回調函數中打印判斷是，只會作爲判斷條件的返回值，則會打印多遍。

5.fliter(funcrion(value,index,arr){})：對數組的每一項都運行給定函數，進行過濾，將符合條件的數組項添加到新的數組中，並返回新的數組。

    var aNum=[1,2,3,4];
    console.log(aNum.filter(function (num) {
        return num > 1;
    }));//[2,3,4,]
    aNum.filter(function (num) {
        console.log(num > 1);//true true true
    })

注意：filter()方法對數組項進行過濾，然後將符合條件的數組項添加到一個新的數組並返回，但是如果直接打印這個判斷條件，相當於打印的判斷條件的結果，只會返回true或者false。

6.ES6中新增的迭代方法

1.find():返回第一個符合傳入測試（函數）條件的數組元素。

    var aNum=[10,20,30,40];
    console.log(aNum.find(function (num) {
        return num > 19;
    }));//1
    console.log(aNum.find(function (num) {
        return num < 0;
    }));//undefined

2.findIndex():返回符合傳入測試（函數）條件的數組元素索引。

    console.log(aNum.findIndex(function (num) {
        return num > 19;
    }));//3

3.includes():判斷一個數組是否包含一個指定的值。

    console.log(aNum.includes(17));//false
    console.log(aNum.includes(20));//true

總結：

• forEach()與map()是一對，用於數組遍歷執行指定函數，前者不返回數組，後者返回 處理過的新數組。
• every()與some()是一對，分別適用於檢測數組是否全部滿足某條件或者存在滿足的數組項,返回true或false。
• filter()則是相當於過濾器的存在，過濾掉數組中不符合條件的數據，將符合條件的數組項添加到新數組，並返回。

視頻講解鏈接：
https://www.bilibili.com/video/BV1UQ4y1A73N/