reduce _ 高阶函数 之 聚合运算

目录

reduce( )

reduce 原理 :

reduceRight ( )

---

reduce( )

---

+ 语法: 数组.reduce( function ( prev, item, index, arr ) { }, 初始值 )

=>  参数 1 : 回调函数 , 函数会根据 数组 中的成员进行 重复调用

 -> 第一个参数 ( prev ) : 初始值 或 每一次叠加后的结果

 -> 第二个参数 ( item ) : 每一项

 -> 第三个参数 ( index ) : 索引

 -> 第四个参数 ( arr ) : 原始数组

=> 参数 2 : 初始值 : 默认是 0 , 表示从什么位置开始 叠加

---

 + 作用: 进行 叠加累计 

---

// reduce( )
var arr = [ 10, 20, 30, 40, 50 ]
console.log('原始数组 : ', arr) // [10, 20, 30, 40, 50]
var res = arr.reduce(function r(prev, item) {
// 以 return 的形式书写每次的叠加条件
  return prev + item
}, 0)
console.log('返回值 : ', res)  // 150

reduce 原理 :

---

1. 准备了一个 初始值 , 按照你传递的 第二个参数 来定

  => 准备初始值  var init = 0

  => 第一次赋值  var init = 10

  => 第二次赋值  var init = 30

  => 第三次赋值  var init = 60

  => 第四次赋值  var init = 100

  => 第五次赋值  var init = 150

2. 根据 原始数组 来调用  r  回调函数

  => 第一次调用 r ( 0, 10, 0, 原始数组 ) , return 0 + 10, 把 返回值再次赋值给 init

  => 第二次调用 r ( 10, 20, 1, 原始数组 ) , return 10 + 20, 把 返回值再次赋值给 init

  => 第三次调用 r ( 30, 30, 2, 原始数组 ) , return 30 + 30, 把 返回值再次赋值给 init

  => 第四次调用 r ( 60, 40, 3, 原始数组 ) , return 60 + 40, 把 返回值再次赋值给 init

  => 第五次调用 r ( 100, 50, 4, 原始数组 ) , return 100 + 50, 把 返回值再次赋值给 init

3. 把最初始准备的变量 init 结果, 当做 reduce 的返回值

---

---

扩展 : 

reduceRight ( )

  reduceRight( ) 方法 与 reduce( ) 方法 相似 , 但累计的方式是 从后向前 操作 。在有些情况下 从前向后 累计 与 从后向前 累计 产生的结果可能 不同 。具体实例代码如下 ：

<script>
var arr = [1, 2, 3, 4];
var foo = arr.reduce(function (v1, v2) {
  return v1 - v2;
});
console.log(foo); // -8
var bar = arr.reduceRight(function (v1, v2) {
  return v1 - v2;
});
console.log(bar); // -2
</script>