JavaScript 中数组方法 reduce 的妙用之处

JavaScript 中数组方法 reduce 的妙用之处

Javascript数组方法中，相比map、filter、forEach等常用的迭代方法，reduce常常被我们所忽略

语法：

array.reduce(function(accumulator, arrayElement, currentIndex, arr), initialValue)

若传入初始值，accumulator首次迭代就是初始值，否则就是数组的第一个元素；后续迭代中将是上一次迭代函数返回的结果。所以，假如数组的长度为n，如果传入初始值，迭代次数为n；否则为n-1。

• 实际上reduce还有很多重要的用法，这是因为累加器的值可以不必为简单类型（如数字或字符串），它也可以是结构化类型（如数组或对象），这使得我们可以用它做一些其他有用的事情，比如：

将数组转换为对象
展开更大的数组
在一次遍历中进行两次计算
将映射和过滤函数组合
按顺序运行异步函数

将数组转化为对象

在实际业务开发中，你可能遇到过这样的情况，后台接口返回的数组类型，你需要将它转化为一个根据id值作为key，将数组每项作为value的对象进行查找

const userList = [
  {
    id: 1,
    username: 'john',
    sex: 1,
    email: 'john@163.com'
  },
  {
    id: 2,
    username: 'jerry',
    sex: 1,
    email: 'jerry@163.com'
  },
  {
    id: 3,
    username: 'nancy',
    sex: 0,
    email: ''
  }
];

使用 reduce 将数组转成对象：

function keyByUsernameReducer(acc, person) {
    return {...acc, [person.id]: person};
}
const userObj = userList.reduce(keyByUsernameReducer, {});
console.log(userObj);

ps：

acc是累机器，person是当前值，{}是初始值

{}累加数组里面的每一项，根据id为key,数组里的每一项为value

…acc是对象的解构赋值，数组里的每一项对象都会被解构赋值拷贝到新的对象上