常用遍历数组的函数

161 阅读3分钟

前言

在js中平常遇到或处理最多的数据结构是数组,下面就分别介绍一下js中内置且常见的数组处理函数

1.map

特性介绍

1.函数参数3个,分别表示数组值,数组索引,整个数组值

2.不会改变原数组

3.内部需要使用return,默认为undefined

4.存在返回值,最后会将所有返回值合并成一个新的数组

使用方式

 let res= arr.map((item,index,value)=>{
            return item;
        })

实例

let arr=['a','b','c','d','e']
       let res= arr.map((item,index,value)=>{
         console.log(item,index,value)
            return item+'A';
        })
        console.log(...arr)
        console.log(...res)

结果

image.png

一般适用于需要处理数组中每个元素的情况,如初始化数组

2.filter

特性介绍

1.函数参数3个,分别表示数组值,数组索引,整个数组值

2.不会改变原数组

3.内部需要使用return,true表示保留此数组中元素,反之过滤掉此元素

4.存在返回值,最后会将所有返回值为true的元素合并成一个新的数组

使用方式

 let res= arr.filter((item,index,value)=>{
            return item;
        })

实例

let arr=['a','a','c','d','e']
       let res= arr.filter((item,index,value)=>{
         console.log(item,index,value)
            return item!=='a';
        })
        console.log(arr)
        console.log(res)

结果

image.png

一般适用于筛选数组中满足某个条件的元素

3.reduce

特性介绍

1.函数参数4个,分别表示当前累计值,数组值,数组索引,整个数组值

2.初始操作值(可选),默认为数组第一个值

3.不会改变原数组

4.内部需要使用return

5.存在返回值,将累计操作后的结果返回

使用方式

不填写初始值

arr.reduce((pre,item,index,value)=>{
         return pre+item;
     })

添加初始值

arr.reduce((pre,item,index,value)=>{
         return pre+item;
      },0)

实例(未添加初始值)

let arr=[6,7,8,9,10]
       let res= arr.reduce((pre,item,index,value)=>{

         console.log(pre,item,index,value);
         return pre+item;

        })
        console.log(arr)
        console.log(res)

结果

image.png

没有填写初始值时,默认为数组的第一个元素值,所以循环就会直接从索引为1开始,循环次数为4

实例(添加初始值)

let arr=[6,7,8,9,10]
       let res= arr.reduce((pre,item,index,value)=>{

         console.log(pre,item,index,value);
         return pre+item;

        },10)
        console.log(arr)
        console.log(res)

结果

image.png

填写初始值后,pre初始值为10,循环就会从头开始,所以循环次数为5

一般适用于对整个数组进行累计操作的情况,如累加操作

4.forEach

特性介绍

1.函数参数3个,分别表示数组值,数组索引,整个数组值

2.不会改变原数组

3.不存在返回值,不会将所有结果合并成新数组(undefined),因此可以看作一个for循环

使用方式

 arr.forEach((item,index,value)=>{
            .....
        })

实例

let arr=['a','b','c','d','e']
       let res= arr.forEach((item,index,value)=>{
        
         console.log(item,index,value);

        })
        console.log(arr)
        console.log(res)

结果

image.png

一般就是将其当作for循环使用,效果和for大致相同

总结

map、filter、reduce 方法

相同点

1.都不会改变原数组

2.都需要借助return完成操作

4.存在返回值

不同点

map、filter只有一个操作函数,其中函数内部参数个数为3个,分别表示元素数值,索引,原数组

reduce 存在两个参数,一个操作函数(包含4个参数,分别为前累计值,元素数值,索引,原数组),另一个数值参数表示操作的初始值(可选)默认为数组中的第一个元素值

单独说forEach

forEach可以看作一个函数式的for循环,内部函数参数个数也为3个,分别表示元素数值,索引,原数组,

因为是函数所以不能被break打断

最后说明一下,回头看上诉每个操作函数参数都是至少3个,其实在实际运用中,常常使用前一个或前两个参数