## 定义和用法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
注意: reduce() 对于空数组是不会执行回调函数的。
## 浏览器支持
|方法|Chrome|Edge|Firefox|Safari|Opera|
|:-:|:-:|:-:|:-:|:-:|:-:|
|reduce()|Yes|9.0|3.0|4|10.5|
## 语法
```
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
```
## 基本用法
基本的数值运算，例如求和：
```
var numbers = [65, 44, 12, 4];
numbers.reduce(function(total, currentValue) {
return total + currentValue;
});
```
[运行一下](https://xmwarrior.github.io/pages/reduce方法应用技巧/index.html#math-add)
## 进阶应用
#### 数组转换为对象
```
var arr = [{
n: "小明",
a: 18,
s: "男"
}, {
n: "小红",
a: 17,
s: "女"
}];
arr.reduce(function(total, currentValue, currentIndex) {
total[currentValue.n] = {
age: currentValue.a,
sex: currentValue.s
};
return total;
}, {})
```
[运行一下](https://xmwarrior.github.io/pages/reduce方法应用技巧/index.html#object-transform)
#### 链式调用
```
let pipe = (function() {
return function(value, context) {
context = context || window;
let methods = [];
let oproxy = new Proxy({}, {
get(target, methodName) {
if(methodName === 'get') {
return methods.reduce((val, fn) => fn(val, context), value);
} else {
methods.push(context[methodName]);
return oproxy;
}
}
});
return oproxy;
}
})();
let obj = {
double: val => val * 2,
pow: val => val * val
}
pipe(4, obj).double.pow.get //64
```
[运行一下](https://xmwarrior.github.io/pages/reduce方法应用技巧/index.html#pipe-function)
copyright @ xmwarrior
相关文章：
- ES6数组reduce()方法详解及高级技巧 2022-12-23
- JS 数组reduce()方法详解及高级技巧 2022-12-23