以前我没得选，现在只想用 Array.reduce（下）-阿里云开发者社区

以前我没得选，现在只想用 Array.reduce（下）

2022-05-11 100

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 第一眼看 Array.reduce 这个函数总感觉怪怪的，用法也得花几分种才弄懂，懂了之后也不知道应用场景是啥。最近写项目的时候才慢慢对这个函数有更多的理解，可以算是 Array 类型下最强大的函数之一了。

normalize

在写 redux 的时候，我们有时可能会需要将数组进行 Normalization，比如

[{id: 1, value:1}, {id: 2, value: 2}]
=>
{
  1: {id: 1, value: 1}
  2: {id: 2, value: 2}
}
复制代码

使用 reduce 可以先给个初始值 {} 来存放，然后每次只需要将 id => object 就可以了：

export type TUser = {
  id: number;
  name: string;
  age: number;
}
type TUserEntities = {[key: string]: TUser}
function normalize(array: TUser[]) {
  return array.reduce((prev: TUserEntities, curt) => {
    prev[curt.id] = curt
    return prev
  }, {})
}
export default normalize
复制代码

用例

describe('normalize', () => {
  it('可以 normalize user list', () => {
    const users: TUser[] = [
      {id: 1, name: 'Jack', age: 11},
      {id: 2, name: 'Mary', age: 12},
      {id: 3, name: 'Nancy', age: 13}
    ]
    const result = normalize(users)
    expect(result).toEqual({
      1: users[0],
      2: users[1],
      3: users[2]
    })
  })
})
复制代码

assign

上面例子也只是对 number 做相加，那对象“相加”呢？那就是 Object.assign 嘛，所以用 reduce 去做对象相加也很容易：

function assign<T>(origin: T, ...partial: Partial<T>[]): T {
  const combinedPartial = partial.reduce((prev, curt) => {
    return { ...prev, ...curt }
  })
  return { ...origin, ...combinedPartial }
}
export default assign
复制代码

用例

describe('assign', () => {
  it('可以合并多个对象', () => {
    const origin: TItem = {
      id: 1,
      name: 'Jack',
      age: 12
    }
    const changeId = { id: 2 }
    const changeName = { name: 'Nancy' }
    const changeAge = { age: 13 }
    const result = assign<TItem>(origin, changeId, changeName, changeAge)
    expect(result).toEqual({
      id: 2,
      name: 'Nancy',
      age: 13
    })
  })
})
复制代码

虽然这有点脱裤子放屁，但是如果将数组的里的每个对象都看成 [middleState, middleState, middleState, ...]，初始值看成 prevState，最终生成结果看成成 nextState，是不是很眼熟？那不就是 redux 里的 reducer 嘛，其实也是 reducer 名字的由来。

concat

说了对象“相加”，数组“相加”也简单：

function concat<T> (arrayList: T[][]): T[] {
  return arrayList.reduce((prev, curt) => {
    return prev.concat(curt)
  }, [])
}
export default concat
复制代码

用例

describe('concat', () => {
  it('可以连接多个数组', () => {
    const arrayList = [
      [1, 2],
      [3, 4],
      [5, 6]
    ]
    const result = concat<number>(arrayList)
    expect(result).toEqual([1, 2, 3, 4, 5, 6])
  })
})
复制代码

functionChain

函数的相加不知道大家会想到什么，我是会想到链式操作，如 a().b().c()....，使用 reduce 实现，就需要传入这样的数组：[a, b, c]。

function functionChain (fnList: Function[]) {
  return fnList.reduce((prev, curt) => {
    return curt(prev)
  }, null)
}
export default functionChain
复制代码

用例

describe('functionChain', () => {
  it('可以链式调用数组里的函数', () => {
    const fnList = [
      () => 1,
      (prevResult) => prevResult + 2,
      (prevResult) => prevResult + 3
    ]
    const result = functionChain(fnList)
    expect(result).toEqual(6)
  })
})
复制代码

promiseChain

既然说到了链式调用，就不得不说 Promise 了，数组元素都是 promise 也是可以进行链式操作的：

function promiseChain (asyncFnArray) {
  return asyncFnArray.reduce((prev, curt) => {
    return prev.then((result) => curt(result))
  }, Promise.resolve())
}
export default promiseChain
复制代码

这里要注意初始值应该为一个 resolved 的 Promise 对象。

用例

describe('functionChain', () => {
  it('可以链式调用数组里的函数', () => {
    const fnList = [
      () => 1,
      (prevResult) => prevResult + 2,
      (prevResult) => prevResult + 3
    ]
    const result = functionChain(fnList)
    expect(result).toEqual(6)
  })
})
复制代码

compose

最后再来说说 compose 函数，这是实现 middeware /洋葱圈模型最重要的组成部分.

为了造这种模型，我们不得不让函数疯狂套娃：

mid1(mid2(mid3()))
复制代码

要构造上面的套娃，这样的函数一般叫做 compose，使用 reduce 实现如下：

function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }
  if (funcs.length === 1) {
    return funcs[0]
  }
  return funcs.reduce((aFunc, bFunc) => (...args) => aFunc(bFunc(...args)))
}
export default compose
复制代码

用例

describe('compose', () => {
  beforeEach(() => {
    jest.spyOn(console, 'log')
  })
  afterEach(() => {
    clearAllMocks()
  })
  it('可以 compose 多个函数', () => {
    const aFunc = () => console.log('aFunc')
    const bFunc = () => console.log('bFunc')
    const cFunc = () => console.log('cFunc')
    compose(aFunc, bFunc, cFunc)()
    expect(console.log).toHaveBeenNthCalledWith(1, 'cFunc')
    expect(console.log).toHaveBeenNthCalledWith(2, 'bFunc')
    expect(console.log).toHaveBeenNthCalledWith(3, 'aFunc')
  })
  it('可以使用 next', () => {
    const aFunc = (next) => () => {
      console.log('before aFunc')
      next()
      console.log('after aFunc')
      return next
    }
    const bFunc = (next) => () => {
      console.log('before bFunc')
      next()
      console.log('after bFunc')
      return next
    }
    const cFunc = (next) => () => {
      console.log('before cFunc')
      next()
      console.log('after cFunc')
      return next
    }
    const next = () => console.log('next')
    const composedFunc = compose(aFunc, bFunc, cFunc)(next)
    composedFunc()
    expect(console.log).toHaveBeenNthCalledWith(1, 'before aFunc')
    expect(console.log).toHaveBeenNthCalledWith(2, 'before bFunc')
    expect(console.log).toHaveBeenNthCalledWith(3, 'before cFunc')
    expect(console.log).toHaveBeenNthCalledWith(4, 'next')
    expect(console.log).toHaveBeenNthCalledWith(5, 'after cFunc')
    expect(console.log).toHaveBeenNthCalledWith(6, 'after bFunc')
    expect(console.log).toHaveBeenNthCalledWith(7, 'after aFunc')
  })
})
复制代码

总结

上面的例子仅仅给出了 reduce 实现的最常见的一些工具函数。

就像第2点说的不同类型和不同操作有非常多的组合方式，因此使用 reduce 可以玩出很多种玩法。希望上面给出的这些可以给读者带来一些思考和灵感，在自己项目里多使用 reduce 来减轻对数组的复杂操作。