foreach、for in和for of之间区别?

简介: foreach、for in和for of之间区别?

foreach、for in和for of都是用于循环遍历数组或对象的方法,但它们之间有一些区别。

1. foreach:是数组的原生方法,可以遍历数组中的每个元素,但是无法中途中断循环或者跳出循环。它只接受一个回调函数作为参数,参数为当前元素、索引和数组本身。

例子:

const arr = [1, 2, 3];
arr.forEach((element, index, array) => {
  console.log(element, index, array);
});

2. for in:是一个用于遍历对象属性的循环语句,可以遍历对象的可枚举属性(包括继承的属性)。它遍历的是对象的键名,而不是键值。可以用来遍历数组,但是不推荐使用,因为数组也是对象,它会遍历数组的索引。

例子:

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key, obj[key]);
}
 

3. for of:是ES6新增的循环语句,用于遍历可迭代对象(包括数组、字符串、Set、Map等)。它遍历的是对象的键值,而不是键名。与for in不同,for of无法遍历对象的属性,只能遍历对象的值。

例子:

const arr = [1, 2, 3];
for (let element of arr) {
  console.log(element);
}
相关文章
|
前端开发 JavaScript
CSS实现禁用状态,样式设置以及不可点击事件的行为
CSS实现禁用状态,样式设置以及不可点击事件的行为
4065 0
|
JSON JavaScript 前端开发
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
1856 0
|
人工智能 前端开发 Java
用git rebase命令合并开发阶段中多条commit提交记录
通过 `git rebase`,可以合并多个提交记录,使开发历史更简洁清晰。操作分为 6 步:查看提交历史 (`git log --oneline`)、设置需合并的提交数 (`git rebase -i HEAD~N`)、修改动作标识为 `s`(squash)、保存退出编辑、调整提交信息、强制推送至远程仓库 (`git push -f`)。此方法适合清理本地无关提交,但若有团队协作或冲突风险,需谨慎使用以避免问题。
2594 60
|
SQL 分布式计算 数据库
【YashanDB 知识库】Hive 命令工具 insert 崖山数据库报错
【YashanDB 知识库】Hive 命令工具 insert 崖山数据库报错
|
JavaScript
【Vue面试题四】、Vue实例挂载的过程中发生了什么?
文章详细分析了Vue实例挂载的过程,包括Vue构造函数的执行、初始化方法`_init`的调用,以及Vue实例从创建到挂载的各个阶段。文章提到了Vue实例初始化过程中的多个关键步骤,如合并选项、初始化数据、事件、生命周期、渲染方法等。同时,还解释了Vue如何处理模板和生成渲染函数,以及如何将虚拟DOM转换为真实DOM并进行页面渲染。最后,文章通过流程图总结了Vue实例挂载的整个过程。
【Vue面试题四】、Vue实例挂载的过程中发生了什么?
|
JavaScript 网络架构
路由传参及跳转方式
路由传参及跳转方式
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
589 3
|
前端开发 JavaScript 程序员
手摸手教你使用WebSocket[其实WebSocket也不难]
前言 在本篇文章之前,WebSocket很多人听说过,没见过,没用过,以为是个很高大上的技术,实际上这个技术并不神秘,可以说是个很容易就能掌握的技术,希望在看完本文之后,马上把文中的栗子拿出来自己试一试,实践出真知。 WebSocket解决了什么问题: 客户端(浏览器)和服务器端进行通信,只能由客户端发起ajax请求,才能进行通信,服务器端无法主动向客户端推送信息。 当出现类似体育赛事、聊天室、实时位置之类的场景时,客户端要获取服务器端的变化,就只能通过轮询(定时请求)来了解服务器端有没有新的信息变化。
1029 1
|
存储
el-tree 动态指定默认选中节点
el-tree 动态指定默认选中节点
1473 6
EMQ
|
传感器 缓存 安全
MQTT 协议入门:基础知识和快速教程
本文将通过讲解与演示向读者展示 MQTT 协议的入门使用流程,开发者可以通过本文以更简单的方式理解 MQTT 相关概念,快速开始 MQTT 服务及应用的开发。
EMQ
4734 0
MQTT 协议入门:基础知识和快速教程