700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > js 数组遍历方法详解(map filter find findIndex reduce)

js 数组遍历方法详解(map filter find findIndex reduce)

时间:2021-09-07 21:03:24

相关推荐

js 数组遍历方法详解(map filter find findIndex reduce)

目录

前言mapmap是什么map方法的结构及入参语法糖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否则返回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的时候,此时下标为1console.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

尾言

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。