js 数组遍历方法详解（map、filter、find、findIndex、reduce）

前言

数组遍历方法是js最常用的一类方法，也是工作中必须掌握的一类方法，我们处理业务逻辑，大多都要对数组内的统一格式的数据进行遍历。

本文以map的详细解释，让读者先掌握这一类型方法的统一模式，再介绍filter、find、findIndex、reduce等相似性，这样能够将一类的方法全部记住。

map

map是什么

map是操作js数组的方法，也可以说是一个函数，作用是遍历整个数组，对里面的每个值做处理再返回一个新的值。

map方法的结构及入参

map的入参需要传递一个函数进去，因为说它是可以遍历数组的，所以传入的这个函数调用的次数由数组的长度决定，长度是3就是3次，是4就是4次。

//index可以不传
[1, 2, 3].map(function (item, index) {
    //这个数组长度是3所以函数调用3次
    //item指的遍历到的对应的数组值 函数调用的三次中 第一次是1 ，然后是2、3
    //index是数组的索引，三次分别是0，1，2
})

上面的例子意思就是map里面的函数运行了3次，分别是function(1,0)、function(2,1)、function(3,2)。

然后你可以做什么呢，可以在函数里面return（return的内容将作为新值代替数组遍历到的旧值item），比如将函数里面的值都变成原来的两倍：

let b = [1, 2, 3].map(function (item, index) {
    return item * 2
})
console.log(b)//[2,4,6]

语法糖

es6给我们提供了一些便利，比如箭头函数()=>{}
我们可以用箭头函数替代原来的函数：

let b = [1, 2, 3].map((item, index) => {
    return item * 2
})
console.log(b)//[2,4,6]

用箭头函数有什么好处呢？好处是，如果里面不用进行复杂的判断，我们可以将右边的{}改成表达式直接返回，省略return：

let b = [1, 2, 3].map((item, index) => item * 2 )
console.log(b)//[2,4,6]

我们这里例子里面函数第二个入参index索引值没用到，所以我们可以不传，当入参只有一个时，前面的括号（）都可以省略。

let b = [1, 2, 3].map( item => item * 2 )
console.log(b)//[2,4,6]

语法糖会让你的代码看起来更加高级优雅。

还有，有时候你可能不想改变所有的值，比如我只想改变小于2的数字，其他的不变，那就进行判断不满足条件的把item原路返回：

let b = [1, 2, 3].map(item => {
    if (item < 2) {
        return item * 2
    } else {
        return item
    }
})
console.log(b)//[2,2,3]

当然你可以改成用三目运算。

let b = [1, 2, 3].map(item=>{
   //返回，当item<2的时候返回item*2否则返回item
   return item < 2 ? item * 2 : item
})
console.log(b)//[2,2,3]

然后你又发现，它只有一个return，可以用语法糖。

let b = [1, 2, 3].map(item => item < 2 ? item * 2 : item)
console.log(b)//[2,2,3]

map一般不改变原数组

除非是嵌套了对象或者数组的数组你直接修改了内部的引用地址，一般数组使用map是不会改变原数组的，你得找人接收。

let a = [1, 2, 3]
let b = a.map(item => item < 2 ? item * 2 : item)
console.log(a)//[1,2,3]
console.log(b)//[2,2,3]

filter

相信你看完map已经对这种数组遍历形式有了一个概念，接下来介绍filter，它用于遍历，筛选掉你不需要的值，保留需要的。

说明

filter与map的区别就是：

1. map的入参函数中的return的内容将作为新值代替数组遍历到的旧值item。

2. 而filter的的入参函数中的return负责返回true或false，当return为true时当前遍历到的item将保留，如果为false，代表不符合要求将被筛选掉。

map和filter相同点是都返回一个新数组。

例子

比如一个数组中，我只需要小于3的内容。

let a = [1, 2, 3]
let b = a.filter((item, index) => {
    if (item < 3) {
        return true
    } else {
        return false
    }
})
console.log(b) // [1,2]

然后聪明的你会发现item<3为true时返回true，为false时返回false，那我们只需要返回条件即可。

let a = [1, 2, 3]
let b = a.filter((item, index) => {
    return item < 3
})
console.log(b) // [1,2]

只有一个返回值，所以？我们去掉{}和return，同时index没用到也可以去掉。

let a = [1, 2, 3]
let b = a.filter(item => item < 3)
console.log(b) // [1,2]

find 和 findIndex

很好，你已经掌握了map和filter，接下来我们势如破竹。

说明

find和findIndex它们也是筛选，与filter一样需要在入参函数里返回ture和false。

与filter不一样的是，它们只筛选出我们需要的第一个值，用于在一个数组找到我们需要的内容，而且find和findIndex不返回新数组。

find会返回找到对应的元素。

findIndex会返回找到对应的元素下标。

例子

比如我们需要找到数组中第一个大于1的元素的内容与下标。

let a = [1, 2, 3]
let item = a.find(item => item > 1) //返回第一个大于1的元素，就是遍历到2的时候
let itemIndex = a.findIndex(item => item > 1) //返回第一个大于1的元素的下标，就是遍历到2的时候，此时下标为1
console.log(item, itemIndex) // 2 1

reduce

最后我们再学习reduce，它有些不一样。

说明

reduce入参中的那个函数入参改变了，item移动到了第二位，与前面那些方法的item一个意思，第一个入参变成了结果变量res。

reduce入参除了一个函数，还多了一个入参，该入参可以作为结果变量的初始值，就是res的初始值，就是下方例子中的0。

而reduce中的入参函数的返回值将会作为下一个遍历的res的值，也就是reduce的意图是，我们可以通过遍历一个数组去修改我们这个结果变量。

例子

比如我们希望累加一个数组中的值。

于是我们设置一个结果变量为0，将第一次遍历到的item值1加到结果变量0上（结果为1），返回。

该返回值1又会作为下一次遍历的res，再将第二次遍历到的item值2加上去（结果为3），返回。

该返回值3又会作为下一次遍历的res，再将第二次遍历到的item值3加上去（结果为6），返回。

遍历结束，res最终值6，将会作为reduce函数的返回值。

let a = [1, 2, 3]
let b = a.reduce((res, item) => {
    return res + item
}, 0)
console.log(b) // 6

尾言

如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~