Javascript数组方法reduce的妙用之处分享

前言

Javascript数组方法中，相比map、filter、forEach等常用的迭代方法，reduce常常被我们所忽略，今天一起来探究一下reduce在我们实战开发当中，能有哪些妙用之处，下面从reduce语法开始介绍。

语法

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

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

比如实现数组 arr = [1,2,3,4] 求数组的和

let arr = [1,2,3,4];arr.reduce(function(pre,cur){return pre + cur}); // return 10

实际上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: '' }];

如果你用过lodash这个库，使用_.keyBy这个方法就能进行转换，但用reduce也能实现这样的需求。

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

将小数组展开成大数组

试想这样一个场景，我们将一堆纯文本行读入数组中，我们想用逗号分隔每一行，生成一个更大的数组名单。

const fileLines = [ 'Inspector Algar,Inspector Bardle,Mr. Barker,Inspector Barton', 'Inspector Baynes,Inspector Bradstreet,Inspector Sam Brown', 'Monsieur Dubugue,Birdy Edwards,Inspector Forbes,Inspector Forrester', 'Inspector Gregory,Inspector Tobias Gregson,Inspector Hill', 'Inspector Stanley Hopkins,Inspector Athelney Jones'];function splitLineReducer(acc, line) { return acc.concat(line.split(/,/g));}const investigators = fileLines.reduce(splitLineReducer, []);console.log(investigators);// [// "Inspector Algar",// "Inspector Bardle",// "Mr. Barker",// "Inspector Barton",// "Inspector Baynes",// "Inspector Bradstreet",// "Inspector Sam Brown",// "Monsieur Dubugue",// "Birdy Edwards",// "Inspector Forbes",// "Inspector Forrester",// "Inspector Gregory",// "Inspector Tobias Gregson",// "Inspector Hill",// "Inspector Stanley Hopkins",// "Inspector Athelney Jones"// ]