JavaScript数组的reduce()方法

参考文章:
Array.prototype.reduce() —— MDN

一、介绍

reduce() 方法对数组中的每个元素按顺序执行一个由您提供的 reducer 函数, 每一次运行 reducer 都会将先前元素的计算结果作为参数传入, 最后将结果 汇总为单个返回值

注意: reduce() 对于空数组是不会执行回调函数的.

二、语法

array.reduce( function(total, currentValue [, currentIndex, arr ]) [, initialValue ] )
参数 描述
function(total, currentValue, currentIndex, arr) 必需, 用于执行每个数组元素的 'reducer' 函数
initialValue 可选, 第一次调用函数的初始值
函数参数 描述
total 必需, 初始值, 或者计算结束后的返回值
currentValue 必需, 当前元素
currentIndex 可选, 当前元素的索引
arr 可选, 当前元素的数组对象

三、使用

3.1. 简单求和

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

let sum1 = arr.reduce(function(prev, cur) {
    return prev + cur
})

// 使用箭头函数优化

let sum2 = arr.reduce((prev, cur) => prev + cur)
console.log(sum1, sum2) // 15 15

3.2. 带初始值求和

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

let sum1 = arr.reduce(function(prev, cur) {
    return prev + cur
}, 99)

// 使用箭头函数的写法:

let sum2 = arr.reduce((prev, cur) => prev + cur, 99)
console.log(sum1, sum2) // 114 114

3.3. 计算每个元素出现次数

let arr = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

let arrResult = arr.reduce((pre, cur) => {
    if (cur in pre) {
        pre[cur]++
    } else {
        pre[cur] = 1
    }

    return pre
}, {})
console.log(arrResult)
// { Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }

3.4. 扁平化数组

let arr = [
    [1, 2],
    [3, 4], 5,
    [6, 7],
]

let newArr1 = arr.reduce(function(prev, cur) {
    return prev.concat(cur)
}, [])
console.log(newArr1) // [ 1, 2, 3, 4, 5, 6, 7]

// 使用箭头函数的写法:

let newArr2 = arr.reduce((prev, cur) => prev.concat(cur), [])
console.log(newArr2) // [ 1, 2, 3, 4, 5, 6, 7]

3.5. 数组去重

let arr = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']

let newArr = arr.reduce((prev, cur) => {
    if (prev.indexOf(cur) === -1) {
        prev.push(cur)
    }

    return prev
}, [])

console.log(newArr) //  [ 'a', 'b', 'c', 'e', 'd' ]
posted @ 2022-11-05 01:12  如是。  阅读(51)  评论(0编辑  收藏  举报