JS中的reduce方法使用

学过JS数组中的reduce方法，一直很少用它，最近在网上看到一些博客，get到了reduce的用法，很多地方都可以用得到。

首先, 我们来看这个方法需要的参数:

arr.reduce(callback[, initialValue])

• 参数

  • callback（一个在数组中每一项上调用的函数，接受四个函数：）
    • previousValue（上一次调用回调函数时的返回值，或者初始值）
    • currentValue（当前正在处理的数组元素）
    • currentIndex（当前正在处理的数组元素下标）
    • array（调用reduce()方法的数组）
  • initialValue（可选的初始值。作为第一次调用回调函数时传给previousValue的值，默认为0）

直接看例子

• 求一个数字中数字的累加和

• 使用for实现:

  // 1.定义数组
  var numbers = [1, 2, 3, 4]
  
  // 2.for实现累加
  var total = 0
  for (var i = 0; i < numbers.length; i++) {
      total += numbers[i]
  }
  alert(total) // 10
  

• 使用forEach简化for循环

  • 相对于for循环, forEach更符合我们的思维(遍历数组中的元素)

  // 3.使用forEach
  var total = 0
  numbers.forEach(function (t) {
      total += t
  })
  alert(total)
  

• 使用reduce方法实现

  // 4.使用reduce方法
  var total = numbers.reduce(function (pre, cur) {
      return pre + cur
  })
  alert(total)
  

• 代码解析:

  • pre中每次传入的参数是不固定的, 而是上次执行函数时的结果保存在了pre中
  • 第一次执行时, pre为0, cur为1
  • 第二次执行时, pre为1 (0+1, 上次函数执行的结果), cur为2
  • 第三次执行时, pre为3 (1+2, 上次函数执行的结果), cur为3
  • 第四次执行时, pre为6 (3+3, 上次函数执行的结果), cur为4
  • 当cur为4时, 数组中的元素遍历完了, 就直接将第四次的结果, 作为reduce函数的返回值进行返回.

似乎和forEach比较没有太大的优势呢?

• 通过这个代码会发现, 不需要在调用函数前先定义一个变量, 只需要一个变量来接收方法最终的参数即可.

• 但是这就是优势吗? 不是, 优势在于reduce方法有返回值, 而forEach没有.

• 这算什么优势? 如果reduce方法有返回值, 那么reduce方法本身就可以作为参数直接传递给另外一个需要reduce返回值的作为参数的函数. 而forEach中你只能先将每次函数的结果保存在一个变量, 最后再将变量传入到参数中.

• 没错, 这就是最近非常流行的函数式编程. 也是为了几乎每个可以使用函数式编程的语言都有reduce这个方法的原因.

• 关于函数式编程, 不再本次课程的讨论之中, 只是看到了这个函数, 给大家延伸了一下而已.(后面有机会和大家分享函数式编程)

• initialValue

  • 其实就是第一次执行reduce中的函数时, pre的值.
  • 因为默认pre第一次执行时为0.

  扁平数组的例子

[1, [2, 3, [4, 5]]]  ------>    [1, 2, 3, 4, 5]

function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}