当前位置：手写数组高级API reduce和reduceRight
2020/11/17 09:18 分类： 技术交流 浏览：0
一、概述
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,写出优雅简洁健壮的代码。
赞 0
