手写数组高级API reduce和reduceRight

一、概述
reduce() 和reduceRight() 都是JavaScript中数组非常核心的API，也可以算是数组最复杂，功能最强大的api了，那么下面老师给大家讲解一下这两个API的用法，以及手写实现。

二、用法
reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。简单的说，就是：计算、汇总、收敛。

reduceRight() 功能和reduce是类似的，只不过迭代的过程是从右往左的。reduceRight() 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

语法：

arr.reduce(function (累加器, 当前值, 索引, 源数组) {

/* … */

}, 初始值)

三、使用场景
reduce()的功能非常强大，我们来看看下面的使用场景。

数组求和：

let arr = [1, 2, 3, 4]

let ret = arr.reduce(function (pre, cur, index, arr) {

return pre + cur;

}, 0)

console.log(‘上一次的值:’, pre, ‘当前值:’, cur, ‘当前索引:’, index, ‘数组本身:’, arr)

数组求平均值：

// 如果没有给初始值0 pre=第一个元素的值 cur等于第二个元素 相当于循环过程少一次

let ret = arr.reduce(function (pre, cur, index, origin) {

let sum = pre + cur

if (index === origin.length - 1) {

return sum / origin.length

}

return sum

}, 0)

console.log(ret)

reduceRight()功能也是类似的，只不过迭代的过程是从右到左

// 从右侧往左侧算

let ret = arr.reduceRight(function (pre, cur, index, origin) {

let sum = pre + cur

if (index === 0) {

return sum / origin.length

}

return sum

}, 0)

console.log(ret)

数组去重

var newArr = arr.reduce((prev, cur) => {

prev.indexOf(cur) === -1 && prev.push(cur);

return prev;

}, []);

扁平数组

// 偏平数组

var arr = [[‘a’, ‘b’], [‘c’, ‘d’, ‘e’], [‘f’, [‘g’, ‘h’, ‘i’]]]

var newArr = function (arr) {

return arr.reduce((pre, cur) => {

pre.concat(Array.isArray(cur) ? newArr(cur) : cur)

}, [])

}

console.log(newArr(arr))

reduce的使用场景非常多，我就不一一列举了，大家赶紧去尝试吧。

四、手写实现
手写实现reduce

// 手写reduce 【完整版本】

Array.prototype.myReduce = function (reducer, initialVal) {

let i = 0;

if (initialVal == undefined) {

initialVal = this[0]

i = 1;

}

for (; i < this.length; i++) {

initialVal = reducer(initialVal, this[i], i, this)

}

return initialVal

}

let arr = [1, 2, 3, 4]

let ret = arr.myReduce(function (pre, cur, index, origin) {

console.log(‘上一次收敛返回累加的值:’, pre, ‘当前值:’, cur, ‘当前索引:’, index, ‘数组本身:’, origin)

return pre + cur

})

console.log(‘结果：’, ret)

手写实现 reduceRight

/* 手写实现reduceRight */

Array.prototype.myReduceRight = function (reducer, initialVal) {

let initialVal

for (let i = this.length - 1; i >= 0; i–) {

// console.log(this[i])

initialVal = reducer(initialVal, this[i], i, this)

}

return initialVal

}

let arr1 = [1, 2, 3, 4]

let ret1 = arr1.myReduceRight(function (pre, cur, index, origin) {

console.log(‘上一次返回收敛的值:’, pre, ‘当前值:’, cur, ‘当前索引:’, index, ‘数组本身:’, origin)

return pre + cur

}, 0)

console.log(ret1)

好了，以上就是JavaScript中数组的高级API reduce和reduceRight的使用和手写实现，大家多动手训练，熟练掌握用法和实现原理，可以在实际项目中使用这两个高级API,写出优雅简洁健壮的代码。