前言

数组遍历方法是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否则返回itemreturn 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

尾言

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

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

ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...
linux jq 遍历数组,jquery 遍历数组 each 方法详解
JQuery拿取对象的方式 $('#id') :通过元素的id $('tagName') : 通过元素的标签名 $('tagName tagName') : 通过元素的标签名,eg: $('ul li ...
js数组中forEach/some/every/map/filter/reduce的区别
2019独角兽企业重金招聘Python工程师标准>>> // js数组中forEach/some/every/map/filter/reduce的区别// 1. foreach:就是 ...
pythonprint字节按照16进制输出_对python以16进制打印字节数组的方法详解
对python以16进制打印字节数组的方法详解一.问题描述如果直接用print打印bytes的话,有时候会直接显示ascii对应的字符,看起来很蛋疼. 二.运行效果上面一行是直接用print打印 ...
Js中apply方法详解说明
Js apply 方法详解我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了, ...
边信息(即对应的两个数组值)_Python 数据分析 NumPy 模块迭代数组nditer方法详解...
考虑到实际应用场景中,数组往往不止一个维度,因此遍历数组中所有元素,使用while和for循环写起来很麻烦,本文将介绍NumPy自带的数组遍历方法nditer. 迭代器对象 nditer 在numpy ...
js数组遍历方法总结与对比
目录总结一.常规方法 for的4种写法 while 二.ES6方法 for...of,得到每项元素 for...in,得到的是数组索引三.数组实例上的遍历方法 forEach(),得到每一项元素 ...
php 二维数组根据键值合并二维数组_php数组实现根据某个键值将相同键值合并生成新二维数组的方法详解...
这篇文章主要介绍了php数组实现根据某个键值将相同键值合并生成新二维数组的方法,涉及php数组的遍历.赋值相关运算技巧,需要的朋友可以参考下本文实例讲述了php数组实现根据某个键值将相同键值合并生成 ...
java封装数组_Java封装数组之动态数组实现方法详解
本文实例讲述了Java封装数组之动态数组实现方法.分享给大家供大家参考,具体如下: 前言:在此之前,我们封装的数组属于静态数组,也即数组空间固定长度,对于固定长度的数组当元素超过容量时会报数组空间不足 ...

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

目录

前言

map