【JavaScript精通之道】掌握数据遍历:解锁现代化遍历方法,提升开发效率!

🎬 岸边的风:个人主页
🔥 个人专栏 :《 VUE 》 《 javaScript 》
⛺️ 生活的理想,就是为了理想的生活 !

目录
📚 前言
📘 1. reduce方法
📘 2. forEach方法
📘 3. map方法
📘 4. for循环
📘 5. filter方法
📘 6. for...of循环
📘 7. Object.keys方法
📘 8. Object.values方法
📘 9. Object.entries方法
📚 写在最后
📚 前言
在JavaScript开发中,经常需要对数组、对象等数据结构进行遍历操作。为了提高开发效率,JavaScript提供了多种灵活的遍历方法。本文将介绍JavaScript中常用的数据结构遍历方法,助你更好地操作数据。
遍历方法包括传统的for循环、forEach()方法、for...of循环和for...in循环。每种方法都有其独特的应用场景和特点,可以根据具体需求选择最合适的方式。
掌握这些遍历方法,你将能够轻松遍历数组、对象等数据结构,并灵活处理数据。无论是简单还是复杂的数据,你都能够快速、高效地进行遍历操作。让我们一起来学习JavaScript中的数据结构遍历技巧吧!
📘 1. reduce方法
reduce方法也是ES5新增的遍历方法,它可以遍历数组的每一个元素,对每一个元素执行回调函数,并返回一个累加值。
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((prev, cur) => {return prev + cur;
}, 0);
console.log(sum); // 15
📘 2. forEach方法
forEach方法是ES5新增的遍历方法,它可以遍历数组的每一个元素,对每一个元素执行回调函数。
const arr = [1, 2, 3, 4, 5];
arr.forEach((item) => {console.log(item);
});
📘 3. map方法
map方法也是ES5新增的遍历方法,它可以遍历数组的每一个元素,对每一个元素执行回调函数,并将回调函数的返回值组成一个新的数组返回。
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((item) => {return item * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]
📘 4. for循环
for循环是最基本、最常用的遍历方法。for循环通过设置计数器,来遍历数组或对象的每一个元素。
const arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++) {console.log(arr[i]);
}const obj = {a: 1, b: 2, c: 3};
for(let key in obj) {console.log(key, obj[key]);
}
📘 5. filter方法
filter方法也是ES5新增的遍历方法,它可以遍历数组的每一个元素,对每一个元素执行回调函数,并返回一个新的数组,该数组包含符合回调函数条件的元素。
const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter((item) => {return item % 2 === 0;
});
console.log(newArr); // [2, 4]
📘 6. for...of循环
for...of循环是ES6新增的遍历方法,它可以遍历数组、Set、Map等数据结构的每一个元素。
const arr = [1, 2, 3, 4, 5];
for(let item of arr) {console.log(item);
}const set = new Set([1, 2, 3, 4, 5]);
for(let item of set) {console.log(item);
}const map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
for(let [key, value] of map) {console.log(key, value);
}
📘 7. Object.keys方法
Object.keys方法可以获取对象的所有属性名,并返回一个数组。可以通过遍历该数组来遍历对象的属性。
const obj = {a: 1, b: 2, c: 3};
const keys = Object.keys(obj);
for(let key of keys) {console.log(key, obj[key]);
}
📘 8. Object.values方法
Object.values方法可以获取对象的所有属性值,并返回一个数组。可以通过遍历该数组来遍历对象的属性值。
const obj = {a: 1, b: 2, c: 3};
const values = Object.values(obj);
for(let value of values) {console.log(value);
}
📘 9. Object.entries方法
Object.entries方法可以获取对象的所有属性名和属性值,并返回一个二维数组。可以通过遍历该二维数组来遍历对象的属性名和属性值。
const obj = {a: 1, b: 2, c: 3};
const entries = Object.entries(obj);
for(let [key, value] of entries) {console.log(key, value);
}
📚 写在最后
JavaScript提供了多种灵活的遍历方法,用于操作数组、对象等数据结构。常见的方法包括传统的循环(如for、while)、forEach()方法、for...of循环和for...in循环。这些方法各有特点,可以根据需求选择使用。传统循环可精确控制迭代次数和逻辑,forEach()方法简洁易读,for...of循环适用于可迭代对象,for...in循环用于遍历对象的可枚举属性。此外,还有Object.keys()方法用于获取对象的可枚举属性键名。掌握这些遍历方法能够提高开发效率,轻松应对不同数据结构的遍历操作。
相关文章:
【JavaScript精通之道】掌握数据遍历:解锁现代化遍历方法,提升开发效率!
🎬 岸边的风:个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想,就是为了理想的生活 ! 目录 📚 前言 📘 1. reduce方法 📘 2. forEach方法 📘 3. map方法…...
opencv android sdk 使用中的问题
Plugin with id ‘kotlin-android’ not found 在build.gradle(:app)中添加以下内容 buildscript {ext {Kotlin_Verion "1.9.10"}dependencies {classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$Kotlin_Verion"}repositories {mavenCentral()} …...
《向量数据库指南》——向量数据库与人工智能是一对“双生子
在信息化社会中,数据的产生、储存和处理都成为了现代生活和工作中不可或缺的一部分。在这背景下,向量数据和向量数据库出现并发展起来,为我们解决了大量的问题,但同时也引出了新的问题和挑战。 首先,我们需要明白什么是向量数据。在人工智能时代,传统的结构化数据(如文本…...
WebSocket协议
WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接, 并进行双向数据传输 HTTP协议和WebSocket协议对比: HTTP是短连接WebSocket是长连接HT…...
Spring 事务是什么 ?事务的传播机制?
目录 1. 什么是事务? 2. Spring 事务三大基础设施 2.1 PlatformTransactionManager 平台事务管理器 2.2 TransactionDefinition 事务属性定义 2.3 TransactionStatus 事务状态 3. Transaction 注解 4. Spring 事务角色 5. Transaction 注解属性 5.1 事务的…...
黑马最新MybatisPlus教程!帮你实现快速开发
天下武功,唯快不破。在互联网世界中,更甚。产品更新要快、迭代要快、开发速度那必须得快。 在追求“快”的这条路上,大佬们都会使用上好的开发工具,来帮助自己实现高效开发,其中MybatisPlus便是提速的重要角色。 我们…...
秒杀场景下用乐观锁解决超卖问题
前言 超卖问题通常出现在多用户并发操作的情况下,即多个用户尝试购买同一件商品,导致商品库存不足或者超卖。解决超卖问题的方法有很多:乐观锁、Redis分布式锁、消息队列等。 为什么用乐观锁不用悲观锁来解决? 因为在秒杀场景下&…...
技术实践|Hive数据迁移干货分享
导语 Hive是基于Hadoop构建的一套数据仓库分析系统,可以将结构化的数据文件映射为一张数据库表,并提供完整的SQL查询功能。它的优点是可以通过类SQL语句快速实现简单的MapReduce统计,不用再开发专门的MapReduce应用程序,从而降低…...
The remote endpoint was in state [TEXT_FULL_WRITING]
报这个错是因为在websocket接收与发送消息时,资源互抢造成的,有很多帖子说将session锁住, 但是同一个账号多个客户端登陆的时候,session是不同的,所以只能锁住一个session,还是出现这个问题。 解决办法&a…...
微信小程序ios下,border显示不全兼容问题解决
小程序在ios系统中,如果border小于1px的情况下,border就可能显示不全(可能少了上下左右任意一边) 只需要加一个::after或::before伪类,使用绝对定位定在原来元素上边就不会产生问题了! .d_card_line1_tag {padding: 1rpx 14rpx;…...
《Effective C++中文版,第三版》读书笔记6
条款32:确定你的public继承塑模出is-a关系 简单知识点回顾(若不知道那就是扫盲了): is-a关系:子类public继承父类。比如说Apublic继承了B。我们可以说A是B的一种特殊情况 has-a关系:指的是一种组合关系&…...
【Docker 】Docker 客户端,容器使用,启动容器,启动已停止运行的容器,停止一个容器,进入容器
作者简介: 辭七七,目前大一,正在学习C/C,Java,Python等 作者主页: 七七的个人主页 文章收录专栏: 七七的闲谈 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖…...
CTFshow 菜狗杯 web方向 全
文章目录 菜狗杯 web签到菜狗杯 web2 c0me_t0_s1gn菜狗杯 我的眼里只有$菜狗杯 抽老婆菜狗杯 一言既出菜狗杯 驷马难追菜狗杯 TapTapTap菜狗杯 Webshell菜狗杯 化零为整菜狗杯 无一幸免菜狗杯 无一幸免_FIXED菜狗杯 传说之下(雾)菜狗杯 算力超群菜狗杯 算…...
深入理解sql:进阶版
目录 背景举例子查询和嵌套查询:联合查询(UNION和UNION ALL):窗口函数:CTE(公共表达式):索引优化:事务隔离级别和锁定:性能优化:存储过程和函数&a…...
day31 | 455.分发饼干、376. 摆动序列、53. 最大子序和
目录: 解题及思路学习 455. 分发饼干 假设你是一位很棒的家长,想要给你的孩子们一些小饼干。但是,每个孩子最多只能给一块饼干。 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最小尺寸&#…...
C# textBox 右键菜单 contextMenuStrip
需求: 想在上图空白处可以右键弹出菜单,该怎么做呢? 1.首先,拖出一个 ContextMenuStrip。 随便放哪里都行,如下: 2.在textBox里关联这个“右键控件”即可,如下: 最终效果如下: 以上…...
TCP拥塞控制详解 | 7. 超越TCP
网络传输问题本质上是对网络资源的共享和复用问题,因此拥塞控制是网络工程领域的核心问题之一,并且随着互联网和数据中心流量的爆炸式增长,相关算法和机制出现了很多创新,本系列是免费电子书《TCP Congestion Control: A Systems …...
stm32之26.spi外设
...
C++信息学奥赛1177:奇数单增序列
#include<bits/stdc.h> using namespace std; int main(){int n;cin>>n; // 输入整数 n,表示数组的大小int arr[n]; // 创建大小为 n 的整型数组for(int i0;i<n;i) cin>>arr[i]; // 输入数组元素for(int i0;i<n;i){ // 对数组进行冒泡排序f…...
Java的数组是啥?
1.数组是啥? 数组是一块连续的内存,用来存储相同类型的数据 (1)如何定义数组? 1.int[] array {1,2,3,4} new int[]{1,2,3,4};//这里的new是一个关键字,用来创建对象 2.数组就是一个对象 动态初始化 …...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
CSS | transition 和 transform的用处和区别
省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗? 在ComfyUI中实现图生视频并延长到5秒,需要结合多个扩展和技巧。以下是完整解决方案: 核心工作流配置(24fps下5秒120帧) #mermaid-svg-yP…...
