reduce()方法使用详解

reduce()方法使用详解

reduce()定义：
reduce()方法接受一个函数作为累加器，数组中的每一个值（从左到右）开始缩减，最终计算为一个值。
reduce()可以作为一个高阶函数，用于函数的compose（构成、组成）。
reduce()对于空数组不会执行回调函数。

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

参数	描述
function(total, currentValue, index, arr)	必须。用于执行每个数组元素的函数。
initiaValue	可选。传递给函数的初始值。不传的时候会把第一项作为初始值，但是第一项不会执行reduce方法

参数	描述
total	必须，初始值，或者计算结束后的返回值
currentValue	必须。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象

例子：1.对数组里面的数字进行四舍五入相加到一起

// 对数组里面的数字进行四舍五入相加到一起
var numbers = [15.5, 2.3, 1.1, 4.7];
function getSum(total, num) {
    return total + Math.round(num);
}
function myFunction(item) {
    const result = numbers.reduce(getSum, 0);
    console.log(result);
}

例子：2.使用reduce实现数组的map方法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。（1）
map() 方法按照原始数组元素顺序依次处理元素。（2）
注意： map() 不会对空数组进行检测。（3）
注意： map() 不会改变原始数组。（4）

• （1）
• （2）
• （3）因为reduce不会对空数组执行回调函数
• （4）

map函数需要接收一个方法用来处理传进来的数组的每一项，所以在这里需要使用reduce调用传进来的方法处理每一项

// map函数语法 array.map(function(currentValue, index, arr), thisValue)
// map函数的入参是一个函数和当前数组对象
Array.prototype.reduceMap = function(fun,thisArr=[]){
	let result = [];
	// 不是箭头函数，谁调用函数this就是谁，箭头函数的this是创建的位置的上下文 
	this.reduce((pre,current,index)=>{
		//	reduceMap的第二个入参用来修改第一个参数的this指向,但是如果在使用reduceMap时传进来的第一个参数是箭头函数，
		// 那么第二个参数修改第一个参数的this就会无效，箭头函数的this永远都是写他的那个地方的上下文环境，
		// 修改为function(){}就可以了
		// map函数的第一个参数是个函数，需要三个入参：当前值current，下标index，当前数组this
		result.push(fun.apply(thisArr,[current,index,this]))
		// 这里需要传一个值让reduce从this数组的第一项开始执行，不然就不会返回数组的第一个值
		// 这里只是使用到了current和index，没有使用return返回一个值，所以第一个pre会拿到[]，后面的pre都会是undefined
	},[]);
	return result;
}
const arr = [1,2,3,4,5,6,7];
arr.reduceMap((item,index,shuzu)=>{console.log(shuzu);return item*2})

Math.round()解析
Math.round()对数字进行四舍五入取值

1. 对于从-1到1取值，各范围结果示例

范围	结果	解释
[-1, -0.5)	-1	Math.round()函数作用是四舍五入，在对于正数在小数大于等于5的时候就进一
[-0.5, 0.5)	0	这时候0-499…舍去，归属于0，5-99…进一
[0.5, 1]	1	在负数的时候可以画一个坐标轴，同样的以5分成两边，5左边的属于左边那个小数字，5（包含5）右边的属于右边的数字，这里的判断和上面的正数保持一致