头图

提升代码格调——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() 方法还有很多其他用途,这里只是列出了最常见的几种,剩下的还需要大家多多探索哦!

reduce_it_colour_0

~

~

~

~本文完!

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!


学习有趣的知识,交识有趣的朋友,造就有趣的灵魂!

45 声望
9 粉丝
0 条评论
推荐阅读
系统学习 TypeScript(六)——认识接口
将一类具体事务抽象成单一的对象方法,使用者不必关心内部的实现逻辑,只需要按照要求传入对应的参数即可得到预期的结果输出,从很大程度上减轻了使用者的心智负担。

编程三昧阅读 689

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

学习有趣的知识,交识有趣的朋友,造就有趣的灵魂!

45 声望
9 粉丝
宣传栏