JavaScript_数组常用方法【2】

发布时间：2026/7/6 21:37:14

JavaScript_数组常用方法【2】

目录

数组常用方法 2 :

1. forEach( )

forEach 的原理 :

2. map( )

map 的原理 :

3. filter( )

filter 的原理 :

4. find( )

5. every( )

6. some( )

7. reduce( )

reduce 原理 :

ES6新增数组方法（注意浏览器兼容）

includes()

图例 :

上一篇跳转链接 : JavaScript_数组常用方法【2】

数组常用方法 2 :

方法2 内的数组方法相对复杂一些, 也都不会改变原始数组, 都是以返回值形式给出结果

1. forEach( )

+ 语法：数组.forEach( function (item, index, arr) { } )

=> 函数可以接受三个参数

=> 第一个参数：表示数组内的每一项 item

=> 第二个参数：表示数组内每一项的索引 index

=> 第三个参数：表示原始数组 arr（不常用）

+ 作用：遍历数组

+ 返回值：没有(undefined)

// 1. forEach() var arr = [10, 20, 30, 40, 50] // 0 1 2 3 4 console.log(arr) // [10, 20, 30, 40, 50] var res = arr.forEach(function a(item, index, arr) { // 函数 a 会根据 arr 数组中有多少个成员执行多少回 // item, 每一次执行的时候, item 分别是数组内的 每一项 // index, 每一次执行的时候, index 分别是数组内每一项的 索引 // arr, 每一次执行的时候, arr 都代表 原始数组 console.log('我执行了 ', item, ' --- ', index, ' --- ', arr) } )

forEach 的原理：

+会根据数组内的成员数量分别调用 a 函数

function a(item, index, arr)

+ 第一次调用 a(10, 0, [10, 20, 30, 40, 50])

+ 第二次调用 a(20, 1, [10, 20, 30, 40, 50])

+ 第三次调用 a(30, 2, [10, 20, 30, 40, 50])

+ 第四次调用 a(40, 3, [10, 20, 30, 40, 50])

+ 第五次调用 a(50, 4, [10, 20, 30, 40, 50])

2. map( )

+ 语法：数组.map( function (item, index, arr) { } )

+ 作用：映射数组

=> 对于原始数组里面的数据进行加工处理

=> 变成一个新的数组

+ 返回值：是一个新数组

=> 返回值数组和原始数组必然长度一致 .length ===

=> 新数组内每一个数据都是根据原始数组中每一个数据经过映射加工处理出来的

=> 映射加工处理条件以return的形式书写

// 2. map() var arr = [ 10, 20, 30, 40, 50 ] console.log('原始数组 : ', arr) // [10, 20, 30, 40, 50] // 开始映射 var res = arr.map(function a(item, index) { // 书写加工条件 // 以 return 的形式书写映射条件 return item * (index + 1) }) console.log('返回值数组 : ', res) // [10, 40, 90, 160, 250]

map 的原理 :

1. 准备一个 新数组

=> [ ]

原始值 => [10, 20, 30, 40, 50]

2. 开始根据原始数据进行遍历

=> 第一次调用 a(10, 0, 原始数组), 返回值是 10, 把这个返回值放在新数组里面

=> 第二次调用 a(20, 1, 原始数组), 返回值是 40, 把这个返回值放在新数组里面

=> 第三次调用 a(30, 2, 原始数组), 返回值是 90, 把这个返回值放在新数组里面

=> 第四次调用 a(40, 3, 原始数组), 返回值是 160, 把这个返回值放在新数组里面

=> 第五次调用 a(50, 4, 原始数组), 返回值是 250, 把这个返回值放在新数组里面

=> ...

3. 把 最终的这个数组 [10, 40, 90, 160, 250] 当做 map 这个方法的返回值

项目实践所用 ：

需求背景 : 后端需要一个新的字段answers， 但其字段跟options字段类似 ，

只是options字段内的部分数据用不到 ， 所以需要对 options 做一下处理 ：

原始数据 ：

options: [ { itemId: "1", answerScore: 0, label: "数量", value: "1", }, { itemId: "2", answerScore: 0, label: "数量", value: "2", }, { itemId: "3", answerScore: 0, label: "数量", value: "2", }, ];
if (type === "1") { // 题型追加 answers 字段 item.answers = item.options.map((i) => ({ itemId: i.itemId, answerScore: i.answerScore, })); }
answers: [ { itemId: "1", answerScore: 0, }, { itemId: "2", answerScore: 0, }, { itemId: "3", answerScore: 0, }, ];

3. filter( )

+ 语法：数组.filter( function (item, index, arr) { } )

+ 作用：过滤数组 ( 可灵活运用于实现一些 "删除" 功能 )

=> 把原始数组里面满足条件的内容拿出来, 组成一个新的数组

+ 返回值：是一个新数组

=> 原始数组内有多少满足条件的（true）, 那么新数组里面就有多少个数据

=> 原始数组内没有满足条件的 （false）, 那么就是 空的数组

=> 条件以return的形式书写

// 3. filter() var arr = [ 10, 20, 30, 40, 50 ] console.log('原始数组 : ', arr) // [10, 20, 30, 40, 50] // 对 arr 进行过滤 var res = arr.filter(function a(item) { // 书写过滤条件 // 以 return 的形式书写过滤条件 return item / 10 % 2 === 0 // 把每一项满足除以10之后为偶数的数据过滤出来组成一个新数组 }) console.log('返回值数组 : ', res) // [20, 40]

filter 的原理 :

1. 准备一个空数组

=> [ ]

返回值 => [20, 40]

2. 开始根据数组内有多少成员调用多少次 a 函数

=> 第一次调用 a(10, 0, 原始数组), 返回值 false, 那么 10 不加入新数组

=> 第二次调用 a(20, 1, 原始数组), 返回值 true, 那么 20 加入新数组

=> 第三次调用 a(30, 2, 原始数组), 返回值 false, 那么 30 不加入新数组

=> 第四次调用 a(40, 3, 原始数组), 返回值 true, 那么 40 加入新数组

=> 第五次调用 a(50, 4, 原始数组), 返回值 false, 那么 50 不加入新数组

3. 把数组最终结果 [20, 40] 当做 filter 的返回值

项目实践 ：

因为其 + 返回值: 是一个新数组

所以常利用它和 .length 搭配 （ 可节省 计数器 变量的使用了 ）

需求 ： 题型为多选必答项 ， 并且设置了最少回答数为 mincount

computed: { minAnswer() { let num = this.list.filter((i) => i.value !== ""); return num.length < this.list.mincount; }, },

把原始数组 [ list ] 里面满足条件 ( value 值 不为空 )的内容拿出来 ，组成一个新的数组 ，

判断其 length 数组长度值 （ 已回答数 ） 小于 定义的最小回答数 时 ， 返回 true

并会提示用户最少回答的 Tips 警告语 ⚠️

4. find( )

+ 语法：数组.find( function (item, index, arr) { } )

+ 作用：查找数组中满足条件的某一个数据

+ 返回值：就是数组中你要查找的满足条件的这个数据

+ 查找条件以return的形式书写

+ 常用在复杂数据类型的查找

// 4. find() var arr = [ 100, 200, 301, 400, 500 ] console.log('原始数组 : ', arr) // [100, 200, 301, 400, 500] // 我想找到原始数组中的那一个 奇数 var res = arr.find(function (item) { // 以 return 的形式书写查找条件 return item % 2 === 1 }) console.log('返回值 : ', res) // 301
// find 一般查找的都是复杂数据类型 var arr = [ { id: 1, name: 'Jack' }, { id: 2, name: 'Rose' }, { id: 3, name: 'Tom' } ] // 我已知的只有 id, 我想知道这个人叫什么 // 使用 find 方法直接找到这个人的完整信息 var res = arr.find(function (item) { // 条件: 找到 每一项中 id 是 2 的那一个 return item.id === 2 }) console.log('返回值数组 : ', res) // {id: 2, name: "Rose"}

5. every( )

+ 语法：数组.every( function (item, index, arr) { } )

+ 作用：判断数组中的每一个是否都满足条件

+ 返回值：是一个布尔值 Boolean ： true / false

=> 如果数组中每一个都满足条件, 那么返回值 true

=> 只要数组中任何一个不满足条件, 那么返回 false

+ 判断条件以return的形式书写

// 5. every() var arr = [10, 20, 30, 40, 50] console.log('原始数组 : ', arr) // [10, 20, 30, 40, 50] var res = arr.every(function (item) { // 以 return 的形式书写 判断 条件 // 判断数组内是不是所有项都 小于 50 return item < 50 }) console.log('返回值 : ', res) // false

项目实践 ：

let count = 0; // 计数器 // 需求 : 题型为必答题 , 统计用户是否每个选项都已回答 this.listData.forEach((item) => { if (item.options.every((i) => i.label !== "")) count++; });

判断数组 [ item.options ] 中的每一个 label 值是否都 不为空 ， 则满足条件 （ true ）

6. some( )

+ 语法：数组.some( function (item, index, arr) { } )

+ 作用：判断数组中是否有某一个满足条件

+ 返回值：是一个布尔值Boolean ： true / false

=> 如果数组中有任何一个满足条件 , 那么返回 true

=> 只有数组中所有都不满足条件的时候 , 才是 false

// 6. some() var arr = [10, 20, 30, 40, 50] console.log('原始数组 : ', arr) // [10, 20, 30, 40, 50] var res = arr.some(function (item) { // 以 return 的形式书写 判断 条件 // 判断数组内是不是 有某一个 小于 50 return item < 50 }) console.log('返回值 : ', res) // true

项目实践 ：

需求 ： 题目为必答项，每一项都必须要回答，只要有一项未答则 ⚠️ 警告提示

computed: { isShow() { return this.list.some((i) => i.value === ""); }, },

判断数组 [ list ] 中是否有某一个 ( 只要有一个 value 值 为空 ) 则满足条件，返回 true

7. reduce( )

⭐️ + 语法：数组.reduce(function(prev, item, index, arr ) { },初始值)

=> 1、参数一：函数, 函数根据数组中的成员进行 重复调用

->第一个参数 prev ：初始值 或 每一次叠加后的结果

->第二个参数 item ：每一项

-> 第三个参数 index ：索引

-> 第四个参数 arr ：原始数组

=> 2、参数二：初始值: 默认是 0 , 表示从什么位置开始叠加

+ 作用：进行叠加累计

// 7. reduce( ) var arr = [ 10, 20, 30, 40, 50 ] console.log('原始数组 : ', arr) // [10, 20, 30, 40, 50] var res = arr.reduce(function a(prev, item) { // 以 return 的形式书写每次的叠加条件 return prev + item }, 0) console.log('返回值 : ', res) // 150

reduce 原理 :

1. 准备了一个初始值, 按照你传递的 第二个参数 来定

=> 准备初始值 var init = 0

=> 第一次赋值 var init = 10

=> 第二次赋值 var init = 30

=> 第三次赋值 var init = 60

=> 第四次赋值 var init = 100

=> 第五次赋值 var init = 150

2. 根据原始数组来调用 a 函数

=> 第一次调用 a(0, 10, 0, 原始数组), return 0 + 10, 把 返回值再次赋值给 init

=> 第二次调用 a(10, 20, 1, 原始数组), return 10 + 20, 把 返回值再次赋值给 init

=> 第三次调用 a(30, 30, 2, 原始数组), return 30 + 30, 把 返回值再次赋值给 init

=> 第四次调用 a(60, 40, 3, 原始数组), return 60 + 40, 把 返回值再次赋值给 init

=> 第五次调用 a(100, 50, 4, 原始数组), return 100 + 50, 把 返回值再次赋值给 init

3. 把最初始准备的变量 init 结果, 当做 reduce 的返回值

ES6新增数组方法（注意浏览器兼容）

includes()

方法 ： 用来判断一个数组是否包含一个指定的值，如果是 返回 true ，否则 false。

语法 ：arr.includes(searchElement,fromIndex)

searchElement： 必须 。需要查找的元素值 。

fromIndex：可选 。从该索引处开始查找 searchElement 。

如果为负值 ，则按升序从 array.length + fromIndex 的索引开始搜索 。默认为 0。

<script> let arr = ["a","b","c","d"]; // 0 1 2 3 // -4 -3 -2 -1 let result1 = arr.includes("b"); let result2 = arr.includes("b", 2); let result3 = arr.includes("b", -1); let result4 = arr.includes("b", -3); console.log(result1); // true console.log(result2); // false console.log(result3); // flase console.log(result4); // true </script>

数组 、 字符串 都可以使用 此方法 。

总结

我个人认为 ,includes方法好就好在 , 它 返回 的是一个Boolean 布尔值,

这样在项目中使用时 , 直接用 if ( 返回的值就可以了 ) ,

相较于indexOf方法用起来十分方便 。

但各有各的好 ,indexOf方法在其他场景比如配合splice方法

删除元素 时就挺好用的 。

图例 :

上一篇跳转链接 : JavaScript_数组常用方法【2】

相关新闻

LV30条码扫描器与PIC18F86J55硬件集成及解码优化

LV30条码扫描器与PIC18F86J55硬件集成及解码优化

1. LV30条码扫描器与PIC18F86J55硬件集成方案 LV30作为工业级线性影像式条码扫描器&#xff0c;其核心优势在于采用了650nm红色LED光源配合2048像素CMOS传感器阵列。这种配置使其能够以每秒1200次扫描的频率捕获条码图像&#xff0c;在常见的一维条码&#xff08;如UPC/EAN、Co…

2026/7/6 21:37:26
OpenChat架构深度解析：构建企业级智能对话系统的核心技术实践

OpenChat架构深度解析：构建企业级智能对话系统的核心技术实践

OpenChat架构深度解析&#xff1a;构建企业级智能对话系统的核心技术实践 【免费下载链接】OpenChat LLMs custom-chatbots console ⚡ 项目地址: https://gitcode.com/gh_mirrors/op/OpenChat 在人工智能技术快速发展的今天&#xff0c;企业级智能对话系统已成为数字化…

2026/7/6 21:37:26
Path of Building终极指南：免费离线构建规划器彻底改变流放之路游戏体验

Path of Building终极指南：免费离线构建规划器彻底改变流放之路游戏体验

Path of Building终极指南&#xff1a;免费离线构建规划器彻底改变流放之路游戏体验 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/GitHub_Trending/pa/PathOfBuilding Path of Building&#xff08;简称Po…

2026/7/6 21:37:26

最新新闻

Elmer FEM完全指南：开源多物理场仿真解决方案入门教程

Elmer FEM完全指南：开源多物理场仿真解决方案入门教程

Elmer FEM完全指南&#xff1a;开源多物理场仿真解决方案入门教程 【免费下载链接】elmerfem Official git repository of Elmer FEM software 项目地址: https://gitcode.com/gh_mirrors/el/elmerfem Elmer FEM是一款功能强大的开源有限元分析软件&#xff0c;专门用于…

2026/7/6 23:04:26
密钥治理实战：从明文密码到动态凭据的全链路安全体系

密钥治理实战：从明文密码到动态凭据的全链路安全体系

1. 项目概述&#xff1a;为什么“管好密钥”比写好代码更决定项目生死你有没有遇到过这样的情况&#xff1a;一个功能完美的内部管理后台&#xff0c;上线三天就被黑进数据库&#xff0c;所有用户手机号和邮箱全被拖走&#xff1b;或者一个刚跑通的自动化部署脚本&#xff0c;在…

2026/7/6 23:04:26
HashiCorp Vault RESTful API 实战：微服务密钥管理与动态机密集成指南

HashiCorp Vault RESTful API 实战：微服务密钥管理与动态机密集成指南

1. 项目概述&#xff1a;为什么我们需要一个“密钥保险箱”&#xff1f;在任何一个稍具规模的现代应用里&#xff0c;密钥、证书、数据库密码这些敏感信息的管理&#xff0c;都是一个让人头疼又不得不面对的问题。我见过太多团队&#xff0c;从初创公司到成熟企业&#xff0c;都…

2026/7/6 23:04:26
视频字幕提取革命：本地化AI工具如何让字幕制作效率提升1200%

视频字幕提取革命：本地化AI工具如何让字幕制作效率提升1200%

视频字幕提取革命&#xff1a;本地化AI工具如何让字幕制作效率提升1200% 【免费下载链接】video-subtitle-extractor 视频硬字幕提取&#xff0c;生成srt文件。无需申请第三方API&#xff0c;本地实现文本识别。基于深度学习的视频字幕提取框架&#xff0c;包含字幕区域检测、字…

2026/7/6 23:04:26
CentOS 7.9 离线安装 Telnet 服务：3个RPM包手动部署与安全加固

CentOS 7.9 离线安装 Telnet 服务：3个RPM包手动部署与安全加固

CentOS 7.9 离线环境下的Telnet服务部署与安全实践指南在企业级IT基础设施管理中&#xff0c;内网环境下的服务器运维常常面临无法连接互联网的挑战。本文将以CentOS 7.9为例&#xff0c;深入解析如何通过手动部署RPM包实现Telnet服务的离线安装&#xff0c;并提供一套完整的安…

2026/7/6 23:04:26
WS2812与R7FA6E2BB3CFM的嵌入式灯光控制方案

WS2812与R7FA6E2BB3CFM的嵌入式灯光控制方案

1. 项目概述&#xff1a;WS2812与R7FA6E2BB3CFM的强强联合在嵌入式开发领域&#xff0c;WS2812智能LED与瑞萨R7FA6E2BB3CFM微控制器的组合堪称黄金搭档。WS2812作为集成了控制电路和RGB三色LED的智能灯珠&#xff0c;仅需单线通信即可实现全彩控制&#xff0c;而R7FA6E2BB3CFM则…

2026/7/6 23:03:57

日新闻

中文大模型选型不是比参数，而是做工程化决策

中文大模型选型不是比参数，而是做工程化决策

1. 这不是“选模型”&#xff0c;而是“选解法”&#xff1a;为什么问“中文大模型哪一个最好”本身就是一个危险问题“第一个问题&#xff0c;中文大模型哪一个最好&#xff1f;”——这句话我每天在技术群、面试现场、客户会议室里至少听到七次。它像一句口头禅&#xff0c;也…

2026/7/6 0:00:13
STM32与LENA-R8构建全球定位与通信嵌入式系统

STM32与LENA-R8构建全球定位与通信嵌入式系统

1. LENA-R8与STM32F215RE的硬件组合解析这个项目最吸引人的地方在于将LENA-R8蜂窝通信模块与STM32F215RE微控制器相结合&#xff0c;构建了一个既能实现全球网络连接又能进行高精度位置跟踪的嵌入式系统。我们先拆解这两个核心硬件的特点。LENA-R8是u-blox推出的一款多模LTE Ca…

2026/7/6 0:00:13
含金量高的EMBA｜2026国内及境外中英双语EMBA综合实力TOP5榜单

含金量高的EMBA｜2026国内及境外中英双语EMBA综合实力TOP5榜单

一、评测引言随着国内企业全球化布局提速、数字化转型深化&#xff0c;企业创始人、高管及核心决策者对高端在职商科教育的需求持续升级&#xff0c;兼具国际化视野、本土化适配、学历认可度高的中英双语EMBA项目成为择校主流选择。本次2026 EMBA综合实力TOP5榜单&#xff0c;以…

2026/7/6 0:00:13

周新闻

3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略

3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略

3步彻底解决Windows右键菜单混乱问题&#xff1a;ContextMenuManager使用全攻略 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾为Windows右键菜单中那些…

2026/7/5 0:00:36
GXDE OS下Wayland兼容性实战：从deepin-mutter原理到VMware Tools修复

GXDE OS下Wayland兼容性实战：从deepin-mutter原理到VMware Tools修复

如果你正在用 GXDE OS 或者任何基于 Deepin 的发行版&#xff0c;并且遇到了“检测到窗口系统采用 Wayland 协议&#xff0c;程序即将退出”这类弹窗&#xff0c;或者发现 VMware Tools 在 Ubuntu 24.04 这类默认 Wayland 的系统上启动失败&#xff0c;那这篇文章就是为你准备的…

2026/7/6 0:29:16
企业AI落地困境与AgenticOps实践指南

企业AI落地困境与AgenticOps实践指南

1. 企业AI落地的现实困境与破局之道过去两年&#xff0c;大模型技术呈现爆发式增长&#xff0c;从GPT-3到GPT-4&#xff0c;从LLaMA到DeepSeek&#xff0c;模型参数规模从百亿级跃升至万亿级&#xff0c;多模态能力从单一文本扩展到图文音视频的综合处理。然而在企业应用层面&a…

2026/7/6 5:53:26

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串&#xff08;字符串&#xff09;的顺序存储中&#xff0c;内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明&#xff0c;因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/5 5:35:28
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/6 16:00:00
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手&#xff0c;围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语&#xff0c;它要解决“我现在该点哪…

2026/7/6 21:42:32