高阶函数（filter/map/reduce）

高阶函数

---

1. 编程范式(1)

• 命令式编程
• 声明式编程

2. 编程方式(2)

• 面向对象编程(第一公民: 对象)
• 函数式编程(第一公民: 函数)

---

JavaScript 高级知识

初级方法

  const nums = [10, 20, 111, 222, 444, 40, 50]
  // 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 total = 0
  for (let n of new2Nums) {
    total += n
  }
  console.log(total)

高级方法(filter/map/reduce)

(回调函数有一个要求:必须返回一个 boolean 值)

1. filter 函数的使用

   true:函数内部会自动将这次的回调的 n 加入新的数组中
   false:函数内部会过滤掉这次的 n

  const nums = [10, 20, 111, 222, 444, 40, 50]
  // 1.需求: 取出所有小于 100 的数字
  let newNums = nums.filter(function (n) {
    return n < 100
  })
  console.log(newNums)

1. map 函数的使用

  // 2.将所有小于100的数字进行转化:全部 *2
  let new2Nums = newNums.map(function (n) {
    return n * 2
  })
  console.log(new2Nums)

3. reduce 函数的使用

   reduce 作用对数组中所有的内容进行汇总

  // 3.需求: 将所有的new2Nums数字相加, 得到的最终的结果
  let total = new2Nums.reduce(function (preValue, n) {
    return preValue + n
  }, 0)
  console.log(total)

  /*
           preValue  n
    第一次:    0     10
    第二次:   10     20
    第三次:   30     40
    第四次:   70     50
    第五次:   120    null
  */
  // total = 120

总体合并写法
------函数式编程------

  // 第一种写法
  let total = nums.filter(function (n) {
    return n < 100
  }).map(function (n) {
      return n * 2
  }).reduce(function (preValue, n) {
      return preValue + n
  })
  // 第二种写法
  let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n)
  console.log(total)