ES5的数组方法reduce()详解及应用
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()呢？
- MapReduce作为一种大规模数据集并行运算的编程模型，reduce是其中主要思想之一。数组也是一种数据集，
reduce()方法相当是一种数据处理方式的封装（虽然此处并未比及大规模和并行运算）。 -
reduce()方法是一个高阶函数，嗯，通过回调函数和其他变形，我们可以玩很多玩意儿。 - 最直观的一点，就是
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); // 04. 结合箭头函数
以上的例子，我们都是用普通函数来构造 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) // 62. 将二维数组转化为一维
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关键字