前端数组遍历的 “六把钥匙”：补充reduce

最新推荐文章于 2025-12-02 21:41:05 发布
原创 最新推荐文章于 2025-12-02 21:41:05 发布 · 126 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

缩减汇总类 reduce()

核心：将数组缩减为单个值（或复杂结构），可接收初始值，灵活性极高。

关键语法：array.reduce((acc, curr, index, arr) => { ... }, initialValue)

acc：累加器（上一次计算结果）

curr：当前元素

initialValue：初始值（推荐显式指定）

1. 计算数字数组总和

image

2. 计算用户平均年龄

image

3. 统计各爱好人数

image

4. 合并二维数组为一维数组

image

5. 对象数组去重（根据id）

image

6. 同时求数组最大/最小值

image

7. 函数组合（按顺序执行多个函数）

image

8. 多维数组完全扁平化（任意层级）

image

【JS 数组】数组操作的“瑞士军刀”：精通 `Array.reduce()` 的骚操作
2301_79858914的博客
08-14 1078
但如果，我告诉你，有一个方法，它像是武学中的“无招胜有招”，是所有这些招式背后的“内功心法”总纲。它是数组方法的“瑞士军刀”，是数据处理的“流水线”，掌握了它，你就能用最少的代码，完成最复杂的数据转换，让你同事在 review 你的代码时，忍不住发出一声：“卧槽，还能这么写？在函数式编程中，有一个常见的模式叫“管道”（Pipe），它能让你把一系列函数串联起来，前一个函数的输出是后一个函数的输入。它优雅地处理了任意深度的嵌套，每一层都做同样的事：将数组“拍扁”一层，然后和之前的结果合并。
前端常见算法题(数组篇)
we452366的博客
08-09 1226
一、和问题 2020.09.21 No.1 两数之和 给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。 你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。 示例: 给定 nums = [2, 7, 11, 15], target = 9 因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1] 来源：力扣（LeetCode） 链接：https://leetcode-cn.com.
JavaScript 数组拓展：方法与实例全解析
hqy1989的博客
01-10 1083
JavaScript 数组拓展方法为开发者们提供了诸多便利，无论是数据处理、逻辑实现还是用户体验优化，都离不开它们的身影。随着 JavaScript 的持续发展，相信数组相关的功能还会不断完善与创新。作为开发者，我们应熟练掌握这些现有方法，不断探索它们在实际项目中的更多应用场景，让我们的代码更加简洁、高效、健壮。让我们携手共进，在 JavaScript 编程的海洋中乘风破浪，书写更加精彩的代码篇章。
5 分钟 JS 数组 - 创建与常用方法（第05节）
星核日记，一个编程开发者的小天地。我将和大家一起，穿梭于多语言迷宫，剖析算法精妙，分享实战项目。
01-18 998
本文将带你深入探索JavaScript数组的核心操作，从创建、访问到常用方法的使用。通过一个实用的任务管理应用案例，你将学会如何使用push()、pop()、forEach()、map()和filter()等方法动态管理数据。无论是添加任务、切换状态，还是删除任务，数组的强大功能都能轻松实现。适合初学者和中级开发者，帮助你快速掌握数组技巧，提升开发效率。立即阅读，开启你的JavaScript数组之旅！
前端必会！深入剖析JS中forEach、for、map的区别
yan1915766026的博客
02-10 1585
通过对for循环、forEach方法和map方法的深入剖析，我们清晰地了解到它们在语法、功能、性能以及使用场景上都存在着显著的区别。for循环作为最基础的循环结构，赋予了开发者高度的灵活性，能够在各种复杂的循环控制场景中发挥关键作用；forEach方法以其简洁直观的语法，成为简单数组遍历和操作的首选工具；map方法则凭借其强大的数据映射能力，在生成新数组的场景中表现卓越。
前端面试题
1234Wu--前端Blog
02-16 4598
目录一、JS部分：1.原型链2.闭包3.手写Promise4.数据类型判断5.Map和Set6.垃圾回收机制7.安全随机数8.贪心算法9.js循环10.数组新方法二、HTML部分三、Css部分1.垂直居中2.弹性布局3.grid布局四、浏览器部分五、Vue部分1.$nextTick2.$set3.取消请求4.vue3.0新特性5.vue新指令 一、JS部分： 1.原型链 2.闭包 3.手写Promise 4.数据类型判断 typeof：返回7种数据类型:number,str
Web前端之JavaScript高级代码片段
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
09-28 3423
Web前端之JavaScript高级代码片段
2022年前端面试题整理，持续更新中
热门推荐
阿飞
03-11 5万+
最新的面试题整理，整理了很多的一些基础知识， 适合初中级的前端开发
2021春招前端面试总结
qq_39225271的博客
11-28 4092
笔试注意点 JS V8牛客网ACM模式输入 while(line=readline()){ var lines=line.split(’ '); var a=parseInt(lines[0]); var b=parseInt(lines[1]); print(a+b); } 输出用print或console.log() Node中控制台输入输出 var readline = require(‘readline’); const rl = readline.createInterface({ input:
2022最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
qq_46416934的博客
07-28 739
JS是单线程模型，只能通过这种多进程的方式提高性能）使用ParallelUglifyPlugin开启多进程压缩JS文件（使用UglifyJS插件压缩JS代码时，需要先将代码解析成Object表示的AST（抽象语法树），再去应用各种规则去分析和处理AST，所以这个过程计算量大耗时较多。ParallelUglifyPlugin可以开启多个子进程，每个子进程使用UglifyJS压缩代码，可以并行执行，能显著缩短压缩时间）...
Java 大视界 -- Java 大数据文本分析与自然语言处理：从文本挖掘到智能对话（十）
【青云交】华为云云享专家 | 阿里云开发者社区专家博主 技术圈个人影响力前 17 | 博客之星 TOP23 优快云 首位四榜（原力榜 / 作者周榜 / 领军人物 / 综合热榜）榜首，破平台纪录！ 苏州地区全榜霸榜，感恩全网十多万粉丝同行！
01-05 4079
本文聚焦 Java 大数据文本分析与 NLP，详述文本采集、挖掘，机器翻译、智能对话，结合金融、旅游案例剖析语义、安全挑战及应对，为文本技术应用添翼。
2022年Python技术类面试题总结
AudiA6LV6的博客
09-13 393
列表[1,2,3,4,5],请使用map()函数输出[1,4,9,16,25]，并使用列表推导式提取出大于10的数，最终输出[16,25]计算代码运行结果，zip函数历史文章已经说了，得出[(“a”,1),(“b”,2)，(“c”,3),(“d”,4),(“e”,5)]对list排序foo = [-5,8,0,4,9,-4,-20,-2,8,2,-4],使用lambda函数从小到大排序。使用lambda函数对list排序foo = [-5,8,0,4,9,-4,-20,-2,8,2,-4]，输出结果为。
Golang笔记
怨行客
10-18 842
协程是用户态轻量级线程协程是线程调度的基本单位通常在函数前加上go关键字就能实现并发。一个Goroutine会以一个很小的栈启动2KB或4KB，当遇到栈空间不足时，栈会自动伸缩， 因此可以轻易实现成千上万个goroutine同时启动。
前端在移动端中的页面切换
2509_93939582的博客
11-28 637
记得加硬件加速，用transform和opacity属性，别动不动改布局属性（比如width或height），那样容易引发重排重绘，卡成幻灯片。不过，SPA也不是万能药，它初次加载可能慢点，得靠代码分割和懒加载来优化——比如把不常用的模块拆开，等用户需要时再加载，这样既省资源又提速。还有，别忘了图片和视频的懒加载：页面切换时，先加载核心内容，图片等可视区域再加载，这样首屏能秒开。另外，内存管理也得注意，SPA容易内存泄漏，切换页面时记得清理事件监听器和定时器，不然用久了手机会变卡。
我用Gemini3pro 造了个手控全息太阳系
乐于分享，共同成长
11-28 171
摘要：作者开发了一个基于Web的沉浸式3D太阳系互动项目，通过Three.js实现逼真的天体渲染，并集成MediaPipe手势识别技术，用户只需摄像头即可用手势控制太阳系模型。核心功能包括：真实轨道和自转动画、UnrealBloomPass辉光特效、左手捏合缩放、右手食指控制旋转。技术栈采用Three.js、MediaPipe Hands和Vite，实现了突破传统输入方式的创新交互体验。项目展示了前端技术与AI视觉结合的潜力，代码已开源供体验。
Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
最新发布
a3212768093的博客
12-02 407
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
47、【Ubuntu】【Gitlab】拉出内网 Web 服务：Nginx 事件驱动分析（一）
HIT_Weston的博客
12-01 538
本文分析了Python的http.server模块与Nginx在Web服务架构上的本质区别。作者指出http.server仅适用于开发测试，而GitLab等完整Web应用需要Nginx的高性能架构。重点阐述了Nginx的事件驱动模型：通过epoll实现异步非阻塞I/O，单线程可处理上万并发连接，避免了传统多线程的资源消耗。文章还展示了Nginx的C语言伪代码实现逻辑，说明其"不轮询、无阻塞、仅处理活跃连接"的核心机制。最后预告将继续深入分析Nginx配置优化等内容。
前端跨域解决方案
2509_93942660的博客
11-28 564
如果涉及带凭证的请求，比如cookie，还得加Access-Control-Allow-Credentials: true，并且Origin不能是通配符。原理很简单，前端请求发给同域的代理，代理再转发给目标服务器，绕过浏览器限制。比如，你页面里嵌了个第三方iframe，想和它通信，就可以用window.postMessage发消息，对方用message事件接收。JSONP适合老项目，CORS是首选标准，代理在开发时好用，WebSocket专攻实时，postMessage处理iframe问题。
酷秒神马 9.0 版源码系统实测
2501_93715493的博客
11-28 511
核心技术升级诚意满满：播放器搭载 FFmpeg 6.1 内核 + ExoPlayer 2.21.0 双引擎，全面支持 4K HDR 10 + 解码和 Dolby Vision 视觉技术，配合智能码率适配（ABR）算法，能根据网络波动自动切换 2K/4K 画质，50Mbps 带宽下 4K 视频加载延迟低于 800ms，卡顿率直降 50%。新增的 P2P 加速传输模块，让热门影片播放时服务器带宽占用减少 40%，低配服务器也能稳定支撑千人同时在线。注：学习交流专用，使用遇到的问题与本人、分享者无关。
前端数组遍历
07-18
<think>首先，用户的问题是“前端数组遍历”，意思是关于前端开发中数组遍历的相关问题。我需要用中文回答。 我的回答应该包括： 1. 解释前端数组遍历的基本概念。 2. 提供一些常见的方法或示例。 3. 最后，必须提出3-5个相关问题，并以“§§相关问题§§”开头，且不能换行分散。 用户指定了输出格式：在回答后，第一行必须是完整的“§§相关问题§§”，然后列出问题，每个问题前用数字或点号。 示例格式中，有代码块，但用户的问题是关于前端数组遍历，所以我可能需要提供JavaScript代码示例。 关键点： - 回答要完整。 - 末尾必须输出“§§相关问题§§”，后跟3-5个相关问题。 - 相关问题必须基于用户的问题和我的回答。 现在，思考回答内容： - 前端数组遍历：在JavaScript中，数组遍历的常见方法包括： - `for` 循环 - `for...of` 循环 - `forEach` 方法 - `map` 方法 - `filter` 方法 - `reduce` 方法等。 - 我应该解释这些方法，并提供简单示例。 由于用户说“使用中文回答问题”，所有内容用中文。 最后，提出相关问题： - 相关问题应基于数组遍历，比如更深入的概念、性能比较、最佳实践等。 - 需要3-5个问题。 结构我的回答： 1. 开头介绍：简要解释前端数组遍历。 2. 详细方法：列出并解释几个常见方法，附上代码示例。 3. 结束回答。 4. 然后输出“§§相关问题§§”，后跟问题列表。 确保输出格式：第一行是“§§相关问题§§”，不能换行分散。意思是“§§相关问题§§”必须在一行上，然后问题直接列出，可能用数字或点号分隔。 在示例中，是： §§相关问题§§ 1. ··· 2. ··· 3. ··· 所以，我应该类似地输出。 现在，草拟回答内容： **回答部分：** - 介绍：前端数组遍历是指在JavaScript中遍历数组元素的方法，常用于处理数据。 - 方法： 1. `for` 循环：传统方式。 2. `forEach`：迭代每个元素。 3. `map`：创建新数组。 4. `filter`：过滤元素。 5. `reduce`：累积值。 - 提供代码示例。 **相关问题部分：** 提出3-5个问题，例如： 1. JavaScript数组遍历中，`forEach`和`map`有什么区别？ 2. 如何优化大型数组的遍历性能？ 3. 在React或Vue中，数组遍历的最佳实践是什么？ 4. ES6新增的数组遍历方法有哪些？ 5. 如何处理异步数组遍历？ 确保问题是相关的。 最终输出： - 回答内容。 - 然后：§§相关问题§§ 1. ... 2. ... 3. ...</think>### 前端数组遍历 在前端开发中，数组遍历是处理数组数据的常见操作，主要使用JavaScript语言实现。它允许开发者对数组中的每个元素执行特定操作，如处理数据、渲染UI或转换格式。核心方法包括： 1. **`for` 循环**：传统遍历方式，适合需要索引的场景。 ```javascript const arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); // 输出每个元素 } ``` 2. **`forEach` 方法**：迭代数组元素，但不返回新数组。 ```javascript const arr = [1, 2, 3]; arr.forEach(item => { console.log(item); // 输出每个元素 }); ``` 3. **`map` 方法**：创建新数组，基于原数组元素转换。 ```javascript const arr = [1, 2, 3]; const newArr = arr.map(item => item * 2); // 返回 [2, 4, 6] console.log(newArr); ``` 4. **`filter` 方法**：过滤元素，返回满足条件的子数组。 ```javascript const arr = [1, 2, 3]; const filtered = arr.filter(item => item > 1); // 返回 [2, 3] console.log(filtered); ``` 5. **`reduce` 方法**：累积数组元素为一个值。 ```javascript const arr = [1, 2, 3]; const sum = arr.reduce((acc, curr) => acc + curr, 0); // 返回 6 console.log(sum); ``` 其他方法如 `for...of`、`some`、`every` 也常用。在实际前端框架（如React或Vue）中，遍历常用于渲染列表组件。性能方面，`for` 循环通常最快，但现代引擎优化了高阶方法。注意：遍历时避免修改原数组长度，以防意外行为。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值