js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
| 遍历方法 | 返回值 | 使用场景 | 备注 | 副作用 |
|---|---|---|---|---|
| for 循环 | —— | 遍历数组 | 通用 | 可以改变原数组 |
| forEach 循环 | —— | 遍历数组 | ES5 新增,不支持中断和异步 | 可以改变原数组 |
| for of 循环 | —— | 遍历数组 | ES6 新增 | 可以改变原数组 |
| map | 格式化后的数组 | 格式化 | 数组的API | 不会改变原数组 |
| filter | 过滤后的数组 | 过滤 | 数组的API | 不会改变原数组 |
| reduce | 最终计算结果 | 累计 | 数组的API | 不会改变原数组 |
| every | 匹配结果 | 全部匹配 | 数组的API | 不会改变原数组 |
| some | 匹配结果 | 部分匹配 | 数组的API | 不会改变原数组 |
for 循环
缺点:编码不太便捷
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}
forEach 循环
缺点:不支持中断和异步
let arr = [1, 2, 3]arr.forEach((item, index) => {console.log(item, index)
})
不支持中断
使用 return 提前结束当次循环,但还会继续遍历!
let arr = [1, 2, 3]arr.forEach((item) => {console.log(item)if (item === 2) {return}console.log('执行完本次循环')
})
打印结果
1
执行完本次循环
2
3
执行完本次循环
不支持异步
import axios from 'axios'let infoList = []let id_list = ['1', '2', '3']id_list.forEach(async (id) => {let res = await axios.get(`http://jsonplaceholder.typicode.com/users/${id}`)console.log(res)infoList.push(res.data)
})console.log(infoList) // []
for of 循环【推荐】
默认只能遍历数组中的元素
let arr = [1, 2, 3]for (let item of arr) {console.log(item)
}
要获取到数组的下标,需使用 entries
let arr = [1, 2, 3]for (let [index, item] of arr.entries()) {console.log(index, item)
}
支持中断
使用 break 提前跳出循环(常用于遍历数组,查找目标元素)
let arr = [1, 2, 3]for (let item of arr) {console.log(item)if (item === 2) {break}
}
// 1 2
支持异步
import axios from 'axios'let infoList = []let id_list = ['1', '2', '3']async function getInfo(id_list, infoList) {for (let id of id_list) {let res = await axios.get(`http://jsonplaceholder.typicode.com/users/${id}`)infoList.push(res.data)}console.log(infoList) // 可得到预期结果
}getInfo(id_list, infoList)
但更推荐使用 Promise.all 实现
import axios from 'axios'let infoList = []let id_list = ['1', '2', '3']let promise_list = []for (let id of id_list) {promise_list.push(axios.get(`http://jsonplaceholder.typicode.com/users/${id}`))
}Promise.all(promise_list).then((res) => {infoList = res.map((item) => item.data)console.log(infoList) // 可得到预期结果
})
map 格式化
let arr = [{age: 20},{age: 30},{age: 40}
]const result = arr.map((item) => {return {age: `${item.age}岁`}
})console.log(result)
// [ { age: '20岁' }, { age: '30岁' }, { age: '40岁' } ]
filter 过滤
let arr = [{name: '朝阳',age: 20},{name: '张三',age: 30},{name: '李四',age: 40}
]const result = arr.filter(({ age }) => age < 30)console.log(result)
//[ { name: '朝阳', age: 20 } ]
reduce 累计
如求和
let arr = [1, 2, 3]
let sum = arr.reduce((lastResult, nextItem) => lastResult + nextItem)
console.log(sum) // 6
更多 reduce 高级用法见
https://blog.csdn.net/weixin_41192489/article/details/116661854
every 全部匹配
let arr = [1, 2, 3]// 是否每一个元素都小于 3
const result = arr.every((item) => item < 3)console.log(result)
// false
some 部分匹配
let arr = [1, 2, 3]// 是否存在元素小于 3
const result = arr.some((item) => item < 3)console.log(result)
// true
相关文章:
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
遍历方法返回值使用场景备注副作用for 循环——遍历数组通用可以改变原数组forEach 循环——遍历数组ES5 新增,不支持中断和异步可以改变原数组for of 循环——遍历数组ES6 新增可以改变原数组map格式化后的数组格式化数组的API不会改变原数组filter过滤后的数组过滤…...
Node.js开发实战 视频教程 下载
ode.js开发实战 视频教程 下载 下载地址 https://download.csdn.net/download/m0_67912929/89487510 01-课程介绍.mp4 02-内容综述.mp4 03-Node.js是什么? .mp4 04-Node.js可以用来做什么?.mp4 05-课程实战项目介绍.mp4 06-什么是技术预研? .mp4 07-Node.js开发环境…...
VS2022(Visual Studio 2022)最新安装教程
1、下载 1、下载地址 - 官网地址:下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux - 根据自己的电脑的 【操作系统】 灵活选择。 2、安装包 【此处为Windows系统安装包】 2、安装 1、打开软件 - 右击【以管理员身份打开】, 2、准备配置 …...
从华为和特斯拉之争,看智能驾驶的未来
“一旦特斯拉完全解决自动驾驶问题并量产Optimus,任何空头都将被消灭,即使是比尔-盖茨也不例外。”7月2日,马斯克再次在社交媒体X上画下了这样的“大饼”。 与此同时,特斯拉的股价在最近的三个交易日也迎来了24%的涨幅,…...
20240705 每日AI必读资讯
📚Retool 刚刚发布了最新2024上半年《人工智能现状报告》 - 收集了约750名技术人员的意见 - 包括开发者、数据团队和各行业的领导者,了解如何利用人工智能产生真正的影响。 🔗 2024上半年《人工智能现状报告》Retool刚刚发布了最新-CSDN b…...
C++ 设计模式之访问者模式
C 设计模式之访问者模式 简介 1、访问者模式 (Visitor)是一种行为型设计模式,它表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作。 使用该模式可以在不修改已有程序结构的前提…...
linux——IPC 进程间通信
IPC 进程间通信 interprocess communicate IPC(Inter-Process Communication),即进程间通信,其产生的原因主要可以归纳为以下几点: 进程空间的独立性 资源隔离:在现代操作系统中,每个进程都…...
JAVA数字化产科管理平台源码:涵盖了孕妇从建档、产检、保健、随访、分娩到产后42天全流程的信息化管理
JAVA数字化产科管理平台源码:涵盖了孕妇从建档、产检、保健、随访、分娩到产后42天全流程的信息化管理 智慧产科管理系统是基于自主研发妇幼信息平台,为医院产科量身打造的信息管理系统,涵盖了孕妇从建档、产检、保健、随访、分娩到产后42天全…...
http数据传输确保完整性和保密性整流程方案(含源码)
往期文章回顾 【深度学习】 【深度学习】物体检测/分割/追踪/姿态估计/图像分类检测演示系统【含源码】【深度学习】YOLOV8数据标注及模型训练方法整体流程介绍及演示【深度学习】行人跌倒行为检测软件系统【深度学习】火灾检测软件系统【深度学习】吸烟行为检测软件系统【深度…...
UE插件与云渲染:10个提升效率的选择
Unreal Engine(虚幻引擎)的插件生态丰富多样,从提升视觉效果到优化工作流程,为开发者提供了无限扩展的可能。本文推荐10款备受欢迎的插件,助你激发创意,提升开发效率. 一、地牢建筑师:程序化关…...
[Shell编程学习路线]——shell脚本中case语句多分支选择详解
🏡作者主页:点击! 🛠️Shell编程专栏:点击! ⏰️创作时间:2024年6月21日16点30分 🀄️文章质量:95分 ————前言———— 在Shell编程中,处理多种条件…...
Django REST Framework(四)DRF Serializer
作用: 1. 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 2. 反序列化,把客户端发送过来的数据,经过request以后变成字典,序列化器可以把字典转成模型 3. 反序列化,完成数据校验功能 定义序列化器 Django REST framework中的Serializer使用类来定义&a…...
【C语言】bool 关键字
在C语言中,bool类型用于表示布尔值,即真或假。C语言本身在标准库中并未提供布尔类型,直到C99标准引入了stdbool.h头文件。该头文件定义了bool类型,以及两个常量:true和false。在此之前,通常使用整数来表示布…...
开发电商ERP系统需要接入哪些平台API?
跟随全渠道发展趋势,很多实体商家开设电商店铺,为消费者提供便捷的购物体验,增强消费者的满意度,同时也提升了企业自身的市场竞争力。为了满足商家业务拓展需求,很多原本主要服务于实体商贸企业的ERP服务商,…...
Meet AI4S 直播预告丨房价分析新思路:神经网络直击复杂地理环境中的空间异质性
近年来,房地产市场起起落落,房价已经成为了扰动居民幸福感的重要影响因素。大多数家庭都需要面对「买不买房、何时买房、在哪儿买房、买什么房」的艰难抉择,每一个问题的答案都在某种程度上与房价的波动息息相关。 近年来,我国各…...
支持向量机(SVM)在机器学习中的简单示例
目录 工作原理 核函数 SVM用于分类 结果分析 结论 ❤❤❤动动发财的小手点点赞点点关注哦~~~❤❤❤ 支持向量机是一种强大的监督学习模型,用于分类和回归任务。它通过找到数据点之间的最优边界来区分不同的类别。SVM特别适用于那些具有清晰边界但线性不可分的…...
使用Anaconda虚拟环境安装Opencv、pytorch、torchvision踩坑记录
电脑 python 环境版本过高与下载Opencv(3.4以下)不匹配,因为版本过高部分算法收米, 从而在虚拟环境重新下载python老版本 本文默认您的电脑上已经安装了Anaconda 我是按照这位博文安装的 安装Opencv (详解)安装3.4.1.15版本…...
【人工智能】CPU、GPU与TPU:人工智能领域的核心处理器概述
在人工智能和计算技术的快速发展中,CPU(中央处理器)、GPU(图形处理器)和TPU(张量处理器)作为核心处理器,各自扮演着不可或缺的角色。它们不仅在性能上各有千秋,还在不同的…...
【康复学习--LeetCode每日一题】3099. 哈沙德数
题目: 如果一个整数能够被其各个数位上的数字之和整除,则称之为 哈沙德数(Harshad number)。给你一个整数 x 。如果 x 是 哈沙德数 ,则返回 x 各个数位上的数字之和,否则,返回 -1 。 示例 1&a…...
docker使用jdk21启动jar包报错
[0.007s][warning][os,thread] Failed to start thread "GC Thread#0" - pthread_create failed (EPERM) for attributes: stacksize: 1024k, guardsize: 4k, detached. [0.007s][error ][gc,task ] Failed to create worker thread解决办法 1 (使用doc…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
Spring Boot 实现流式响应(兼容 2.7.x)
在实际开发中,我们可能会遇到一些流式数据处理的场景,比如接收来自上游接口的 Server-Sent Events(SSE) 或 流式 JSON 内容,并将其原样中转给前端页面或客户端。这种情况下,传统的 RestTemplate 缓存机制会…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个?3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制(过半机制࿰…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
