使用JS遍历JSON数组
在JavaScript中,遍历JSON对象或数组是一个常见的操作,尤其是在处理复杂数据结构时。这里有几种不同的方法可以根据你的需求进行遍历。
1. 遍历JSON对象
如果你有一个JSON对象(实际上在JavaScript中,所有的对象都可以视为JSON对象,因为JSON是一种数据格式,而JavaScript对象是其实现),你可以使用for...in循环或者Object.keys()方法。
使用for...in循环
const jsonObj = {
name: "John",
age: 30,
city: "New York"
};
for (const key in jsonObj) {
if (jsonObj.hasOwnProperty(key)) {
console.log(`${key}: ${jsonObj[key]}`);
}
}
使用Object.keys()方法
const jsonObj = {
name: "John",
age: 30,
city: "New York"
};
Object.keys(jsonObj).forEach(key => {
console.log(`${key}: ${jsonObj[key]}`);
});
2. 遍历JSON数组
如果你有一个JSON数组(实际上在JavaScript中,数组就是数组),你可以使用简单的for循环、forEach方法或者for...of循环。
使用for循环
const jsonArray = [
{ name: "John", age: 30 },
{ name: "Jane", age: 25 },
{ name: "Doe", age: 22 }
];
for (let i = 0; i < jsonArray.length; i++) {
console.log(`Name: ${jsonArray[i].name}, Age: ${jsonArray[i].age}`);
}
使用forEach方法
const jsonArray = [
{ name: "John", age: 30 },
{ name: "Jane", age: 25 },
{ name: "Doe", age: 22 }
];
jsonArray.forEach(item => {
console.log(`Name: ${item.name}, Age: ${item.age}`);
});
使用for...of循环(ES6+)
const jsonArray = [
{ name: "John", age: 30 },
{ name: "Jane", age: 25 },
{ name: "Doe", age: 22 }
];
for (const item of jsonArray) {
console.log(`Name: ${item.name}, Age: ${item.age}`);
}
注意事项:
当使用for...in循环遍历对象时,最好检查hasOwnProperty来避免继承的属性。例如,某些对象可能通过原型链继承了额外的属性。
在处理大型数据结构时,考虑性能和内存使用,特别是在浏览器环境中。对于大型数组或对象,使用forEach或for...of可能更合适,因为它们通常更简洁且易于理解。对于更复杂的数据结构或需要更细粒度控制的情况,可以考虑使用递归或专门的库(如Lodash)来处理。例如,Lodash提供了如_.forEachDeep等方法来深度遍历嵌套对象和数组。
这些方法应该能满足你在JavaScript中遍历JSON对象或数组的基本需求。
相关文章:
使用JS遍历JSON数组
在JavaScript中,遍历JSON对象或数组是一个常见的操作,尤其是在处理复杂数据结构时。这里有几种不同的方法可以根据你的需求进行遍历。 1. 遍历JSON对象 如果你有一个JSON对象(实际上在JavaScript中,所有的对象都可以视为JSON对象…...
Go基于协程池的延迟任务调度器
原理 通过用一个goroutine以及堆来存储要待调度的延迟任务,当达到调度时间后,将其添加到协程池中去执行。 主要是使用了chan、Mutex、atomic及ants协程池来实现。 用途 主要是用于高并发及大量定时任务要处理的情况,如果使用Go协程来实现每…...
k8S通过代理将集群外的中间件引入集群内访问 —— 筑梦之路
背景说明 有部分中间件是跑在Kubernetes集群之外,我们希望通过service的方式来访问集群外的中间件,比如访问我们k8s集群外的elasticsearch集群。 ES节点本身又处在一个负载均衡IP:192.168.100.100 之后,但是代理的端口号是9202&am…...
Linux 第三次脚本作业
源码编译安装httpd 2.4,提供系统服务管理脚本并测试(建议两种方法实现) 一、第一种方法 1、把 httpd-2.4.63.tar.gz 这个安装包上传到你的试验机上 2、 安装编译工具 (俺之前已经装好了) 3、解压httpd包 4、解压后的httpd包的文…...
使用通义万相Wan2.1进行视频生成
使用通义万相Wan2.1进行视频生成 源代码准备运行环境准备创建Python虚拟环境并激活安装依赖包 模型下载生成视频官网的视频生成例子简单描述场景视频生成示例详细描述场景视频生成示例 最近通义万相开源了其视频生成模型。模型有两个版本,一个是1.3B的,一…...
AI技术为旅行社打开新流量入口
2月28日消息,在“2025旅业发展高峰论坛”上,马蜂窝交易中心总经理绳志成在主题演讲中系统性阐述了AI技术对自由行市场的颠覆性影响。 绳志成介绍,传统“大而全”的跟团游产品吸引力持续走低,用户更愿意为“小众秘境”、“在地文化…...
SuperMap iClient3D for WebGL 影像数据可视范围控制
在共享同一影像底图的服务场景中,如何基于用户权限体系实现差异化的数据可视范围控制?SuperMap iClient3D for WebGL提供了自定义区域影像裁剪的方法。让我们一起看看吧! 一、数据制作 对于上述视频中的地图制作,此处不做讲述&am…...
API网关相关知识点
目录 API网关基础知识总结 | JavaGuide Spring Cloud Gateway常见问题总结 | JavaGuide API网关 | 小傅哥 bugstack 虫洞栈 美团: 百亿规模API网关服务Shepherd的设计与实现 vivo: 微服务 API 网关架构实践 唯品会: 高吞吐消息网关的探索与思考 API网关基础知识总结 | J…...
Opencv 图像形态学操作
3.1 形态学-腐蚀操作 img cv2.imread(CSDN.png) cv2.imshow(CSDN, img) cv2.waitKey(0) cv2.destroyAllWindows如果腐蚀核的覆盖区域内的所有像素值都满足条件(阈值),则中心像素的值保持不变;如果有任何像素值不满足条件&#x…...
Readability.js 与 Newspaper提取网页内容和元数据
在当今信息爆炸的时代,网页内容的提取和处理变得尤为重要。无论是从新闻网站、博客还是教程网站中提取内容,都需要一个高效、准确的工具来帮助我们去除无关信息,提取出有价值的正文内容。这不仅能够提高我们的工作效率,还能让我们…...
小程序Three Dof识别 实现景区AR体验
代码工程 GitCode - 全球开发者的开源社区,开源代码托管平台 dof...
腾讯2025年软件测试面试题
以下是基于腾讯等一线互联网公司软件测试岗位的面试趋势和技术要求,025年出现的软件测试面试题。这些问题涵盖了基础知识、自动化测试、性能测试、安全测试、编程能力等多个方面,供参考和准备。 一、基础知识 软件测试的基本概念...
SSL域名证书怎么续期?
在当今数字化时代,网站的安全性已成为企业和个人不可忽视的重要因素。SSL域名证书作为保障网站数据传输安全的关键工具,其重要性不言而喻。然而,SSL证书并非永久有效,它们通常有一个固定的有效期,到期后需要进行续期以…...
Grok3使用体验与模型版本对比分析
文章目录 Grok的功能DeepSearch思考功能绘画功能Grok 3的独特功能 Grok 3的版本和特点与其他AI模型的比较 最新新闻:Grok3被誉为“地球上最聪明的AI” 最近,xAI公司正式发布了Grok3,并宣称其在多项基准测试中展现了惊艳的表现。据官方消息&am…...
《算法宝典:全类型题目索引》
目录 🌴递归、搜索与回溯 一、递归 二、二叉树中的深搜 三、穷举vs暴搜vs深搜vs回溯vs剪枝 四、综合练习 五、FloodFill 算法 六、记忆化搜索 🌵优选算法 一、双指针 二、滑动窗口 三、二分查找 四、前缀和 五、位运算 六、模拟 七、分治 …...
Windows 11 部署 GPUStack 运行 DeepSeek
1. 介绍 DeepSeek 是一个强大的深度学习框架,适用于图像识别、自然语言处理等任务。GPUStack 是一个高效的 GPU 资源管理工具,能够帮助用户更好地利用 GPU 资源进行深度学习任务。本文将详细介绍如何在 Windows 11 系统上部署 GPUStack 并运行 DeepSeek…...
LangChain教程 - RAG - PDF问答
系列文章索引 LangChain教程 - 系列文章 在现代自然语言处理(NLP)中,基于文档内容的问答系统变得愈发重要,尤其是当我们需要从大量文档中提取信息时。通过结合文档检索和生成模型(如RAG,Retrieval-Augment…...
Windows 图形显示驱动开发-WDDM 3.2-自动显示切换(十二)
API 更改 ADS 功能增加了以下公共 API 功能: 枚举系统中的多路复用器设备。查询有关多路复用器的信息,例如,它连接了哪些目标,以及当前切换到哪个目标。触发多路复用器切换。如何检测多路复用器是否已切换。 枚举系统中的多路复…...
《当齐天大圣踏入3A游戏世界:黑神话·悟空的破壁传奇》:此文为AI自动生成
国产 3A 游戏的破晓之光 2024 年 8 月 20 日,这一天注定被铭记在中国游戏发展的史册上。国产首款 3A 游戏《黑神话・悟空》震撼上线,犹如一颗重磅炸弹,在全球游戏市场掀起了惊涛骇浪。仅仅上线 3 小时,其同时在线人数便突破了 140 万,一举打破 Steam 纯单机游戏最高在线纪…...
Graphics View画一个可调速的风机(pyqt)
效果如图: 风机具备调节转速的功能,转速通过扇叶旋转的快慢来区别,共分为四档,其中零档为静止状态,而一、二、三档则依次增加转速。在代码中,BlowerWrapper 类包含了可旋转的扇叶、风机外框以及选项三个主要…...
stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)
本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...
HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...
CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!
本文介绍了一种名为AnomalyAny的创新框架,该方法利用Stable Diffusion的强大生成能力,仅需单个正常样本和文本描述,即可生成逼真且多样化的异常样本,有效解决了视觉异常检测中异常样本稀缺的难题,为工业质检、医疗影像…...
Xcode 16 集成 cocoapods 报错
基于 Xcode 16 新建工程项目,集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...
【Go语言基础【6】】字符串格式化说明
文章目录 零、格式化常用场景一、Go 字符串格式化核心概念二、常用格式化占位符1. 整数类型2. 浮点数类型3. 字符串与布尔类型4. 指针与通用类型 三、宽度与精度控制1. 宽度控制2. 精度控制(浮点数/字符串) 零、格式化常用场景 数值转字符串:…...
HTMLCSS 学习总结
目录 一、HTML核心概念 三大前端技术作用 HTML基础结构 开发工具:VS Code 专业配置安装步骤: 二、HTML标签大全(含表格) 三、CSS核心技术 1. 三种引入方式对比 2.…...
