比较JavaScript中的for...in和for...of循环

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

    • 摘要:
    • 引言:
    • 正文:
      • 1. for...in循环
      • 2. for...of循环
      • 3. 区别和适用场景
    • 总结:
    • 参考资料:

摘要:

本文将详细介绍JavaScript中的for…in和for…of循环的区别及使用场景,帮助你对这两种循环语句有更深入的理解。

引言:

JavaScript中的for循环是基本语法之一,而在ES6中,for…in和for…of两种新的循环语句被引入。那么,这两种循环语句有什么区别?在什么场景下使用呢?接下来,我们将一起探讨这个问题。

正文:

1. for…in循环

for…in循环是JavaScript中一种特殊的循环结构,它主要用于遍历对象(Object)的属性。在for…in循环中,它会遍历对象本身的所有可枚举属性,并将其属性名赋值给循环变量。

for…in循环的结构如下:

for (let variable in object) {
  // 在这里使用变量
}

在这个循环中,variable是一个新的变量,它将在每次迭代中被赋值为object的一个可枚举属性名。

需要注意的是,for…in循环有一些特点:

  1. 它只能遍历对象自身的可枚举属性,无法遍历到继承的属性或者不可枚举的属性。

  2. 在遍历过程中,variable变量只在循环内部有效,循环外部无法访问。

下面是一个for…in循环的例子:

let obj = {
  name: "张三",
  age: 25,
  gender: "男"
};

for (let key in obj) {
  console.log(key); // 输出: name, age, gender
}

在这个例子中,for…in循环遍历了obj对象的所有属性,并将属性名赋值给变量key,然后输出key的值。

如果想要在循环外部使用循环变量,可以在循环外部声明一个变量,并将循环变量赋值给这个变量。例如:

let obj = {
  name: "张三",
  age: 25,
  gender: "男"
};

let key;
for (key in obj) {
  console.log(key); // 输出: name, age, gender
}

console.log(key); // 输出: gender

在这个例子中,我们在循环外部声明了一个变量key,并将循环变量赋值给key,所以即使在循环外部,我们也可以访问key的值。

2. for…of循环

for…of循环是ES6中引入的一种新的循环结构,它可以用来遍历可迭代对象(如数组、字符串、Set、Map等)的元素。在for…of循环中,它会遍历可迭代对象的所有元素,并将其元素值赋值给循环变量。

for…of循环的结构如下:

for (let variable of iterable) {
  // 在这里使用变量
}

在这个循环中,variable是一个新的变量,它将在每次迭代中被赋值为iterable的一个元素值。iterable是一个可迭代对象,如数组、字符串、Set、Map等。

for…of循环的特点:

  1. 它可以遍历可迭代对象的所有元素,而不仅仅是对象的属性。

  2. 在遍历过程中,variable变量只在循环内部有效,循环外部无法访问。

下面是一个for…of循环的例子:

let arr = [1, 2, 3, 4, 5];

for (let value of arr) {
  console.log(value); // 输出: 1, 2, 3, 4, 5
}

在这个例子中,for…of循环遍历了arr数组的所有元素,并将元素值赋值给变量value,然后输出value的值。

如果想要在循环外部使用循环变量,可以在循环外部声明一个变量,并将循环变量赋值给这个变量。例如:

let arr = [1, 2, 3, 4, 5];

let value;
for (value of arr) {
  console.log(value); // 输出: 1, 2, 3, 4, 5
}

console.log(value); // 输出: 5

在这个例子中,我们在循环外部声明了一个变量value,并将循环变量赋值给value,所以即使在循环外部,我们也可以访问value的值。

3. 区别和适用场景

for…in循环适用于遍历对象属性,特别是当对象的属性不确定时,可以通过for…in循环来遍历。而for…of循环适用于遍历可迭代对象,特别是当需要遍历的是一系列固定的值时,如数组、字符串等。

for…in循环和for…of循环都是JavaScript中用于遍历对象的循环结构,但它们在某些方面有所不同。

for…in循环:

  1. 只能用于遍历对象(Object)的属性。
  2. 无法直接获取到属性的值,需要通过对象[属性名]的方式获取。
  3. 遍历过程中,变量在循环内部有效,循环外部无法访问。
  4. 适用于遍历对象的所有可枚举属性。

for…of循环:

  1. 可以用于遍历可迭代对象(如数组、字符串、Set、Map等)的所有元素。
  2. 可以直接获取到元素的值,无需通过对象[属性名]的方式获取。
  3. 遍历过程中,变量在循环内部有效,循环外部无法访问。
  4. 适用于遍历可迭代对象的所有元素。

总结:

for…in循环适用于遍历对象的所有可枚举属性,而for…of循环适用于遍历可迭代对象的所有元素。在实际使用中,可以根据需要选择合适的循环结构。

JavaScript中的for…in和for…of循环各有特点,选择合适的循环语句可以使代码更加简洁、易读。了解它们的区别和适用场景,可以帮助你在开发过程中更好地使用这两种循环语句。

参考资料:

  1. 《JavaScript高级程序设计》
  2. 《ES6标准入门》

📚 以上内容仅供参考,具体实践还需结合项目实际情况。希望本文能为你在理解和使用JavaScript中的for…in和for…of循环方面带来一定的启示和帮助。如有疑问,欢迎留言交流。🤝

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity 让角色动起来(动画控制器)

下载素材: 导入后,找到预制体和动画。 新建动画控制器,拖动到预制体的新版动画组件上。 建立动画关系 创建脚本,挂载到预制体上。 using System.Collections; using System.Collections.Generic; using UnityEngine;public c…

git分布式管理-头歌实验搭建Git服务器

一、Git服务器搭建 任务描述 虽然有提供托管代码服务的公共平台,但是对一部分开发团队来说,为了不泄露项目源代码、节省费用及为项目提供更好的安全保护,往往需要搭建私有Git服务器用做远程仓库。Git服务器为团队的开发者们,提供了…

netty草图笔记

学一遍根本记不住&#xff0c;那就再学一遍 public static void test_nettyFuture() {NioEventLoopGroup group new NioEventLoopGroup();log.info("开始提交任务");Future<String> future group.next().submit(() -> {log.info("执行异步任…

【操作系统概念】第11章:文件系统实现

文章目录 0.前言11.1 文件系统结构11.2 文件系统实现11.2.1 虚拟文件系统 11.3 分配方法11.3.1 连续分配11.3.2 链接分配11.3. 3 索引分配 11.5 空闲空间管理11.5.1 位图/位向量11.5.2 链表11.5.3 组 0.前言 正如第10章所述&#xff0c;文件系统提供了机制&#xff0c;以在线存…

计算机设计大赛 疫情数据分析与3D可视化 - python 大数据

文章目录 0 前言1 课题背景2 实现效果3 设计原理4 部分代码5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 大数据全国疫情数据分析与3D可视化 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff0…

Halcon深度学习,异常值缺陷检测

前言 halcon深度学习分为常见的4大类。分类&#xff0c;语义分割&#xff0c;异常值检测&#xff0c;深度OCR。本篇主要针对halcon的异常值检测&#xff0c;如何训练和部署&#xff0c;并通过图像预处理的方式实现对异常值缺陷检测的精准实现。 异常值检测不同于语义分割的项目…

【python】异常处理

前言 省略各种废话&#xff0c;直接快速整理知识点 try-except 基础 作用 程序不可能永远都是对的&#xff0c;当7除a&#xff0c;a由用户输入时&#xff0c;用户输入0就会报错。try-except就是解决这些问题。 结构 多分支自定义错误类型 上方的exception是一个错误类型…

Unity编辑器功能Inspector快捷自动填充数据和可视化调试

我们有时候可能需要在面板增加一些引用&#xff0c;可能添加脚本后要手动拖动&#xff0c;这样如果有大量的脚本拖动也是不小的工作量 实例 例如&#xff1a;我的脚本需要添加一个Bone的列表&#xff0c;一个个拖动很麻烦。 实现脚本 我们可以用这样的脚本来实现。 public…

Python 3 教程(2)

Python3 基础语法 编码 默认情况下&#xff0c;Python 3 源码文件以 UTF-8 编码&#xff0c;所有字符串都是 unicode 字符串。 当然你也可以为源码文件指定不同的编码&#xff1a; # -*- coding: cp-1252 -*- 上述定义允许在源文件中使用 Windows-1252 字符集中的字符编码&…

JavaSec 基础之 URLDNS 链

文章目录 URLDNS 链分析调用链复现反序列化复现 URLDNS 链分析 URLDNS是ysoserial里面就简单的一条利用链&#xff0c;但URLDNS的利用效果是只能触发一次dns请求&#xff0c;而不能去执行命令。比较适用于漏洞验证这一块&#xff0c;而且URLDNS这条利用链并不依赖于第三方的类…

幕译--本地字幕生成与翻译--Whisper客户端

幕译–本地字幕生成与翻译 本地离线的字幕生成与翻译&#xff0c;支持GPU加速。可免费试用&#xff0c;无次数限制 基于Whisper&#xff0c;希望做最好的Whisper客户端 功能介绍 本地离线&#xff0c;不用担心隐私问题支持GPU加速支持多种模型支持&#xff08;中文、英语、日…

web服务,C/S框架,单设备登陆实现方案

背景: 原登陆接口,校验密码通过后,使用springsession记录会话信息,将信息存入在redis中 基于原逻辑进行多设备登陆开发,默认的时候多设备登陆开关开启,即按原来逻辑处理,只要密码登陆校验成功之后,都会将当前的会话信息存入redis中. 当多设备开关关闭时候,同一个账号同一时间只…

Vue.js+SpringBoot开发高校大学生创业管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统公告模块2.2 创业项目模块2.3 创业社团模块2.4 政府政策模块2.5 创业比赛模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 系统公告表3.2.2 创业项目表3.2.3 创业社团表3.2.4 政策表 四、系统展示五、核心代码5.…

【Spring Boot 源码学习】BootstrapContext的实际使用场景

《Spring Boot 源码学习系列》 BootstrapContext的实际使用场景 一、引言二、往期内容三、主要内容3.1 BootstrapContext3.2 BootstrapRegistry 初始化器实现3.3 BootstrapContext 的实际使用场景3.3.1 早期启动时3.3.2 环境配置准备完成时3.3.3 应用上下文准备完成后关闭 Boot…

Normalizer(归一化)和MinMaxScaler(最小-最大标准化)的区别详解

1.Normalizer&#xff08;归一化&#xff09;&#xff08;更加推荐使用&#xff09; 优点&#xff1a;将每个样本向量的欧几里德长度缩放为1&#xff0c;适用于计算样本之间的相似性。 缺点&#xff1a;只对每个样本的特征进行缩放&#xff0c;不保留原始数据的分布形状。 公式…

Linux--gdb(调试工具)

1. 背景 程序的发布方式有两种&#xff0c;debug模式和release模式 Linux gcc/g出来的二进制程序&#xff0c;默认是release模式 要使用gdb调试&#xff0c;必须在源代码生成二进制程序的时候, 加上 -g 选项 2. 命令 gdb binFile 退出&#xff1a; ctrl d 或 quit 调试命令&am…

如何压缩PDF文件大小?看完这篇文章,即可实现无损压缩!

平时工作或生活中&#xff0c;很多小伙伴是不是经常喜欢用PDF格式进行文件的保存&#xff0c;毕竟它具有较高的兼容性&#xff0c;且在不同设备中打开也不会出现排版错乱的情况。不过有时候PDF文件会因为内容过大&#xff0c;占用的内存过多&#xff0c;从而导致电脑卡顿的情况…

深入理解MySQL中的MVCC(多版本并发控制)

在MySQL中&#xff0c;MVCC是一种用于提供并发控制的技术&#xff0c;它允许数据库系统在事务并发执行的情况下保持数据的一致性&#xff0c;同时提高了数据库的并发性能。MVCC背后的理念是允许每个事务可以看到一个一致性的快照&#xff0c;从而避免了读取操作被写入操作所阻塞…

【Python刷题】环形链表

问题描述 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&a…

树网的和 题解

先放一张图 作为一道蓝题&#xff0c;其实快接近紫题了。 --------------------------------------不怎么华丽的分割线-------------------------------------- 前置芝士&#xff1a;树的直径 一个点的最远点( y y y)到这个最远点的最远点( p p p)一定是一条树的直径。 假若…