ES5的数组方法reduce()详解及应用

reduce这个词本意是减少、缩小，在函数式编程语言里，也被称为归约。简单来说，就是一种化简行为，它会对序列进行适当合并，直到列表只剩下一个元素（比如求和运算、平均值运算）。所以，数组对象方法reduce()的最简单用法也是这些化简运算。当然啦，它能做的不止这些。

一、 一个简单的例子

我们来做一个数组求和运算：
如果用 for循环方式，实现如下：

var sum1_ = 0;
for(var i=0; i<array1.length; i++){
    sum1_ += array1[i];
}
console.log(sum1_); // 10

如果用forEach 方式，实现如下：

var sum1_2 = 0;
function callback_2(item){
    sum1_2 += item;
}
array1.forEach(callback_2);
console.log(sum1_2); // 10

以上两种我们都比较熟悉，那如果是用今天主角reduce方法实现的话：

const array1 = [1, 2, 3, 4];
function callback(total, num) {
    return total + num;
}
var sum1 = array1.reduce(callback);
console.log(sum1); // 10

比较以上三种方式，直观上代码行数没有变少，性能和效率上还没有去实践，未知。
那为什么还要使用reduce()呢？

  1. MapReduce作为一种大规模数据集并行运算的编程模型，reduce是其中主要思想之一。数组也是一种数据集，reduce()方法相当是一种数据处理方式的封装（虽然此处并未比及大规模和并行运算）。
  2. reduce()方法是一个高阶函数，嗯，通过回调函数和其他变形，我们可以玩很多玩意儿。
  3. 最直观的一点，就是reduce()方法和箭头函数配合，可以写出简洁（逼格高？）的代码。

二、reduce 本质

reduce 本质上，可以看做是三种运算的合成：遍历、变形、累积。
比如下面的例子：

var arr = [1, 2, 3, 4];
var handler = function (newArr, x) {
  newArr.push(x * x);
  return newArr;
};

arr.reduce(handler, []); // [1, 4, 9, 16]

首先，reduce 遍历了原数组（所以说它能够取代map方法，这个后表）；其次，reduce对原数组的每个成员进行了 变形 （上例是加* x）；最后，把它们累积起来（上例是push方法）。
大家可以以此类推下数组求和那个例子。

三、reduce的基本语法

1. reduce语法

reduce的语法如下：

arr.reduce(callback[, initialValue])

callback - 必须。执行数组中每个值的函数，一般也被称作reducer函数;
initialValue - 可省略。首次调用callback时的 callback函数的第一个参数值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

2. callback定义

其中的callback()函数一般定义如下：

callback(accumulator, currentValue[, currentIndex, array])

accumulator - 累计器。更准确说是上一次回调时返回的累计值，或者是initialValue值（reduce()函数提供了initialValue，且是首次调用回调时）；
currentValue - 当前值。即数组中正在处理的元素；
currentIndex - 当前索引。即数组中正在处理的当前元素的索引。（如果提供了initialValue，其实索引为0，否则为1）；
array - 调用reduce()的数组；
返回值 - 函数累计处理的结果。

3. initialValue 的影响

在reduce()方法中，initialValue是可缺省的。但要注意缺省时造成的影响。

（1）遍历次数
reduce()首次调用callback时，callback的第一个参数会采用initialValue值。
如果没有提供initialValue值，则将使用数组中的第一个元素，这将会减少一次遍历。
比如下面的例子：

const array2 = [1, 2, 3, 4];
function callback2(total, item, index) {
    console.log("当前累计="+total+" ， " + "当前元素=" + item + " ，" + "当前索引="+ index);
    return total + item;
}
var sum2 = array2.reduce(callback2);
console.log(sum2); // 10

上面的reduce(callback2)是没有带入初始值的，最终的遍历结果如下。开始索引从1开始，共执行3次。

当前累计=1 ， 当前元素=2 ，当前索引=1
当前累计=3 ， 当前元素=3 ，当前索引=2
当前累计=6 ， 当前元素=4 ，当前索引=3

当我们带入初始值0时，执行如下代码：

var sum2_ = array2.reduce(callback2, 0);
console.log(sum2_); // 10

可以看到reduce(callback2, 0)是带入初始值后，开始索引从0开始，共执行4次。

当前累计=0 ， 当前元素=1 ，当前索引=0
当前累计=1 ， 当前元素=2 ，当前索引=1
当前累计=3 ， 当前元素=3 ，当前索引=2
当前累计=6 ， 当前元素=4 ，当前索引=3

（2）当遇到空数组
在没有初始值的空数组上调用 reduce 将报错Uncaught TypeError: Reduce of empty array with no initial value，具体如下：

const array2_2 = [];
array2_2.reduce(callback2); // 报错 Uncaught TypeError: Reduce of empty array with no initial value

此时，如果有带入初始值，则能正常调用。所以建议，最好给出初始值。
当然，要根据你的具体计算规则来设置初始值（比如累加用0，累乘用1）.

var sum2_2 = array2_2.reduce(callback2, 0);
console.log(sum2_2); // 0

4. 结合箭头函数

以上的例子，我们都是用普通函数来构造 callback，当然也可以使用箭头函数，在写法上会更简洁明朗。
不熟悉箭头函数的，可以点击此处回顾。

[1, 2, 3, 4, 5, 6, 7, 8, 9].reduce((total, item) => total + item), 0); // 45
[1, 2, 3, 4, 5].reduce((total, item) => total * item), 1); // 120

四、reduce方法的具体应用

除了上面常用到的数组的累加和累乘计算方式，reduce还可以做很多事情。

1. 累加对象数组里的值

var ini = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (acc, cur) => acc + cur.x
    ,ini
);
console.log(sum) // 6

2. 将二维数组转化为一维

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 ( acc, cur ) => acc.concat(cur),
 []
);
console.log(flattened); // [0, 1, 2, 3, 4, 5]

3. 数组去重

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=>{
    if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]

4. 计算数组中每个元素出现的次数

知识点：in操作符用来判断某个属性属于某个对象，可以是对象的直接属性，也可以是通过prototype继承的属性。

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce((allNames, name)=>{ 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
console.log(countedNames); // { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

5. 按属性对object分类

这个有时候在前端数据重组时很有用，曾经用for循环方式封装过这样的功能函数。

var people = [
  { name: 'Alice', label: 'Doctor' },
  { name: 'Max', label: 'Teacher' },
  { name: 'Jane', label: 'Doctor' }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'label');
console.log(groupedPeople);

// {
//  Doctor: [
//      {name: "Alice", label: "Doctor"}
//      {name: "Jane", label: "Doctor"}
//  ],
//  Teacher: [
//      {name: "Max", label: "Teacher"}
// ]

拓展：把数组对象，根据对象的属性，做成对象数组。

var people = [
  { name: 'Alice', label: 'Doctor' },
  { name: 'Max', label: 'Teacher' },
  { name: 'Jane', label: 'Doctor' }
];

   function  groupByKey(objectArray, property) {
      return objectArray.reduce(function (acc, obj) {
        let keys = [];
        if (property) keys = [property];
        else keys = Object.keys(obj);
        for(const key of keys){
          if (!acc[key]) {
            acc[key] = [];
          }
          acc[key].push(obj[key]);
        }
        
        return acc;
      }, {});
    }

var groupedPeople1 = groupBy(people, 'label');
console.log(groupedPeople);
// { label:  ["Doctor", "Teacher", "Doctor"] }


var groupedPeople1 = groupBy(people);
console.log(groupedPeople);
//{ label: (3) ["Doctor", "Teacher", "Doctor"]
//name: (3) ["Alice", "Max", "Jane"] }

6. 使用拓展运算符，合并对象数组的数组

知识点：拓展运算符是三个点...，能把数组或类数组对象展开成一系列用逗号隔开的值。

// friends - 对象数组
// 其中 "books"属性 -  书籍清单
var friends = [{
  name: '金庸',
  books: ['笑傲江湖', '倚天屠龙记'],
  age: 21
}, {
  name: '',
  books: ['W小李飞刀', '绝代双骄'],
  age: 26
}, {
  name: '梁羽生',
  books: ['七剑下天山', '白发魔女传'],
  age: 18
}];

// allbooks - 所有的书籍清单，包含引入初始值
var allbooks = friends.reduce(function(prev, curr) {
  return [...prev, ...curr.books];
}, ['三侠五义']);

console.log(allbooks); //  ["三侠五义", "笑傲江湖", "倚天屠龙记", "W小李飞刀", "绝代双骄", "七剑下天山", "白发魔女传"]

7. 功能型函数管道

emmmm..这个有点难懂，自个也没有很清晰的分析明白。但也贴出来，后续再来倒腾下。

// 设置几个运算函数
const double = x => x + x;
const triple = x => 3 * x;
const quadruple = x => 4 * x;
const square = x => x * x;
const cube = x => x * x * x;


// 定义管道
const pipe = (...functions) => input => functions.reduce(
    (acc, fn) => fn(acc),
    input
);

// 设置管道
const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);

// 运行结果
console.log(multiply6(6)); // 36
console.log(multiply9(9)); // 81
console.log(multiply16(16)); // 256
console.log(multiply24(10)); // 240

五 浏览器兼容性

看起来兼容性还可以，IE9以下不兼容系列。


图片来自MDN

参考资料：
Array.prototype.reduce()，本文的例子都来自此MDN文档。
Reduce 和 Transduce 的含义
JavaScript高级程序设计(七)：JavaScript中的in关键字

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,445评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,889评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,047评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,760评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,745评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,638评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,011评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,669评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,923评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,406评论 4赞 320
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,995评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2赞 342