filter()、map()、reduce()函数的使用

高阶函数 filter,map,reduce 的使用

使用一个例子类说明 filter、map、reduce的使用及好处

需求： 1. 将数组小于100的挑选出来

需求： 2. 将挑选出来的数组的元素乘以 2

需求： 3. 把最终的数组中的元素相加

一、 用ES5基本语法来写

 const nums = [10, 15, 124, 118, 23, 121, 98.48]
// 1.需求 取出所有小于 100 的数字
let newNums = []
for (let n of nums) {
  if (n < 100) {
    newNums.push(n)
  }
}
console.log(newNums);

// 2. 需求  将小于100的数字 都 乘 2
let new2Nums = []
for (let n of newNums) {
  new2Nums.push(n * 2)
}
console.log(new2Nums);

// 3. 需求 将 new2Nums 数组中的数字 加起来
let result = 0
for (let n of new2Nums) {
  result += n
}
console.log(parseInt(result));

二、使用 filter、map、reduce 来写

// 1.需求 取出所有小于 100 的数字

// 使用高阶函数 filter / map / reduce
// 1. filter 中的参数是一个回调函数 有一个要求： 返回的必须是一个布尔值
// true: 当返回true时， 函数内部会自动将这次回调的 n 加入到新的数组中
// false： 当返回的是false， 函数内部会过滤掉这次的n
let newNums = nums.filter(function (n) { // n 表示 nums 数组中的元素
  return n < 100
})
console.log(newNums);

// 2. 需求  将小于100的数字 都 乘 2

// map函数的使用，  参数一个回调函数，  
// Array.map() 方法返回一个新数组，此方法可以以一个函数为参数，循环数组的每一个元素，函数将数组中的元素接收为单个参数。
let new2Nums = newNums.map(function (n) {
  return n * 2
})
console.log(new2Nums);

// 3. 需求 将 new2Nums 数组中的数字 加起来

// reduce函数的使用
//  reduce作用对数组中所有的内容进行汇总  第一个参数是 回调函数， 第二个参数是 初始化值
let result = new2Nums.reduce(function (preValue, n) {
  return preValue + n
}, 0)
console.log(parseInt(result));

使用链式编程 写出最简单的一行搞定的代码

// 使用高阶函数的链式编程来进行写：
let result = parseInt(nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n, 0))
 console.log(result);