当前位置: 首页 > news >正文

JS中的for...in和for...of有什么区别?

你好,我是沐爸,欢迎点赞、收藏、评论和关注。

在 JavaScript 中,for...infor...of 是两种用于遍历数组(或其他可迭代对象)的循环语句,但它们之间存在显著的差异。

一、遍历数组

for…in

const arr = ['apple', 'banana', 'cherry']for (const index in arr) {console.log(index, arr[index])
}
// 0 apple
// 1 banana
// 2 cherry

遍历数组的索引,访问数组元素通过 arr[index]形式。

for…of

const arr = ['apple', 'banana', 'cherry']for (const value of arr) {console.log(value)
}
// apple
// banana
// cherry

遍历数组元素,不能访问索引

二、遍历对象

for...in
const obj = {name: '张三',age: 20
}for (const key in obj) {console.log(key, obj[key])
}
// name 张三
// age 20

遍历对象的键(key),通过obj[key]访问属性的值。

for…of

const obj = {name: '张三',age: 20
}for (const key of obj) {console.log(key)
}
// TypeError: obj is not iterable

for...of 循环默认并不支持直接遍历对象的属性。因为for...of循环是为可迭代对象(如Array, Map, Set, arguments等)设计的,这些对象都有一个[Symbol.iterator]方法。

所以,常见的做法是结合 Object.keys()Object.values或者Object.entries() 进行遍历。

const obj = {name: '张三',age: 20
}for (const key of Object.keys(obj)) {console.log(key, obj[key])
}
// name 张三
// age 20for (const value of Object.values(obj)) {console.log(value)
}
// 张三
// 20for (const [key, value] of Object.entries(obj)) {console.log(key, value)
}
// name 张三
// age 20

另外,for…in 和 for…of 在遍历对象原型上的属性也有区别,for…in 会遍历对象原型上的属性,for…of 不会。

function Person(name, age) {this.name = namethis.age = age
}Person.prototype.say = function() {console.log('My Name is ' + this.name)
}const obj = new Person('张三', 20)for (const key in obj) {console.log(key, obj[key])
}
// name 张三
// age 20
// say [Function (anonymous)]for (const key of Object.keys(obj)) {console.log(key, obj[key])
}
// name 张三
// age 20

说准确点,并不是 for…of 不会遍历对象原型上的属性,而是 for…of 借助的 Object.keys()Object.valuesObject.entries()方法返回的数组只包含对象自身的属性和值。

如果想让 for…in 跟 for…of 一样只遍历对象自身的属性,可使用 hasOwnProperty

for (const key in obj) {if (obj.hasOwnProperty(key)) {console.log(key, obj[key])}
}

三、遍历其他类型数据

1.字符串
let str = "hello"for (const index in str) {console.log(index, str[index])
}
// 0 h
// 1 e
// 2 l
// 3 l
// 4 ofor (const value of str) {console.log(value)
}
// h
// e
// l
// l
// o

2.Set 结构

const set = new Set(['apple', 'banana', 'cherry'])for (const value in set) {console.log(value) // 这里几乎不会执行任何有用的操作,因为set没有可枚举的属性
}for (const value of set) {console.log(value)
}
// 输出(顺序可能不同,因为Set是无序的):
// apple
// banana
// cherry

3.Map结构

const map = new Map([['a', 1], ['b', 2], ['c', 3]])for (const value in map) {console.log(value) // 这里几乎不会执行任何有用的操作,因为map没有可枚举的属性
}for (const [key, value] of map) {console.log(key, value) 
}
// 输出:  
// a 1  
// b 2  
// c 3

4.类数组arguments

function fn(a, b, c) {for (const index in arguments) {console.log(index, arguments[index])}// 0 zhangsan// 1 20// 2 男for (const value of arguments) {console.log(value)}// zhangsan// 20// 男
}fn('zhangsan', 20, '男')

四、总结

通过以上示例可知,两者主要有以下区别:

  • for...in
    • 遍历对象的可枚举属性(包括原型链上的)
    • 对于数组,遍历的是索引(字符串类型)。
    • 不可遍历 Set 和 Map 结构
  • for...of
    • 遍历可迭代对象的值,直接访问值而不是键名或索引。
    • 不可直接变量对象,需要借助 Object.keys/values/entries。
    • 另外可遍历 Set 和 Map 结构

好了,分享结束,谢谢点赞,下期再见。

相关文章:

JS中的for...in和for...of有什么区别?

你好,我是沐爸,欢迎点赞、收藏、评论和关注。 在 JavaScript 中,for...in 和 for...of 是两种用于遍历数组(或其他可迭代对象)的循环语句,但它们之间存在显著的差异。 一、遍历数组 for…in const arr …...

【C++篇】引领C++模板初体验:泛型编程的力量与妙用

文章目录 C模板编程前言第一章: 初始模板与函数模版1.1 什么是泛型编程?1.1.1 为什么要有泛型编程?1.1.1 泛型编程的优势 1.2 函数模板的基础1.2.1 什么是函数模板?1.2.2 函数模板的定义格式1.2.3 示例:通用的交换函数输出示例&am…...

在react中 使用redux

1.安装redux npm install reduxjs/toolkit react-redux 2.创建切片模块化数据 在Src目录下创建store目录,创建moude目录 创建tab.js import { createSlice } from reduxjs/toolkit; const tabSlice createSlice({name: tab,initialState: {Collapse: false,},re…...

计算机毕业设计python+spark知识图谱房价预测系统 房源推荐系统 房源数据分析 房源可视化 房源大数据大屏 大数据毕业设计 机器学习

《PythonSpark知识图谱房价预测系统》开题报告 一、研究背景与意义 随着城市化进程的加速和房地产市场的不断发展,房价成为影响人们生活质量的重要因素之一。准确预测房价不仅有助于政府制定科学的房地产政策,还能为开发商提供市场参考,同时…...

Spring-bean的生命周期-终篇

阶段8:Bean属性设置阶段 属性设置阶段分为3个小的阶段 实例化后阶段Bean属性赋值前处理Bean属性赋值 实例化后阶段 这里也有spring给我们预留了扩展,就是实现InstantiationAwareBeanPostProcessor的postProcessAfterInstantiation方法,开发…...

Kotlin 枚举和 when 表达式(六)

导读大纲 1.1 表示和处理选择: Enums和when1.1.1 声明枚举类和枚举常量1.1.2 使用 when 表达式处理枚举类 1.1 表示和处理选择: Enums和when 在本节中,我们将以在 Kotlin 中声明枚举为例,介绍 when 结构 when可以被视为比 Java 中 switch 结构更强大、更常用的替代品 1.1.1 …...

数字范围按位与

优质博文:IT-BLOG-CN 题目 给你两个整数left和right,表示区间[left, right],返回此区间内所有数字 按位与 的结果(包含left、right端点)。 示例 1: 输入:left 5, right 7 输出:…...

WebRTC编译后替换libwebrtc.aar时提示找不到libjingle_peerconnection_so.so库

Loading native library: jingle_peerconnection_so 问题原因:编译的时候只编译了armeabi-v7a的版本,但是应用程序是arm64-v8a,所以无法运行 解决方法:更新编译脚本,加上arm64-v8a进行编译 ./tools_webrtc/android/bu…...

Nature Electronics |无感佩戴的纤维基电子皮肤(柔性半导体器件/柔性健康监测/电子皮肤/柔性传感/纤维器件)

英国剑桥大学Yan Yan Shery Huang课题组,在《Nature Electronics 》上发布了一篇题为“Imperceptible augmentation of living systems with organic bioelectronic fibres”的论文,第一作者为王文宇博士(Wenyu Wang),论文内容如下: 一、 摘要 利用电子技术对人类皮肤和…...

深入剖析Docker容器安全:挑战与应对策略

随着容器技术的广泛应用,Docker已成为现代应用开发和部署的核心工具。它通过轻量级虚拟化技术实现应用的隔离与封装,提高了资源利用率。然而,随着Docker的流行,其安全问题也成为关注焦点。容器化技术虽然提供了良好的资源隔离&…...

后端技术打怪升级之路

记录后端技术打怪升级之路,如下是个人总记的主要技术栈,仅供参考! 备注: 同名文章一同步发表于个人网站及微信公众号 个人网站 工藤新一的技术小窝...

Leetcode 3296. Minimum Number of Seconds to Make Mountain Height Zero

Leetcode 3296. Minimum Number of Seconds to Make Mountain Height Zero 1. 解题思路2. 代码实现 题目链接:3296. Minimum Number of Seconds to Make Mountain Height Zero 1. 解题思路 这一题的思路的话我们采用的是一个二分法的思路,找到一个最大…...

计算机毕业设计之:基于深度学习的路面检测系统(源码+部署文档+讲解)

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…...

测试面试题:接口自动化测试流程?

1、测试用例编写:根据接口的需求和功能,编写相应的测试用例。测试用例应包括正常、边界和异常等各种情况下的测试。 2、准备测试数据:根据测试用例的要求,准备相应的测试数据。数据可以通过手动输入、数据库查询、文件导入等方式进…...

Golang面试题

在Golang(也称为Go语言)工程师的面试中,可能会遇到各种技术性和概念性的问题。 一、基础部分 Golang 中 make 和 new 的区别? 共同点:两者都用于分配内存。不同点: make 专为 slice、map 和 channel 设计,返回初始化后的(非零)值。new 分配内存并返回指向该内存的指针…...

《飞机大战游戏》实训项目(Java GUI实现)(设计模式)(简易)

目录 一、最终实现后,效果如下。 (1)简单介绍本游戏项目(待完善) (2)运行效果图(具体大家自己可以试) 初始运行情况。 手动更换背景图。 通过子弹攻击敌机,累…...

计算机毕业设计 基于 Hadoop平台的岗位推荐系统 SpringBoot+Vue 前后端分离 附源码 讲解 文档

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…...

【数据结构与算法】LeetCode:二分查找

文章目录 二分查找二分查找搜索插入位置 (Hot 100)x 的平方根搜索二维矩阵(Hot 100)在排序数组中查找元素的第一个和最后一个位置 (Hot 100)搜索旋转排序数组 (Hot 100)寻找旋转排序…...

专题·大模型安全 | 生成式人工智能的内容安全风险与应对策略

正如一枚硬币的两面,生成式人工智能大模型(以下简称“生成式大模型”)在助力内容生成的同时也潜藏风险,成为虚假信息传播、数据隐私泄露等问题的温床,加剧了认知域风险。与传统人工智能(AI)相比…...

CORS跨域+Nginx配置、Apache配置

CORS(Cross-Origin Resource Sharing,跨源资源共享)是一种机制,它使用额外的HTTP头部来告诉浏览器允许一个网页运行的脚本从不同于它自身来源的服务器上请求资源(例如字体、JavaScript、CSS等)。这是一种安…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)&#xff0…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

【2025年】解决Burpsuite抓不到https包的问题

环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...