JavaScript中,for...in 和 for...of 循环遍历对象和数组

for...in

for...in 循环主要用于遍历对象的可枚举属性(包括继承的属性)。然而,它也可以遍历数组,但此时它遍历的是数组的索引(作为字符串),而不是数组的值。

对数组使用 for...in

const array = ['apple', 'banana', 'cherry'];  
for (const key in array) {  console.log(key); // 输出:'0', '1', '2'(字符串形式的索引)  console.log(array[key]); // 输出数组的值  
}

但是,使用 for...in 遍历数组通常不是一个好主意,因为它会遍历数组的所有可枚举属性,包括继承的属性(如果有的话),并且它不能按照数组索引的顺序遍历(虽然对于标准数组来说,它通常看起来是顺序的)。

对对象使用 for...in

const obj = { a: 1, b: 2, c: 3 };  
for (const key in obj) {  console.log(key); // 输出:'a', 'b', 'c'(对象的属性名)  console.log(obj[key]); // 输出对应的属性值  
}

for...of

for...of 循环用于遍历可迭代对象(包括 Array、Map、Set、String、TypedArray、函数的 arguments 对象等等)的值。

对数组使用 for...of

const array = ['apple', 'banana', 'cherry'];  
for (const value of array) {  console.log(value); // 输出:'apple', 'banana', 'cherry'(数组的值)  
}

这是遍历数组的首选方法,因为它直接遍历数组的值,而不是索引。

对对象使用 for...of(通常不可行)

默认情况下,普通对象不是可迭代的,因此你不能用 for...of 直接遍历一个对象的属性。但你可以使用像 Object.keys()Object.values(), 或 Object.entries() 这样的方法获取对象的可枚举属性,然后将它们转换为可迭代对象。

const obj = { a: 1, b: 2, c: 3 };  
for (const key of Object.keys(obj)) {  console.log(key); // 输出:'a', 'b', 'c'(对象的属性名)  
}  for (const value of Object.values(obj)) {  console.log(value); // 输出:1, 2, 3(对象的属性值)  
}  for (const [key, value] of Object.entries(obj)) {  console.log(key, value); // 输出:['a', 1], ['b', 2], ['c', 3](属性名和值)  
}

当遍历数组时,应优先使用 for...of;当遍历对象的属性时,应使用 for...in(但通常最好与 Object.keys()Object.values(), 或 Object.entries() 一起使用)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/832338.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【.sh】Shell 脚本文件的基础内容

目录 🌊1. 基础知识 🌊2. 简单示例 🌍2.1 示例一 输出"Hello, World!" 🌍2.2 示例二 输入输出创建 🌊1. 基础知识 .sh文件是什么? .sh文件即 Shell 脚本文件,通常用来执行一系列…

Ranni: Taming Text-to-Image Diffusion for Accurate Instruction Following

Ranni: Taming Text-to-Image Diffusion for Accurate Instruction Following abstract 我们引入了一个语义面板作为解码文本到图像的中间件,支持生成器更好地遵循指令 Related work 最近的工作还通过包含额外的条件(如补全掩码[15,45]、…

10 华三vlan技术介绍

AI 解析 -Kimi-ai Kimi.ai - 帮你看更大的世界 (moonshot.cn) 虚拟局域网(VLAN)技术是一种在物理网络基础上创建多个逻辑网络的技术。它允许网络管理员将一个物理网络分割成多个虚拟的局域网,这些局域网在逻辑上是隔离的,但实际…

【LeetCode刷题记录】105. 从前序与中序遍历序列构造二叉树 106. 从中序与后序遍历序列构造二叉树

105 从前序与中序遍历序列构造二叉树 给定两个整数数组 preorder 和 inorder ,其中 preorder 是二叉树的先序遍历, inorder 是同一棵树的中序遍历,请构造二叉树并返回其根节点。 示例 1: 输入: preorder [3,9,20,15,7], inorder [9,3,1…

Pandas入门篇(三)-------数据可视化篇2(pandas-plot篇)

目录 概述一、格式1. 生成pandas.plotting对象来生成图表2. 调用plot()函数来生成图表3.支持的图表类型 二、单变量绘图常用图表1. 柱状图(bar)使用场景代码实现 2. 折线图(line)(默认即为折线图)适用场景代…

计算机毕业设计 | vue+springboot 在线花店后台管理系统(附源码)

1,绪论 1.1 项目背景 随着社会发展,网上购物已经成为我们日常生活的一部分。但是,至今为止大部分电商平台都是从人们日常生活出发,出售都是一些日常用品比如:食物、服装等等,并未发现一个专注于鲜花的电商…

从一到无穷大 #25 DataFusion:可嵌入,可扩展的模块化工业级计算引擎实现

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作),由 李兆龙 确认,转载请注明版权。 文章目录 引言架构总览与可扩展性Catalog and Data SourcesFront End逻辑计划与逻辑计划优化器…

使用台式机打开腾讯会议后打开麦克风提示:未检测到可用的麦克风,请插入设备后重试

解决方法如下: 台式机是不带输入设备的,也就是不自带麦克风的,而笔记本电脑是带的。这时候在台式机上可以通过插入有线耳机充当输入设备,就可以正常使用麦克风功能了。 插入之后,可以看到设置里面声音界面包含了一个…

new mars3d.control.MapSplit({实现点击卷帘两侧添加不同图层弹出不同的popup

new mars3d.control.MapSplit({实现点击卷帘两侧添加不同图层弹出不同的popup效果: 左侧: 右侧: 说明:mars3d的3.7.12以上版本才支持该效果。 示例链接: 功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技 相关代…

关于视频号小店,常见问题解答,开店做店各方面详解

大家好,我是电商笨笨熊 视频号小店作为今年风口,一个新推出的项目,凭借着自身流量加用户群体的优势吸引了不少的电商玩家。 但对于很多玩家来说,视频号小店完全是一个新的项目、新的领域,因此也会存在很多的疑问&…

数据分析从入门到精通 2.pandas修真之前戏基础

从爱上自己那天起,人生才真正开始 —— 24.5.6 为什么学习pandas numpy已经可以帮助我们进行数据的处理了,那么学习pandas的目的是什么呢? numpy能够帮助我们处理的是数值型的数据,当然在数据分析中除了数值型的数据还有好多其他类型…

接口自动化测试之-requests模块详解

一、requests背景 Requests 继承了urllib2的所有特性。Requests支持HTTP连接保持和连接池,支持使用cookie保持会话,支持文件上传,支持自动确定响应内容的编码,支持国际化的 URL 和 POST 数据自动编码。 二、requests安装 利用p…

CI/CD笔记.Gitlab系列.新用户管理

CI/CD笔记.Gitlab系列 新用户管理 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_285502…

记一次攻防演练

看到一处登录后台,各种操作都尝试过无果,翻了一下js,看到一处文件上传接口泄露(没图了,已经整改了) 构造上传数据包,很nice,上传成功 直接连接webll,搭建隧道进行内网穿透 翻看配置文件&#xf…

简单说说 gather_plan_statistics

DBA的日常核心工作之一是对线上有性能问题的SQL语句进行优化。其中优化SQL语句的最关键的一步是得到SQL的执行计划。那么一个常见的问题来了。如何得到一个SQL语句的真实执行计划?方法有很多。今天说其中一种方法就是使用 gather_plan_statistics(收集计划统计信息) 首先简单…

东方生物工程设备技术有限责任公司带您解读2024第12届上海生物发酵展览会

参展企业介绍 镇江东方生物工程设备技术有限责任公司是国内规模最大的自动成套生化反应设备的专业制造商,也是江苏省最早的专业发酵罐制造公司。公司主要从事液体发酵设备、固体发酵设备、特殊新型生化反应设备以及自动生化反应过程控制系统的研究、开发与制造。 公…

鸿蒙内核源码分析(事件控制篇) | 任务间多对多的同步方案

官方概述 先看官方对事件的描述. 事件(Event)是一种任务间通信的机制,可用于任务间的同步。 多任务环境下,任务之间往往需要同步操作,一个等待即是一个同步。事件可以提供一对多、多对多的同步操作。 一对多同步模型…

HFP event

0 Preface/Foreword NOTE:在来电提示音在响时候,每3s会进入一次。 也就是说:协议栈,没3s会调用一次app_hfp_event_callback。 回调函数在hfp初始化时候通过btif_hf_register_callback注册。 提示音调节: iPhone6s iO…

区块链开发用的是哪种编程语言?

区块链技术作为近年来备受瞩目的新兴技术之一,其核心的特性之一就是去中心化、安全性高、透明度高和可扩展性强。而区块链的开发语言则是实现这一技术的关键因素之一。那么,区块链开发语言是哪一种编程语言呢? 一、区块链开发语言的特点和选…

OZON卖家必看!2024年OZON运营必备工具大全

OZON运营过程中会用到许多工具网站,都是OZON跨境人运营必备的。为了帮助新卖家在运营OZON时更高效,下面汇总了一份我们在日常运营中频繁使用的工具网站列表。这样大家可以一次性找到所需的所有网址,无需在多个网站间来回切换,节省…