Js 数组reduce方法详解

一次面试时,被问到这个方法,没咋用过这个方法,所以没答上来.现在写一篇文章记录下这个方法的基本使用,以及进阶使用

1. 定义和用法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

2. 语法

/**
 * @param {Function} callback 为数组每一项执行该方法
 * @param {*} initialValue 初始值,作为函数第一次执行时的preveValue
 */
array.reduce(callback, initialValue)

/**
 * callback 函数接收四个参数 
 * @param {*} preveValue 上一次回调函数执行后的返回值 (必需参数)
 * @param {*} currentValue 当前遍历项 (必需参数)
 * @param {Number} currentIndex 调用reduce的array中的index (可选参数)
 * @param {Array} arr 调用reduce的array (可选参数)
 */
function callback(prevValue, currentValue, currentIndex, arr){}

使用 reduce 实现一个累加器

 function add(preveValue, currentValue){
    return preveValue + currentValue
}
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 不传initialValue
arr.reduce(add)     // 45

// 传initialValue
arr.reduce(add, 10)     // 55

注意: reduce 不能使用空数组调用,除非提供了默认值

reduce 进阶用法

计算数组中每个元素出现的次数

给初始值一个空对象用作 HashMap,每次调用判断当前元素是否在该 map 中,在就加 1,不在就赋值为 1

tips: Object.create(null) 可以创建一个没有原型的空对象

let arr2 = [1, 2, 3, 4, 5, 5, 5]

let res = arr2.reduce((prev, current) => {
	if (current in prev) {
		prev[current] += 1
	} else {
		prev[current] = 1
	}
	return prev
}, Object.create(null))

数组去重

let arr3 = [1, 2, 3, 4, 4, 1]
let newArr = arr3.reduce((prev, cur) => {
	if (!prev.includes(cur)) {
		return [...prev, cur]
	} else {
		return prev
	}
}, [])
console.log(newArr) // [1, 2, 3, 4]

将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

数组扁平化

多维数组,转一维数组

let arr4 = [3, 12, 1, 2, [3, 4, 4, [5, 4, 6, [8, 9, 7, 8, [9, 10, 11]]]]]
function flatArr(arr) {
    return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? flatArr(cur) : cur), [])
}
flatArr(arr4)