前言
在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)
结果
一般适用于需要处理数组中每个元素的情况,如初始化数组
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)
结果
一般适用于筛选数组中满足某个条件的元素
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)
结果
没有填写初始值时,默认为数组的第一个元素值,所以循环就会直接从索引为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)
结果
填写初始值后,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)
结果
一般就是将其当作for循环使用,效果和for大致相同
总结
map、filter、reduce 方法
相同点
1.都不会改变原数组
2.都需要借助return完成操作
4.存在返回值
不同点
map、filter只有一个操作函数,其中函数内部参数个数为3个,分别表示元素数值,索引,原数组
reduce 存在两个参数,一个操作函数(包含4个参数,分别为前累计值,元素数值,索引,原数组),另一个数值参数表示操作的初始值(可选)默认为数组中的第一个元素值
单独说forEach
forEach可以看作一个函数式的for循环,内部函数参数个数也为3个,分别表示元素数值,索引,原数组,
因为是函数所以不能被break打断
最后说明一下,回头看上诉每个操作函数参数都是至少3个,其实在实际运用中,常常使用前一个或前两个参数