从零开始学HTML&&CSS&&JavaScript（四）——JavaScript 之reduce的三大用法

js之reduce的三大用法

reduce简介以及理解

必看：

reduce(callback,initiaValue)会传入两个变量，回调函数(callback)和初始值(initiaValue)。
假设函数有个传入参数，prev和next，index和array。 Prev和next是你必须要了解的。
当没有传入初始值时，prev是从数组中第一个元素开始的，next是第二个函数。
但是当传入初始值（initiaValue）后,第一个prev将是initivalValue，next将是数组中的第一个元素。

在下面的代码和页面的显示效果中大家着重理清逻辑以及原理

1.统计数组中每个元素的个数

js部分代码如下:

			//1.统计数组中每个元素的个数
			var maxe;
			var max;
			var mine;
			var min;
			var arrx = ['a', 'c', 'b', 'b', 'a', 'd', 'd', 'd'];
			var countarrs = arrx.reduce(function(allarrs,arrx) {
				//判断arrx是不是在之前的元素中已经出现过
				//已经出现过
				if(arrx in allarrs) {
					allarrs[arrx]++;//arrx作为key值、对应的value+1、代表计数一次
					console.log("in-- -- -- -- -- -- -- -- -- -- - ");
					console.log(allarrs);
					console.log(arrx); 
					console.log(allarrs[arrx]);
			        console.log("in -- -- -- -- -- -- -- -- -- --");
				}
				//没有出现过
				else {
					allarrs[arrx] = 1;//arrx作为新key值、并且对应的值为1
					console.log("not in-----------------------");
					console.log(allarrs);
					console.log(arrx);
					console.log(allarrs[arrx]);
					console.log("not in-----------------------");
				}
				return allarrs;//将allarrs返回到allarrs作为下一次运算是时的值
			}, {});//{}让第一次运行是allarrs是一个对象
			//运算结束后结果会到countarrs中
			console.log(countarrs);
			var keys=Object.keys(countarrs);//获取所有的key值，此时所有的key值都在keys这个数组中
			max=countarrs[keys[0]];
			min=countarrs[keys[0]];
			mine=keys[0];
			maxe=keys[0];
			//console.log(keys);
			for (var i=0;i<keys.length;i++) {
				if(max<countarrs[keys[i]]){
					max=countarrs[keys[i]];
					maxe=keys[i];
				}
				if(min>countarrs[keys[i]]){
					min=countarrs[keys[i]];
					mine=keys[i];
				}
				//console.log(countarrs[keys[i]]);
			}
			console.log("最少的元素是："+mine);
			console.log("最少的元素的个数是："+min);
			console.log("最多的元素是："+maxe);
			console.log("最多的元素的个数是："+max);

在下面的页面效果显示中大家仔细看allarrs、arrx、allarrs[arrx]等值的变化

在页面的运行效果如下:

2.数组求和

js代码如下:

			// 2.数组求和
			var arr = [1,5,8,6,15,78,65,25,48,55]
			var sum = arr.reduce(function(total,currentValue){
				console.log("---------start---------------");
				console.log(total);
				console.log(currentValue);
				console.log(total+currentValue);
				console.log("-------end------------------");
			  	return total+currentValue;
			});
			console.log(sum);//306
			var eachSum = 0;
			//用forEach循环得到累加的结果进行验证
			arr.forEach(function(currentValue){
			  	eachSum += currentValue;
			})
			console.log(eachSum);//306

页面上的代码效果如下:

3.合并二维数组

js主要代码如下:

//			3.合并二维数组
			var twoArr = [['mu','zi'],['dig','big'],['lucky','jiji']];
			var oneArr = twoArr.reduce(function(total,currentValue){
				console.log("---------start---------------");
			  	console.log(total);
				console.log(currentValue);
				console.log(total.concat(currentValue));
				console.log("---------end-----------------");
			  return total.concat(currentValue);
			})
			console.log(oneArr);//["mu", "zi", "dig", "big", "lucky", "jiji"]

在页面上的代码运行效果如下: