数组高阶函数的使用

1、filter(callbackfunction( ){ })

回调函数返回的是 boolean 值,true: 将元素存入一个新数组中,false: 丢弃该元素

 例:

  data:[10, 20, 100, 140]

需求:选出其中小于 100 的元素,并赋值给新数组 dataNum:[ ]

传统方式:用 for 循环遍历整个数组,每个元素地进行判断,再执行下一步操作

用 filter 实现:

 let dataNum = data.filter(function(n){
     
     return n < 100;
     
 })

ES6 箭头函数式写法:

 let dataNum = data.filter( n => { return n < 100 })

2、map(callbackfunction( ){ })

回调函数返回的是操作后的结果

例:

  data:[10, 20, 100, 140]

需求:将数组中每个元素进行乘以 2 的操作,得到新结果存到新数组 dataNum:[ ] 中

用 map 实现:

 let dataNum = data.map(function(n){
     
     return n*2;
     
 })

ES6 箭头函数式写法:

 let dataNum = data.map( n => { return n*2 })

总结:

filter和map的回调函数中的形参 n 表示数组中的每一个元素

这两个函数可以传入三个参数,但一般只用到两个:item 首位,index 第二位,array[] 末位

item:数组中的每一项

index:数组下标值

array[ ]:新的数组

3、reduce(callbackfunction(prevVal, n){ }, 0)

回调函数中一般要传入两个参数:prevVal 和 n

回调函数的返回的是执行操作的结果

prevVal:前一个/之前的值,一般会定为0放在函数末尾

n:现在的值

例:

 let data = [10, 20, 100, 140]

需求:将数组中的元素求和

用 reduce 来实现:

 let total = data.reduce( function( prev, n ){
 ​
     return n + prev;
     
 }, 0)

ES6 箭头函数式写法:

 let total = data.reduce( ( prev, n ) => {
 ​
     return n + prev;
     
 }, 0)

prev 是没有定义的,所以要在最末尾赋个值,n 代表数组中的每一项

return 语句一共执行了 data.length 次,这里是4次

第一次: return 10 + 0; return 的值变为prev = 10

第二次: return 20 + 10; return 的值变为prev = 30

第三次: return 100 + 30; return 的值变为prev = 130

第四次: return 140 + 130; return 的值变为prev = 270

没有第5次,要把 prev 的值 return 出去:270

猜你喜欢

转载自blog.csdn.net/michaelxuzhi___/article/details/105753901