Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
js数组中reduce的用法_创想鸟

js数组中reduce的用法

reduce方法用于将数组归并为单一值,通过回调函数累计结果,常用于求和、计数、扁平化等场景。

js数组中reduce的用法

reduce 是 JavaScript 数组中的一个高阶方法,用于将数组的所有元素“归并”成一个单一的值。它通过依次处理每个元素,并累计一个结果,非常适合用来求和、计数、扁平化数组等场景。

基本语法

arr.reduce(callback(accumulator, current, index, array), initialValue)

参数说明:

callback:每次迭代执行的函数,接收四个参数:accumulator:累计器,保存上一次调用的返回值current:当前正在处理的元素index(可选):当前元素的索引array(可选):调用 reduce 的原数组initialValue(可选):作为第一次调用 callback 时 accumulator 的初始值

如果没有提供 initialValue,reduce 会从数组的第二个元素开始遍历,第一个元素作为 accumulator 的初始值。

常见使用示例

1. 数值求和

最典型的用法是计算数组中所有数字的总和。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
// 结果:10

2. 计算对象数组的某个属性总和

比如统计购物车商品总价。

const cart = [
  { name: ‘苹果’, price: 5, count: 2 },
  { name: ‘香蕉’, price: 3, count: 4 }
];
const total = cart.reduce((acc, item) => acc + item.price * item.count, 0);
// 结果:22

3. 数组扁平化

将多维数组转为一维。

const nested = [[1, 2], [3, 4], [5, 6]];
const flat = nested.reduce((acc, curr) => acc.concat(curr), []);
// 结果:[1, 2, 3, 4, 5, 6]

4. 统计元素出现次数(分组)

用 reduce 实现类似 groupBy 的功能。

const fruits = [‘apple’, ‘banana’, ‘apple’, ‘orange’, ‘banana’, ‘apple’];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
// 结果:{ apple: 3, banana: 2, orange: 1 }

5. 按条件分组对象

const people = [
  { name: ‘Alice’, age: 25 },
  { name: ‘Bob’, age: 30 },
  { name: ‘Charlie’, age: 25 }
];
const groupByAge = people.reduce((acc, person) => {
  if (!acc[person.age]) {
    acc[person.age] = [];
  }
  acc[person.age].push(person);
  return acc;
}, {});
// 按年龄分组

注意事项

reduce 功能强大,但使用时要注意以下几点:

如果数组为空且没有提供 initialValue,会抛出错误回调函数必须有返回值,否则后续迭代的 acc 会变成 undefined初始值类型应与最终期望的结果一致,比如累加用数字 0,拼接数组用 [],构建对象用 {}

基本上就这些。掌握 reduce 能让你写出更简洁、函数式风格的代码,尤其适合数据处理场景。关键是理解 accumulator 如何一步步累积结果。不复杂但容易忽略细节。

以上就是js数组中reduce的用法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1535349.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
使用JavaScript实现一个简单的依赖注入_js架构
上一篇 2025年12月21日 02:22:02
JavaScript LocalStorage存储限制
下一篇 2025年12月21日 02:22:14

相关推荐

  • 今日头条流量消耗太快如何解决_今日头条省流量模式开启攻略

    今日头条流量消耗太快如何解决_今日头条省流量模式开启攻略今日头条流量消耗太快如何解决_今日头条省流量模式开启攻略今日头条流量消耗太快如何解决_今日头条省流量模式开启攻略今日头条流量消耗太快如何解决_今日头条省流量模式开启攻略

    开启极省流量模式并关闭视频自动播放,可有效降低今日头条的移动数据消耗。1、进入“我的”→“系统设置”→“非WiFi网络流量”,选择“极省流量”模式;2、在“播放与网络”中关闭“自动播放视频”和“预加载视频”;3、开启“极速浏览”模式以压缩数据传输;4、定期清理缓存文件提升运行效率;5、利用Wi-Fi…

    2026年9月25日 • 用户投稿
    300
  • 使用 Jackson 进行复杂类的自定义反序列化

    使用 Jackson 进行复杂类的自定义反序列化使用 Jackson 进行复杂类的自定义反序列化使用 Jackson 进行复杂类的自定义反序列化使用 Jackson 进行复杂类的自定义反序列化

    本文介绍了如何使用 Jackson 库对包含复杂嵌套类的 JSON 字符串进行自定义反序列化。通过 ObjectMapper 的 readValue 方法可以实现简单场景下的自动反序列化。针对需要定制化处理的场景,可以结合 ObjectMapper 和自定义反序列化器来实现更灵活的反序列化逻辑,并提…

    2026年9月25日 • 用户投稿
    900
  • 苹果手机怎么激活

    苹果手机怎么激活苹果手机怎么激活苹果手机怎么激活苹果手机怎么激活

    苹果手机激活步骤:1. 开机;2. 选择语言和地区;3. 连接网络;4. 激活手机并使用 Apple ID;5. 设置生物识别安全措施;6. 选择数据传输选项;7. 设置 Apple Pay(可选);8. 完成设置。 苹果手机激活步骤 第一步:开机 确保手机已充电。按下手机侧面的电源按钮开机。 第二…

    2026年9月25日 • 用户投稿
    800
  • 使用 JSON Schema 中的 oneOf 避免无效枚举值的错误提示

    使用 JSON Schema 中的 oneOf 避免无效枚举值的错误提示使用 JSON Schema 中的 oneOf 避免无效枚举值的错误提示使用 JSON Schema 中的 oneOf 避免无效枚举值的错误提示使用 JSON Schema 中的 oneOf 避免无效枚举值的错误提示

    本文旨在帮助开发者理解并解决在使用 JSON Schema 验证 JSON 数据时,由于 oneOf 约束可能导致的“无效枚举值”的错误提示问题。我们将通过示例代码,详细解释错误产生的原因,并提供相应的解决方案,以确保 JSON Schema 验证的准确性和可读性。 在使用 JSON Schema …

    2026年9月25日 • 用户投稿
    500
  • 灵通资讯字体大小设置方法

    灵通资讯字体大小设置方法灵通资讯字体大小设置方法灵通资讯字体大小设置方法灵通资讯字体大小设置方法

    如何在灵通资讯app中调整字体大小?本文将为您一步步讲解具体操作流程,帮助您快速完成设置,优化阅读舒适度。 1、 启动灵通资讯App后,在首页左上角找到并点击头像图标。 2、 跳转至个人页面后,点击右上角的“设置”图标进入系统选项。 3、 在设置菜单中,选择“字体大小”这一项。 搜狐资讯 AI资讯助…

    2026年9月25日 • 用户投稿
    100
  • 8 种颜色 + 挂绳孔设计,苹果 iPhone17 系列液态硅胶手机壳曝光

    8 种颜色 + 挂绳孔设计,苹果 iPhone17 系列液态硅胶手机壳曝光8 种颜色 + 挂绳孔设计,苹果 iPhone17 系列液态硅胶手机壳曝光8 种颜色 + 挂绳孔设计,苹果 iPhone17 系列液态硅胶手机壳曝光8 种颜色 + 挂绳孔设计,苹果 iPhone17 系列液态硅胶手机壳曝光

    随着苹果 iphone17 系列发布日期的临近,关于其配件的爆料也逐渐浮出水面。近日,科技媒体 majinbu official 曝光了一组 iphone17 系列全新液态硅胶手机壳的渲染图,不仅展示了 8 种亮眼配色,更首次加入了备受期待的挂绳孔设计,预示着苹果在手机配件功能性上的一次重要创新。 …

    2026年9月25日 • 用户投稿
    000
  • 动态缓存键配置:Spring Boot 缓存管理的灵活应用

    动态缓存键配置:Spring Boot 缓存管理的灵活应用动态缓存键配置:Spring Boot 缓存管理的灵活应用动态缓存键配置:Spring Boot 缓存管理的灵活应用动态缓存键配置:Spring Boot 缓存管理的灵活应用

    在 Spring Boot 应用中,使用 @Cacheable 注解可以方便地实现缓存功能。然而,在某些场景下,我们需要根据请求参数动态地生成缓存键,而不是简单地使用固定的键值。虽然 @Cacheable 注解允许通过 key 属性指定 SpEL 表达式来生成缓存键,但有时我们可能需要更灵活的控制,…

    2026年9月25日 • 用户投稿
    200
  • p5.js WebGL性能优化:首帧渲染耗时长的原因与对策

    p5.js WebGL性能优化:首帧渲染耗时长的原因与对策p5.js WebGL性能优化:首帧渲染耗时长的原因与对策p5.js WebGL性能优化:首帧渲染耗时长的原因与对策p5.js WebGL性能优化:首帧渲染耗时长的原因与对策

    在使用p5.js的WEBGL渲染模式时,首次调用image()函数渲染图片或p5.Graphics对象通常会比后续调用耗时显著增加。这主要是因为第一次渲染时,p5.js需要将图像数据从CPU内存上传到GPU的纹理内存中,涉及内存分配和数据复制,这是一个相对耗时的过程。后续调用由于纹理已被缓存,可以直…

    2026年9月25日 • 用户投稿
    700
  • 苹果手机怎么开预警通知

    苹果手机怎么开预警通知苹果手机怎么开预警通知苹果手机怎么开预警通知苹果手机怎么开预警通知

    在苹果手机上开启预警通知:1. 打开设置>通知;2. 找到“政府警报”并开启“允许通知”;3. 确保手机连接网络以接收警报。此功能不可关闭静音,在部分地区可能无法使用。 如何开启苹果手机预警通知 预警通知功能可让人们在发生紧急情况时收到警报。在苹果手机上开启此功能非常简单: 步骤: 知我AI …

    2026年9月25日 • 用户投稿
    100
  • 为什么不同浏览器对硬件加速的实现存在差异?

    不同浏览器因渲染引擎、图形API及权衡策略差异导致硬件加速表现不同。1. Blink、Gecko、WebKit引擎在图层管理与GPU任务分配上设计不同;2. 各浏览器通过ANGLE等抽象层适配DirectX、Vulkan、Metal,转换开销与支持程度影响性能;3. 厂商在性能、兼容性、稳定性间取舍…

    2026年9月25日
    100
  • 荣耀 300 系列系统升级,后续多款新机待发

    荣耀 300 系列系统升级,后续多款新机待发荣耀 300 系列系统升级,后续多款新机待发荣耀 300 系列系统升级,后续多款新机待发荣耀 300 系列系统升级,后续多款新机待发

    日前,荣耀 300 系列手机迎来 magicos 9.0.0.187 版本升级,此次更新带来了清理建议、ai 通话等多项新功能,系统升级将以分批推送的形式逐步覆盖用户。 本次更新的主要亮点如下: 图库方面新增“清理建议”功能,可智能识别重复照片、相似图片及超大视频,帮助用户更高效地管理存储空间; 通…

    2026年9月25日 • 用户投稿
    500
  • 苹果手机丢了怎么定位

    苹果手机丢了怎么定位苹果手机丢了怎么定位苹果手机丢了怎么定位苹果手机丢了怎么定位

    使用以下步骤定位丢失的苹果手机:1. 使用“查找我的 iPhone”在 iCloud.com 上登录并查看设备位置;2. 使用第三方跟踪应用程序,如 Find My Phone;3. 联系运营商获取近似位置;4. 激活丢失模式,显示联系信息并远程锁定设备。 苹果手机失窃后如何定位 当苹果手机失窃时,…

    2026年9月25日 • 用户投稿
    000
  • 动态缓存键在Spring Boot中的实现教程

    动态缓存键在Spring Boot中的实现教程动态缓存键在Spring Boot中的实现教程动态缓存键在Spring Boot中的实现教程动态缓存键在Spring Boot中的实现教程

    本文介绍了如何在Spring Boot应用中实现基于请求参数的动态缓存键。通过直接操作CacheManager获取缓存对象,并使用cache.get(key, () -> …)方法,可以灵活地根据请求参数生成缓存键,从而实现更精细化的缓存控制。这种方法避免了直接修改缓存名称,而是专…

    2026年9月25日 • 用户投稿
    700
  • sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置

    sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置

    首先安装SublimeLinter和SublimeLinter-eslint插件,确保系统或项目中已安装ESLint;通过npx eslint –init生成配置文件;插件会自动调用项目内的eslint,若未识别可手动设置executable路径;保存JavaScript文件时即可实时显…

    2026年9月25日 • 用户投稿
    000
  • Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素

    Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素

    本文将详细介绍如何使用 Java 8 的 Stream API 将一个嵌套的 Map 结构进行扁平化处理,并从中提取所需的数据。 具体来说,我们将把 Map<Integer, Map<String, List>> 转换为 Map,其中新 Map 的键是原内部 Map 的键,值…

    2026年9月25日 • 用户投稿
    1200
  • 修改 Android KeyStore 中 KeyPair 的用途

    修改 Android KeyStore 中 KeyPair 的用途修改 Android KeyStore 中 KeyPair 的用途修改 Android KeyStore 中 KeyPair 的用途修改 Android KeyStore 中 KeyPair 的用途

    本文档介绍了如何在 Android KeyStore 中修改现有 KeyPair 的用途,使其支持密钥协商 (Key Agreement) 操作。通过示例代码展示了如何利用 KeyStore.setEntry 方法在 Android 13 (API 33) 及以上版本中导入 KeyPair 并设置所…

    2026年9月25日 • 用户投稿
    600
  • 拼多多官方客服人工服务怎么联系?商家不退款找谁投诉?拼多多人工客服怎么找?商家不退钱投诉无门? 3种官方渠道+高效维权攻略,立即解决!

    拼多多官方客服人工服务怎么联系?商家不退款找谁投诉?拼多多人工客服怎么找?商家不退钱投诉无门? 3种官方渠道+高效维权攻略,立即解决!拼多多官方客服人工服务怎么联系?商家不退款找谁投诉?拼多多人工客服怎么找?商家不退钱投诉无门? 3种官方渠道+高效维权攻略,立即解决!拼多多官方客服人工服务怎么联系?商家不退款找谁投诉?拼多多人工客服怎么找?商家不退钱投诉无门? 3种官方渠道+高效维权攻略,立即解决!拼多多官方客服人工服务怎么联系?商家不退款找谁投诉?拼多多人工客服怎么找?商家不退钱投诉无门? 3种官方渠道+高效维权攻略,立即解决!

    在拼多多购物时,用户和商家都可能遇到订单异常、退款难等困扰。无论是消费者维权,还是商家寻求平台支持,及时联系官方客服是解决问题的关键。本文将全面介绍拼多多人工客服的3种有效联系方式,并针对商家拒退、售后失联等常见难题,提供清晰可行的投诉处理方案,帮助您快速高效地维护权益。 一、拼多多人工客服的3种实…

    2026年9月25日 • 用户投稿
    000
  • 并发处理共享列表并收集结果的方案

    并发处理共享列表并收集结果的方案并发处理共享列表并收集结果的方案并发处理共享列表并收集结果的方案并发处理共享列表并收集结果的方案

    本文旨在介绍如何利用 Java 并行流高效地处理大型列表,尤其是在每个元素的处理过程耗时较长的情况下。并行流能够将列表分割成多个子任务,并在多个线程上并发执行,从而显著提升处理速度。但同时,并发编程也带来了共享资源同步的问题,需要谨慎处理。 使用并行流并发处理列表 假设我们有一个 Foo 类,其 p…

    2026年9月25日 • 用户投稿
    000
  • 淘宝签到红包金额越来越小,如何让它变大?使用范围是什么?3个核心技巧让它翻倍增长

    淘宝签到红包金额越来越小,如何让它变大?使用范围是什么?3个核心技巧让它翻倍增长淘宝签到红包金额越来越小,如何让它变大?使用范围是什么?3个核心技巧让它翻倍增长淘宝签到红包金额越来越小,如何让它变大?使用范围是什么?3个核心技巧让它翻倍增长淘宝签到红包金额越来越小,如何让它变大?使用范围是什么?3个核心技巧让它翻倍增长

    打开淘宝app进入「领红包」页面,不少用户注意到签到红包金额已从原先的3至5元下降至0.5到2元之间。随着平台算法升级,红包金额现由系统基于用户活跃度、消费频率、互动行为等28项指标动态评估并调整。统计显示,在坚持连续签到30天的用户中,高达73%曾遭遇红包金额被削减一半的情况。 一、3大实用技巧助…

    2026年9月25日 • 用户投稿
    300
  • qq浏览器提示Flash版本过低怎么办 QQ浏览器Flash插件过时问题解决方案

    qq浏览器提示Flash版本过低怎么办 QQ浏览器Flash插件过时问题解决方案qq浏览器提示Flash版本过低怎么办 QQ浏览器Flash插件过时问题解决方案qq浏览器提示Flash版本过低怎么办 QQ浏览器Flash插件过时问题解决方案qq浏览器提示Flash版本过低怎么办 QQ浏览器Flash插件过时问题解决方案

    优先通过QQ浏览器内置插件更新Flash,依次检查设置、使用修复工具、排除安全软件干扰,必要时在可信环境手动安装最新版Flash Player并及时卸载以确保安全。 如果您在使用QQ浏览器访问依赖Flash内容的网页时,收到“Flash版本过低”或插件过时的提示,这通常是因为浏览器内置的Flash插…

    2026年9月25日 • 用户投稿
    200

发表回复

登录后才能评论
关注微信