JavaScript數(shù)組對象的迭代方法詳解

上一篇博客講到了數(shù)組的方法，當(dāng)然里邊比較復(fù)雜的就是數(shù)組的迭代方法，因?yàn)樯婕暗搅嘶卣{(diào)函數(shù)，所以這篇博客我們來詳細(xì)講解一下js數(shù)組迭代方法的使用。

1.forEach(funcrion(value,index,arr){})：對數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù)，這個(gè)方法不進(jìn)行返回，所以一般用于讓數(shù)組循環(huán)執(zhí)行某方法。

  var arr=[1,2,3,4,5,6];

    arr.forEach(function(val,index,arr){

        console.log(val,index,arr);

    })

    // 其中：

    // value:每一個(gè)數(shù)組項(xiàng)的值 必填項(xiàng)

    // index:每一個(gè)數(shù)組項(xiàng)對應(yīng)的索引

    // arr:當(dāng)前的數(shù)組

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

2.map(funcrion(value,index,arr){})：對數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù)，它將返回執(zhí)行函數(shù)后的結(jié)果組成的新數(shù)組。

 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:每一個(gè)數(shù)組項(xiàng)的值 必填項(xiàng)

    // index:每一個(gè)數(shù)組項(xiàng)對應(yīng)的索引

    // arr:當(dāng)前的數(shù)組

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

3.every(funcrion(value,index,arr){})：對數(shù)組的每一項(xiàng)都運(yùn)行給定函數(shù)，進(jìn)項(xiàng)判斷，若對于每項(xiàng)執(zhí)行函數(shù)都返回了true，則其結(jié)果為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:每一個(gè)數(shù)組項(xiàng)的值 必填項(xiàng)

    // index:每一個(gè)數(shù)組項(xiàng)對應(yīng)的索引

    // arr:當(dāng)前的數(shù)組

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

4.some(funcrion(value,index,arr){})：對數(shù)組的每一項(xiàng)都運(yùn)行給定函數(shù)，進(jìn)行判斷，若存在一項(xiàng)符合條件的數(shù)組項(xiàng)，則其結(jié)果為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:每一個(gè)數(shù)組項(xiàng)的值 必填項(xiàng)

    // index:每一個(gè)數(shù)組項(xiàng)對應(yīng)的索引

    // arr:當(dāng)前的數(shù)組

注意：some()方法如果回調(diào)函數(shù)執(zhí)行完會根據(jù)結(jié)果返回true或false，但是回調(diào)函數(shù)中打印判斷是，只會作為判斷條件的返回值，則會打印多遍。

5.fliter(funcrion(value,index,arr){})：對數(shù)組的每一項(xiàng)都運(yùn)行給定函數(shù)，進(jìn)行過濾，將符合條件的數(shù)組項(xiàng)添加到新的數(shù)組中，并返回新的數(shù)組。

   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()方法對數(shù)組項(xiàng)進(jìn)行過濾，然后將符合條件的數(shù)組項(xiàng)添加到一個(gè)新的數(shù)組并返回，但是如果直接打印這個(gè)判斷條件，相當(dāng)于打印的判斷條件的結(jié)果，只會返回true或者false。

6.ES6中新增的迭代方法

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

  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():返回符合傳入測試（函數(shù)）條件的數(shù)組元素索引。

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

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

總結(jié)：

forEach()與map()是一對，用于數(shù)組遍歷執(zhí)行指定函數(shù)，前者不返回?cái)?shù)組，后者返回 處理過的新數(shù)組。
every()與some()是一對，分別適用于檢測數(shù)組是否全部滿足某條件或者存在滿足的數(shù)組項(xiàng),返回true或false。
filter()則是相當(dāng)于過濾器的存在，過濾掉數(shù)組中不符合條件的數(shù)據(jù)，將符合條件的數(shù)組項(xiàng)添加到新數(shù)組，并返回。
————————————————
版權(quán)聲明：本文為CSDN博主「Mr_Han119」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_39155611/java/article/details/106294417