vue 高阶函数用法

1.filter 对数组中每个元素进行遍历

要求：必须返回boolean值

当返回为true时，会将当前元素写入内部创建的新数组中，进行返回

当返回为false时，会跳过当前元素

let num = [10,20,30,40]
let newNum = num.filter(function(n){
   return n > 20 
})
console.log(newNum)
输出:[30,40]

2.map

说明：对数组中的元素依次遍历

将返回值写入内部创建的新数组

let new2Num = newNum.map(function(n){
   return n*2 
})
console.log(new2Num)
输出:[60,80]

3.reduce

功能：对数组内所有元素进行汇总

要求：至少传入两个参数，如下，第一个参数为处理函数，第二个参数为初始值

第一个参数中的preValue 是函数在上一次遍历时的返回值。若为第一次遍历，值为初始值

let new3Num = num2Num.reduct(function(preValue,n){
    return preValue+n;
},0)

例如 new2Num 在第一次遍历时   preValue=0，n=60    return 返回为60

在第二次遍历时preValue=60,n=80 return 返回为140

new3Num 的值为最终返回的140

 

高阶函数可进行链式操作，阅读性好，例如

let nums = [10,20,30,40]
let total = nums.filter(function(n){
    return n > 20
}).map(function(n){
    return n*2
}).reduce(function(preValue,n){
    return preValue+n
},0)
console.log(total)
输出：140

可以优化为

let nums = [10,20,30,40]
let total = nums.filter(n => n >20).map(n => n*2).reduce( (preVal, n) => preVal + n);
console.log(total)
输出：140