JS数组的几种遍历方法金沙官网线上

#Javascript数组的5种迭代方法

数组当中定义了5个迭代方法,传入这些方法中的函数会接受三个参数,数组项的值,该项在数组的位置,和数组对象本身,以下是5个迭代方法的作用。

前言

最近感觉自己对数组遍历的方法有点混乱,for循环、forEach( )、map( )等方法混合使用,没有一个统一的规范,所以就打算总结一下。

1、every方法:

对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

let arr1 = [1,2,3,4,5,6];
let arr2 = [-1,-2,-3,-4,-5,-6];
let every1 = arr1.every((item,index,arr)=>{
    return item>0
})
let every2 = arr2.every((item,index,arr)=>{
    return item>0
})
console.log(every1,every2);//true,false

ES5中的数组遍历方法

ES5为数组定义了5个迭代方法。每个方法都接受两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响 this 的值。
而传入的函数又可以接受三个参数:当前遍历的数组项的值,该项在数组中的位置和数组对象本身。

every( )

对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则every( )返回true。例如:

    let numbers = [1, 2, 3, 4];
    let everyResult = numbers.every((item, index, array)=>{
        return item > 1;
    })
    console.log(everyResult);  // 输出 false

filter( )

即对数组中的每一项运行给定函数,然后返回该函数会返回true的项。从名字就看得出来,这个方法是用来过滤数组项的,例如:

    let numbers = [1, 2, 3, 4];
    let filterResult = numbers.filter((item, index, array)=>{
        return item > 1;
    })
    console.log(filterResult);  // 输出 [2, 3, 4]

forEach( )

对数组的每一项运行给定函数。forEach方法是唯一一个没有返回值的,纯粹用来遍历数组。

    let numbers = [1, 2, 3, 4];
    numbers.forEach((item, index, array)=>{
        // 执行某些操作
    })

map( )

对数组的每一项运行给定函数,返回每次函数调用的返回值组成的数组。map方法就是有返回值的forEach方法,例如:

    let numbers = [1, 2, 3, 4];
    let mapResult = numbers.map((item, index, array)=>{
        return item * 2;
    })
    console.log(mapResult); // 输出 [2, 4, 6, 8]

some( )

对数组的每一项运行给定函数,如果该函数对任一项返回true,则some( )就返回true。some和every就像 ||&&,some是只要有一项满足,就返回true。

    let numbers = [1, 2, 3, 4];
    let someResult = numbers.some((item, index, array)=>{
        return item > 3;
    })
    console.log(someResult);  // 输出 true

ES5的这几个迭代方法,如果是只对item(当前遍历的数组项)进行操作,是不会改变原数组的,但是也可以通过给定函数中接收的index参数来改变原数组

除了ES5这几个方法,还有常见的简单for循环和ES6的for...of。

2、filter方法

对数组中的每一项运行给定函数,返回该函数返回true的项组成的数字

let arr1 = [-1,-2,-3,4,5,6];
let arr2 = [1,2,3,-4,-5,-6];
let filter1 = arr1.filter(item=>{
    return item>0
})
let filter2 = arr2.filter((item)=>{
    return item<0
})
console.log(filter1,filter2);//[4,5,6],[-4,-5,-6]

for...of

ES6借鉴了Java、Python等语言,引入了for...of循环。for...of主要用来统一ES6多种数据结构的遍历方法,不仅可以遍历数组,还可以遍历MapSet这两种ES6新推出的数据结构。只要具有iterator接口的数据结构,就可以用for...of循环来遍历。还可以遍历某些类似数组的对象,比如arguments对象、DOM NodeList 对象。

let numbers = [1, 2, 3, 4];
for(let item of numbers){
    console.log(item);
}
//输出
// 1
// 2
// 3
// 4

有关ES6新特性的内容,可以参考阮一峰老师的ES6入门教程

不推荐使用for...in来遍历数组,只用来遍历对象的属性

本文由金沙官网线上发布于Web前端,转载请注明出处:JS数组的几种遍历方法金沙官网线上

您可能还会对下面的文章感兴趣: