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