Array内置方法reduce() 详解

[Geek-James]

一.Array.reduce() 基本使用

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

语法:

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

reducer 函数接收4个参数:

• Accumulator (acc) (累计器)
• Current Value (cur) (当前值)
• Current Index (idx) (当前索引)
• Source Array (src) (源数组)

callback

执行数组中每个值的函数，包含四个参数：

accumulator

累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。

currentValue

数组中正在处理的元素。
currentIndex可选
数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则为1。

array可选

调用reduce()的数组

initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

实例1:求一维数组中的数据之和

const initialValue = 0;
 const arr = [1, 2, 3, 4, 5, 6];
        const result = arr.reduce((sum, current) => sum + current, initialValue);
        console.log(result); // 21

注意点1:如果数组为空,那么必须传入一个initialValue,否则会报TypeError

 const initialValue = 0;
        const arr = [];
        const result = arr.reduce((sum, current) => sum + current,initialValue);
        console.log(result);  //0

注意点2：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

const arr = [1,2,3,4,5];
const result = arr.reduce((sum, current) => sum + current);
console.log(result);  //15

实例2 累加对象数组里的值

注意点: 要累加对象数组中包含的值，必须提供初始值，以便各个item正确通过你的函数。

const initialValue = 0;
const arrayData = [
    { name: 'james', finished: true },
    { name: 'alice', finished: false },
    { name: 'john', finished: true },
    { name: 'Kenven', finished: true }
];
const result = arrayData.reduce((total, item) => total + (item.finished ? 1 : 0), initialValue);
console.log(result);  //3

实例3 将二维数组转化为一维

const arr2 = [[1, 2, 3], [4, 5, 6]];
        const arr2ToArr = arr2.reduce((newArray, currentArray) => newArray.concat(currentArray));
        console.log(arr2ToArr); // 1,2,3,4,5,6

实例4 计算元素在数组中出现的次数

        const names = ['james', 'alice', 'james', 'alice', 'kenven', 'robin'];
        let counteNames = names.reduce((allNames, name) => {
            if (name in allNames) {
                allNames[name]++;
            } else {
                allNames[name] = 1;
            }
            return allNames;
        }, {});
        console.log(counteNames);
        // {james: 2, alice: 2, kenven: 1, robin: 1}

实例5 数组去重

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

    console.log(res);  // [1, 2, 3, 4, 5]

总结:通过Array.reduce()方法可以非常巧妙的解决平时需要计算某个数组或对象中的求和,求存在次数,以及去重等常用计算