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实现禁用状态,样式设置以及不可点击事件的行为
4164 0
|
缓存 安全 JavaScript
前端安全:Vue应用中防范XSS和CSRF攻击
【4月更文挑战第23天】本文探讨了在Vue应用中防范XSS和CSRF攻击的重要性。XSS攻击通过注入恶意脚本威胁用户数据,而CSRF则利用用户身份发起非授权请求。防范措施包括:对输入内容转义、使用CSP、选择安全的库;采用Anti-CSRF令牌、同源策略和POST请求对抗CSRF;并实施代码审查、更新依赖及教育团队成员。通过这些实践,可提升Vue应用的安全性,抵御潜在攻击。
1816 0
|
人工智能 前端开发 Java
用git rebase命令合并开发阶段中多条commit提交记录
通过 `git rebase`,可以合并多个提交记录,使开发历史更简洁清晰。操作分为 6 步:查看提交历史 (`git log --oneline`)、设置需合并的提交数 (`git rebase -i HEAD~N`)、修改动作标识为 `s`(squash)、保存退出编辑、调整提交信息、强制推送至远程仓库 (`git push -f`)。此方法适合清理本地无关提交,但若有团队协作或冲突风险,需谨慎使用以避免问题。
2842 60
|
SQL 分布式计算 数据库
【YashanDB 知识库】Hive 命令工具 insert 崖山数据库报错
【YashanDB 知识库】Hive 命令工具 insert 崖山数据库报错
|
JavaScript 编译器
vue3+ts:shims-vue.d.ts
vue3+ts:shims-vue.d.ts
807 0
vue3+ts:shims-vue.d.ts
|
JavaScript
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
这篇文章介绍了如何在Vue 2.X项目中封装和使用WangEditor 5富文本编辑器,支持图片的点击、粘贴和拖拽上传,同时提到封装的组件也适用于Vue 3.X项目,并提供了详细的使用示例和后端配置。
2472 1
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
|
消息中间件 存储 Java
Android面试高频知识点(2) 详解Android消息处理机制(Handler)
Android 消息处理机制估计都被写烂了,但是依然还是要写一下,因为Android应用程序是通过消息来驱动的,Android某种意义上也可以说成是一个以消息驱动的系统,UI、事件、生命周期都和消息处理机制息息相关,并且消息处理机制在整个Android知识体系中也是尤其重要,在太多的源码分析的文章讲得比较繁琐,很多人对整个消息处理机制依然是懵懵懂懂,这篇文章通过一些问答的模式结合Android主线程(UI线程)的工作原理来讲解,源码注释很全,还有结合流程图,如果你对Android 消息处理机制还不是很理解,我相信只要你静下心来耐心的看,肯定会有不少的收获的。
1210 3
Android面试高频知识点(2) 详解Android消息处理机制(Handler)
|
前端开发 开发者 UED
UI 框架:nav-ui&uni-ui&vant
本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法,包括图标、表格和树的使用示例,以及如何在项目中安装和配置这些UI组件。对于`nav-ui`,详细说明了图标组件的安装与使用,包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后,`vant`部分提供了从项目创建到组件安装的具体步骤,以及如何将下载的组件正确地集成到项目中。
831 4
|
JavaScript
js如何添加新元素到数组中
js如何添加新元素到数组中
867 0
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
2071 0