高阶函数的使用

案例

定义一个数组

const numbers = [15,222,19,87,321,109,66]

完成下面三个需求

• 取出所有小于100的数字
• 将取出的小于100的数字进行转化：*2
• 将所有转化的数字相加，得到最终的结果

第一种方式：使用for循环遍历数组（傻瓜式）

1.取出所有小于100的数字
let newNumbers = []
for(let i of numbers){
  if ( i < 100 ) {
    newNumbers.push(i);   
  }
}
2.需求：将所有小于100的数字进行转化：*2
let newNumbers2 = [];
for(let i of newNumbers){
  newNumbers2.push(i*2);
}
3.需求：将所有转化的数字相加，得到最终的结果
let totalNumber = 0;
for (let i of newNumbers2) {
  totalNumber += i;
}

第二种方式：使用高级函数，详细写法

1.取出所有小于100的数字
//filter函数的使用
//filter：回调函数有一个要求，必须返回一个boolean值
//true：当返回true时，函数内部会自动返回这次回调的你加入新的数组中
//false：当返回false时，函数内部会过滤这次的n
let newNums = numbers.filter(function (n) {
   return n < 100
});
2.将所有小于100的数字进行转化：*2
//map函数的使用
let new2Nums = newNums.map(function (n) {
   return n * 2
});
3.将所有转化的数字相加，得到最终的结果
//reduce函数的使用：两个参数，第一个是回调函数，第二个是初始值
//reduce作用：对数组中所有的内容进行汇总
 let total = new2Nums.reduce(function (preValue, n) {
return preValue + n
},0);

reduce执行过程演示

数组：['1','45','2',22]  
第一次：preValue:0   n:1
第二次：preValue:1   n:45
第三次：preValue:45  n:2
第四次：preValue:47  n:22
total 69

第三种方式：第二种方式代码还是显得过多，因此可以简写

直接使用函数 简洁写法
let totalNum = numbers.filter(function (n) {
  return n < 100
 }).map(function (n) {
   return n * 2
 }).reduce(function (previousValue,n) {
   return previousValue + n
 },0);

第四种方式：函数方式还可以写的更加简单，使用 =>

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