当前位置: 首页 > 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等)。这是一种安…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1:通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分,设置 Gradle JDK 方法2:通过 Settings File → Settings... (或 CtrlAltS)…...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型(算法、数据分析、机器学习等)不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用,前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率,还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库(Naive UI、Element …...

相关类相关的可视化图像总结

目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系,可直观判断线性相关、非线性相关或无相关关系,点的分布密…...

XXE漏洞知识

目录 1.XXE简介与危害 XML概念 XML与HTML的区别 1.pom.xml 主要作用 2.web.xml 3.mybatis 2.XXE概念与危害 案例:文件读取(需要Apache >5.4版本) 案例:内网探测(鸡肋) 案例:执行命…...

开源 vGPU 方案:HAMi,实现细粒度 GPU 切分

本文主要分享一个开源的 GPU 虚拟化方案:HAMi,包括如何安装、配置以及使用。 相比于上一篇分享的 TimeSlicing 方案,HAMi 除了 GPU 共享之外还可以实现 GPU core、memory 得限制,保证共享同一 GPU 的各个 Pod 都能拿到足够的资源。…...

边缘计算设备全解析:边缘盒子在各大行业的落地应用场景

随着工业物联网、AI、5G的发展,数据量呈爆炸式增长。但你有没有想过,我们生成的数据,真的都要发回云端处理吗?其实不一定。特别是在一些对响应时间、网络带宽、数据隐私要求高的行业里,边缘计算开始“火”了起来&#…...

[electron]预脚本不显示内联script

script-src self 是 Content Security Policy (CSP) 中的一个指令,它的作用是限制加载和执行 JavaScript 脚本的来源。 具体来说: self 表示 当前源。也就是说,只有来自当前网站或者当前页面所在域名的 JavaScript 脚本才被允许执行。"…...