reduce方法应用技巧_白泊_前端开发者

定义和用法

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
注意: reduce() 对于空数组是不会执行回调函数的。

浏览器支持

方法 Chrome Edge Firefox Safari Opera
reduce() Yes 9.0 3.0 4 10.5
方法 Chrome Edge Firefox Safari Opera 方法 Chrome Edge Firefox Safari Opera 方法 Chrome Edge Firefox Safari Opera reduce() Yes 9.0 3.0 4 10.5 reduce() Yes 9.0 3.0 4 10.5 reduce() Yes 9.0 3.0 4 10.5

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

基本用法

基本的数值运算,例如求和:

var numbers = [65, 44, 12, 4];
numbers.reduce(function(total, currentValue) {
	return total + currentValue;
});

var numbers = [65, 44, 12, 4];
numbers.reduce(function(total, currentValue) {
return total + currentValue;
});

运行一下

运行一下

进阶应用

数组转换为对象

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;
}, {})

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;
}, {})

运行一下

运行一下

链式调用

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

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

运行一下

运行一下

copyright @ xmwarrior

» 本文来自:前端开发者 » 《reduce方法应用技巧_白泊_前端开发者》
» 本文链接地址:https://www.rokub.com/73615.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!