js reduce()方法的基本使用

 最基本简单的使用 => 求和、相乘：

let arr = [1,2,3,4,5]
let sum =  arr.reduce(function(prev, cur, index, arr) {
  console.log('prev', prev, 'cur', cur, 'index', index);
  return prev + cur
})
console.log('arr', arr, 'sum', sum);
// prev 1 cur 2 index 1
// prev 3 cur 3 index 2
// prev 6 cur 4 index 3
// prev 10 cur 5 index 4
// arr (5) [1, 2, 3, 4, 5]0: 11: 22: 33: 44: 5length: 5[[Prototype]]: Array(0) sum 15

let arr2 = [1, 2, 3, 4, 10]
let sum2 = arr2.reduce((x, y) => {
  console.log('x: ', x, 'y: ', y);
  return x + y
})
// x:  1 y:  2
// x:  3 y:  3
// x:  6 y:  4
// x:  10 y:  10
// sum2:  20
console.log('sum2: ', sum2);  // 20

let mul = arr2.reduce((x, y) => {
  console.log('x: ', x, 'y: ', y);
  return x * y;
})
// // x:  1 y:  2
// // x:  2 y:  3
// // x:  6 y:  4
// // x:  24 y:  10
// // mul 240
console.log('mul', mul); // 240

小结1：

    // let arr = [1,2,3,4,5]

    // let sum =  arr.reduce(function(prev, cur, index, arr) {

    //   console.log('prev', prev, 'cur', cur, 'index', index);

    //   return prev + cur

    // })

    第一个参数 prev(必需)：上一次调用回调返回的值，第一次初始值是数组的第一项。如上述例子，prev就是1，第二次就是 prev + cur 的结果；

    第二个参数 cur(必需)：当前数组中被处理的元素，第一次是数组的第二项。如上述例子，cur是 2，第二次就是 3；

    第三个参数 index(可选)：当前被处理元素在数组中的索引。如上述例子，index第一次是 1，第二次是 2；

    第四个参数 arr(可选)：调用 reduce()方法的数组。如上述例子，arr就是 [1, 2, 3, 4, 5]。

    let arr2 = [1, 2, 3, 4, 10]

    1、eg1:

    let sum2 = arr2.reduce((x, y) => {

      console.log('x: ', x, 'y: ', y);

      return x + y

    })

      第一次    x:  1 y:  2

      第二次    x:  3 y:  3

      第三次    x:  6 y:  4

      第四次    x:  10 y:  10

    运行结果是最后一次循环的x 和 y 的值相加；  sum2 为 20

    2、eg2:

    let mul = arr2.reduce((x, y) => {

      console.log('x: ', x, 'y: ', y);

      return x * y;

    })

      第一次    x:  1 y:  2

      第二次    x:  2 y:  3

      第三次    x:  6 y:  4

      第四次    x:  24 y:  10

    运行结果是最后一次循环的x 和 y 的值相乘；  mul 为 240

    注意：reduce() 方法接收一个函数作为累加器，数组中的每个元素（从左到右）将有该函数执行一次。

    累加器初始值为函数的第一个参数，然后将每个元素作为参数调用该函数，最后返回累加器的最终值。

reduce的其他应用

1、计算数组中每个元素出现的次数

let fruits = ['apple', 'orange', 'banana', 'orange', 'grape', 'persimmon']
let result = fruits.reduce((prev, cur) => {
  //prev：累加器的当前值，在第一次调用时等同于提供的初始值（在这里是一个空对象）。
  // cur：数组中正在处理的当前元素。
  if (cur in prev) {  // 如果当前元素 cur 作为键存在于累加器对象 prev 中，就将其对应的值增加 1。这用于统计数组中每个元素出现的次数。
    prev[cur]++  
  } else {  // 如果 cur 不存在于 prev 对象中，就在 prev 对象中以 cur 为键创建一个新属性，并将值设置为 1。这表示该元素在数组中首次出现。
    prev[cur] = 1    
  }
  return prev
}, {})
console.log('新组合', result);  // {apple: 1, orange: 2, banana: 1, grape: 1, persimmon: 1}

  // 1. 由于设置了迭代初始值，p个re的第一个值是一空对象，此时name为Alice，然后进行判断，发现在pre中没有Alice属性，所以就将Alice对应的属性值赋为1。

  // 2. 后面没有重复的是一样的道理，如果碰到重复值，就会将该属性值加1，这样就能计算元素重复的次数了。

  // console.log('prev', prev);  // {}

2、 数组去重

let arr2 = [1,2, 3, 5, 3, 2, 3, 4, 5]
let newArr = arr2.reduce((prev, cur) =>{
  console.log('prev', prev); //没有return时，第一次是 []，后面都是undefined
  if(!prev.includes(cur)) {
    return prev.concat(cur)
  }else {
    return prev
  }
}, [])
console.log('newArr', newArr);
// prev []
// prev [1]
// prev (2) [1, 2]
// prev (3) [1, 2, 3]
// prev (4) [1, 2, 3, 5]
// prev (4) [1, 2, 3, 5]
// prev (4) [1, 2, 3, 5]
// prev (4) [1, 2, 3, 5]
// prev (5) [1, 2, 3, 5, 4]
// newArr (5) [1, 2, 3, 5, 4]

3、将二维数组转成一维数组

let arr3 = [[1, 2], [3, 4], [5, 6]]
let newArr3 = arr3.reduce((prev, cur) => {
  // console.log('prev3',prev);
  return prev.concat(cur)
}, [])
console.log('newArr3',newArr3); // newArr3 (6) [1, 2, 3, 4, 5, 6]

4、将多维数组转成一维数组 

let arr4 = [[1, 2], [3, 4], [5, 6,[7,8,9]]]
let newArr4 = (arr4) => {
  return arr4.reduce((prev, cur) => prev.concat(Array.isArray(cur) ? newArr4(cur) : cur), [])
}
console.log('newArr4', newArr4(arr4));  // newArr4 (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

 5、对象里的属性求和

let arr5 = [
  {name: 'Alice', age: 20},
  {name: 'Bob', age: 25},
  {name: 'Charlie', age: 30}
]
let sum5 = arr5.reduce((prev, cur) => {
  return prev + cur.age
}, 0)
console.log('sum5', sum5);  // sum5 75

6、按属性对Object分类

let arr6 = [
  {name: 'Alice', age: 20, gender:'male'},
  {name: 'Bob', age: 25, gender:'male'},
  {name: 'Charlie', age: 30, gender: 'female'},
  {name: 'David', age: 35, gender: 'female'}
]
const groupBy = (arr, prop) => {
  return arr.reduce((prev, cur) => {
    let key = cur[prop]
    // console.log('key: ', key);  // 2 key:  male   2 key:  female
    // console.log('prev[key]', prev[key]);
    if(!prev[key]) {
      prev[key] = []
    }
    prev[key].push(cur)
    return prev
  }, {})
}
let groupedArr = groupBy(arr6, 'gender')
console.log('groupedArr', groupedArr);  // {male: Array(2), female: Array(2)}
// 运行结果：
// groupedArr 
// {male: Array(2), female: Array(2)}
// female
// : 
// (2) [{…}, {…}]
// male
// : 
// (2) [{…}, {…}]

注：后面有新的应用会push上来。