目录
前言
数组遍历方法是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的区别就是：
map的入参函数中的return的内容将作为新值代替数组遍历到的旧值item。
而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
尾言
如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~
