持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

reduce介绍

reduce()方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

包含四个参数：

• previousValue：上一次调用 callbackFn 时的返回值
• currentValue：数组中正在处理的元素
• currentIndex：数组中正在处理的元素的索引。
• array：当前数组

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

let result = arr.reduce((pre,cur) => {
  return pre + cur
})
result=15

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

let result = arr.reduce((pre,cur) => {
  return pre + cur
},10)
result=25

9种场景

1.求数组中的和

let sum = [1,2,3,4,5].reduce((pre,cur) => {
  return pre + cur
})

2.数组中成员是对象求和

let initialValue = 0
let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(
  (previousValue, currentValue) => previousValue + currentValue.x
  , initialValue
)

3.扁平化数组

let flatten = [[0, 1], [2, 3], [4, 5]].reduce((pre,cur) => {
  return pre.concat(cur)
},[])

4.计算属性出现的次数

let str = "aabbcskdkslasdsajdjdsaaaaaaaaadcddd1234564642114145";
let strArr = str.split('')

function fn(arr) {
  return arr.reduce((pre,cur) => {

    if(cur in pre) {
      pre[cur]++
    }else {
      pre[cur] = 1
    }

    return pre

  },{})
}

5.按属性对object分类

let people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objArr,attr) {
  return objArr.reduce((pre,cur) => {
    let key = cur[attr];
    if(!pre[key]) {
      pre[key] = []
    }
    pre[key].push(cur)
    return pre
  },{})
}

6.与数组对象中的某一项数组进行绑定

let friends = [{
  name: 'Anna',
  books: ['Bible', 'Harry Potter'],
  age: 21
}, {
  name: 'Bob',
  books: ['War and peace', 'Romeo and Juliet'],
  age: 26
}, {
  name: 'Alice',
  books: ['The Lord of the Rings', 'The Shining'],
  age: 18
}]

let allbooks = friends.reduce((pre,cur) => {
  return [...pre,...cur.books]
}
, ['Alphabet'])

7.数组去重

let array = [1,1,1,1,2,1,6,5,3,4]
function qc(arr) {
  return arr.sort().reduce((pre,cur) => {
    if(pre.length ===0 || pre[pre.length -1] !== cur) {
      pre.push(cur)
    }
  },[])
  return pre
}

8.按顺序执行Promise

function runPromiseInSequence(arr, input) {
  return arr.reduce(
    (promiseChain, currentFunction) => 

        promiseChain.then(currentFunction),
        Promise.resolve(input)

  )
}

// promise function 1
function p1(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 5)
  })
}

// promise function 2
function p2(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 2)
  })
}

// function 3  - will be wrapped in a resolved promise by .then()
function f3(a) {
return a * 3
}

// promise function 4
function p4(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 4)
  })
}

const promiseArr = [p1, p2, f3, p4]
runPromiseInSequence(promiseArr, 10)
  .then(console.log)   // 1200

9.功能性管道函数

const double = x => x + x
const triple = x => 3 * x
const quadruple = x => 4 * x

// 对功能函数进行封装
const pipe = (...functions) => {
    return input => functions.reduce((acc, fn) => {
      console.log(fn); 
      console.log(acc)
      fn(acc)},
    input)
}

const multiply6 = pipe(double, triple)