JavaScript数组对象的迭代方法详解

拼搏现实的明天。 2023-02-11 10:18 17阅读 0赞

## 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。 #####

注意：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;
        }));//20
        console.log(aNum.find(function (num) { 
            return num < 0;
        }));//undefined

2.findIndex():返回符合传入测试（函数）条件的数组元素索引。

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

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/**