Vue中高阶函数的使用

常用的高阶函数：filter、map、reduce

举个例子:
const nums = [10, 20, 111, 222, 444, 40, 50]

一般写法

1、需求：取出所有小于100的数字

let newNums = []
 for (let n of nums) {
    if(n < 100) {
        newNums.push(n)
    }
}

2、需求：将所有小于100的数字进行转化，全部乘2

let new2Nums = []
for (let n of newNums) {
    new2Nums.push(n * 2)
}

3、需求：将所有new2Nums数字相加，得到最终的结果

let total = 0
for (let n of new2Nums) {
    total += n
}

引用高阶函数

1、filter

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
filter中的回调函数有一个要求：必须返回一个boolean值
true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
false：当返回false时，函数内部会过滤这次的n

let newNums = nums.filter(funtion (n) {
    return n < 100
})
//10,20,40,50

2、map

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

let new2Nums = newNums.map(funtion (n) {
    return n * 2
})
//20,40,80,100

3、reduce

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce作用对数组中所有的内容进行汇总

let total = new2Nums.reduce(funtion (preValue, n) {
    return preValue + n
}, 0)
//n为初始值
//240

过程：
第一次： preValue：0， n：20
第二次： preValue：20, n：40
第三次： preValue: 60, n：80
第四次： preValue: 140, n：100

*补充

1、链式写法

let total = nums.filter(funtion (n) {
    return n < 100
}).map(funtion (n) {
    return n * 2
}).reduce(funtion (preValue, n) {
    return preValue + n
},0)

2、箭头函数

let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n)