关于前端:提升代码格调JavaScript-数组的-reduce-方法入门

基本概念

reduce() 办法为数组中的每一个元素顺次执行回调函数（不包含数组中被删除或从未被赋值的元素），返回一个具体的后果。

语法

reduce() 接管两个参数，其根本语法为：

arr.reduce(callback,[initialValue])

参数解析：

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

• previousValue 第一项的值或者上一次叠加的后果值，或者是提供的初始值（initialValue）
• currentValue 数组中以后被解决的元素
• index 以后元素在数组中的索引
• array 数组自身

initialValue (可选) 作为第一次调用 callback 的第一个参数，能够管制返回值的格局

reduce() 办法能够应用以下这个表达式总结一下：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

根本示例

咱们通过上面这个例子，来直观认识一下 reduce() 的各个参数：

const arr = [2, 4, 6, 8, 10];
let i = 0;
arr.reduce((pre, cur, index, arr) => {console.log(` 第 ${ i + 1} 次执行：pre:${pre},cur:${cur},index:${index}`);
    i++;
    return pre + cur;
}, 10);

// 第 1 次执行：pre: 10, cur: 2, index: 0
// 第 2 次执行：pre: 12, cur: 4, index: 1
// 第 3 次执行：pre: 16, cur: 6, index: 2
// 第 4 次执行：pre: 22, cur: 8, index: 3
// 第 5 次执行：pre: 30, cur: 10, index: 4
// 40

代码剖析：

• 数组中的元素顺次执行了回调函数。
• 因为给 initialValue 赋了初始值 10，所以第一次执行时，pre 的值默认从 10 开始。
• 每次执行时，pre 的值都是 cur 元素前的所有元素之和。
• 最初返回数组所有元素累加的和。

咱们再看一下不传 initialValue 参数的执行后果：

const arr = [2, 4, 6, 8, 10];
let i = 0;
arr.reduce((pre, cur, index, arr) => {console.log(` 第 ${ i + 1} 次执行：pre:${pre},cur:${cur},index:${index}`);
    i++;
    return pre + cur;
});

// 第 1 次执行：pre: 2, cur: 4, index: 1
// 22 第 2 次执行：pre: 6, cur: 6, index: 2
// 22 第 3 次执行：pre: 12, cur: 8, index: 3
// 22 第 4 次执行：pre: 20, cur: 10, index: 4
// 30

能够看到，这里只执行了四次，且是从数组的第二位开始执行的，数组的第一位默认作为了 pre 的值。

理论利用

除了下面的根本利用之外，reduce() 办法还有以下利用。

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

const arr = ['name', 'age', 'long', 'short', 'long', 'name', 'name']

arr.reduce((pre, cur) => {console.log(pre, cur)
    if (cur in pre) {pre[cur]++
    } else {pre[cur] = 1
    }
    return pre
}, {})


// { } "name"
// {name: 1} "age"
// {name: 1, age: 1} "long"
// {name: 1, age: 1, long: 1} "short"
// {name: 1, age: 1, long: 1, short: 1} "long"
// {name: 1, age: 1, long: 2, short: 1} "name"
// {name: 2, age: 1, long: 2, short: 1} "name"
// {name: 3, age: 1, long: 2, short: 1}

数组去重

const arr = ['name', 'age', 'long', 'short', 'long', 'name', 'name'];

let arrResult = arr.reduce((pre, cur) => {if (!pre.includes(cur)) {pre.push(cur)
    }
    return pre;
}, [])

// ["name", "age", "long", "short"]

对象属性求和

const person = [
    {
        name: 'xiaoming',
        age: 18
    }, {
        name: 'xiaohong',
        age: 17
    }, {
        name: 'xiaogang',
        age: 19
    }
]

person.reduce((a, b) => {
    a = a + b.age;
    return a;
}, 0);

// 54

总结

reduce() 办法还有很多其余用处，这里只是列出了最常见的几种，剩下的还须要大家多多摸索哦！

~

~

~

~ 本文完！

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好！我是〖编程三昧〗的作者 隐逸王 ，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

常识与技能并重，内力和外功兼修，实践和实际两手都要抓、两手都要硬！