Array.prototype.reduce

March 11, 2022

Typescript 定义

interface Array<T> {
    // ... ...

    /**
     * 为数组中的所有元素（升序）调用给定回调函数。回调函数的返回值是累计的（accumulated）结果，这个累计值（callbackfn 回调函数的返回值）也会被入下一次回调作为该函数的第一个参数（previousValue）
     * @param callbackfn 一个接受最多四个参数的函数。reduce 方法对数组中的每一个元素都调用一次 callbackfn 函数
     * @param initialValue 如果指定了初始值（initialValue），那么这个初始值就会被用作累计值（accumulation）的初始值。对 callbackfn 函数的首次调用会提供这个值作为其第一个参数（previousValue）而不是数组第一个元素的值（如果没有提供初始值，则使用数组中的第一个元素作为初始值，并且 callbackfn 会跳过对数组的第一个元素的调用）
     */
    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue?: T): T;
    /**
     * Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
     * @param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
     * @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
     */
    reduce<U>(
        callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U,
        initialValue: U,
    ): U;

    /**
     * 为数组中的所有元素（降序）调用给定回调函数。回调函数的返回值是累计的（accumulated）结果，这个累计值（callbackfn 回调函数的返回值）也会被入下一次回调作为该函数的第一个参数（previousValue）
     * @param callbackfn 一个接受最多四个参数的函数。reduce 方法对数组中的每一个元素都调用一次 callbackfn 函数
     * @param initialValue 如果指定了初始值（initialValue），那么这个初始值就会被用作累计值（accumulation）的初始值。对 callbackfn 函数的首次调用会提供这个值作为其第一个参数（previousValue）而不是数组第一个元素的值（如果没有提供初始值，则使用数组中的第一个元素作为初始值，并且 callbackfn 会跳过对数组的第一个元素的调用）
     */
    reduceRight(
        callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T,
        initialValue?: T,
    ): T;
    /**
     * Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
     * @param callbackfn A function that accepts up to four arguments. The reduceRight method calls the callbackfn function one time for each element in the array.
     * @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
     */
    reduceRight<U>(
        callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U,
        initialValue: U,
    ): U;

    [n: number]: T;
}

提供初始值（initialValue）通常更安全，因为如果没有给定初始值，初始值就默认为数组的第一个元素。我们在回调函数中对这个首元素提供的 previousValue 进行不恰当操作可能导致报错
提供初始值回调函数就会对数组中的每一个元素进行调用，而且通常我们也想这么做

例子

修改自 MDN

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    console.log([currentIndex, currentValue, accumulator]); // 这里没有指定初始值，从下标为1的元素开始调用 => [1, 1, 0] [2, 2, 1] [3, 3, 3] [4, 4, 6]
    return accumulator + currentValue;
}); // => 10

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    console.log([currentIndex, currentValue, accumulator]); // 指定初始值，对每个元素都进行调用 =>  [0, 0, 10] [1, 1, 10] [2, 2, 11] [3, 3, 13] [4, 4, 16]
    return accumulator + currentValue;
}, 10); // => 20

求和

const sum = (...arr) => arr.reduce((acc, cur) => acc + cur, 0);
sum(1, 2, 3, 4); // => 10

二维数组转化为一维

const flatArray = (arr) => arr.reduce((a, b) => a.concat(b), []);
flatArray([
    [0, 1],
    [2, 3],
    [4, 5],
]); // => [0, 1, 2, 3, 4, 5]

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

const countNames = (names) =>
    names.reduce((allNames, name) => {
        name in allNames ? allNames[name]++ : (allNames[name] = 1);
        return allNames;
    }, {});
countNames(["Alice", "Bob", "Tiff", "Bruce", "Alice"]); // => {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

按属性对 object 分类

const groupBy = (objectArray, property) =>
    objectArray.reduce((acc, obj) => {
        let key = obj[property];
        if (!acc[key]) acc[key] = [];
        acc[key].push(obj);
        return acc;
    }, {});

let people = [
    { name: "Alice", age: 21 },
    { name: "Max", age: 20 },
    { name: "Jane", age: 20 },
];
groupBy(people, "age");
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

数组去重

const deduplication1 = (arr) =>
    arr.reduce((acc, cur) => {
        acc.indexOf(cur) === -1 && acc.push(cur);
        return acc;
    }, []);
deduplication1(["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"]); // => ['a', 'b', 'c', 'e', 'd']

const deduplication2 = (arr) =>
    arr.sort().reduce((init, current) => {
        (init.length === 0 || init[init.length - 1] !== current) && init.push(current);
        return init;
    }, []);
deduplication2([1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]); // => [1, 2, 3, 4, 5]