for in与for of的区别

简介: for in与for of的区别

在JavaScript中,for…in和for…of都是用来遍历集合的循环控制结构,但它们之间存在一些重要的区别:


用途不同:

for…in循环用于遍历对象的属性。

for…of循环用于遍历可迭代对象(如数组,字符串,Set,Map等)的值。

遍历的内容不同:

for…in会遍历对象所有的可枚举属性,包括原型链上的属性。

for…of遍历的是可迭代对象的实际值,不包括原型链上的值。

循环控制不同:

for…in循环使用对象的属性名作为循环变量的值。

for…of循环使用迭代器的值作为循环变量的值。

语法结构不同:

for…in语法:

for (let 变量 in 对象) {
  // 使用变量来引用属性名
}
 
 

for…of语法

for (let 变量 of 可迭代对象) {
  // 使用变量来引用迭代器的值
}

迭代的可选性不同:

for…in循环中,即使属性是undefined或原型链上的属性,只要可枚举,也会被遍历到。

for…of循环中,只有可迭代对象中实际存在的值才会被遍历到。

与数组的索引关系:

for…in不直接与数组的索引相关联,所以不能直接获取索引。

for…of可以与数组的索引相关联,通过数组的entries()方法,可以同时获取索引和值。

// 对象
const obj = { a: 1, b: 2, c: 3 };
 
// 使用 for...in 遍历
for (let key in obj) {
  console.log(key, obj[key]); // 输出 a=1, b=2, c=3
}
 
// 数组
const arr = [10, 20, 30];
 
// 使用 for...of 遍历
for (let value of arr) {
  console.log(value); // 输出 10, 20, 30
}
 
// 使用 for...of 遍历数组索引和值
for (let [index, value] of arr.entries()) {
  console.log(index, value); // 输出 0=10, 1=20, 2=30
}
相关文章
|
前端开发
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
|
Web App开发 缓存 前端开发
前端性能优化:从入门到精通
【2月更文挑战第3天】
312 1
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 的三种引入方法详解
在网页开发中,JavaScript 可通过内联、内部脚本和外部脚本三种方式引入 HTML 文件,各具适用场景。本文详解其用法并附完整示例代码,帮助开发者根据项目需求选择合适的方式,提升代码维护性与开发效率。
534 110
|
JavaScript 前端开发
原型与原型链,数形结合搞懂原型与原型链,真正理解原型链,面试官直呼内行。
原型与原型链,数形结合搞懂原型与原型链,真正理解原型链,面试官直呼内行。
327 0
|
网络协议 IDE 网络安全
GoLand远程开发IDE:使用SSH远程连接服务器进行云端编程
GoLand远程开发IDE:使用SSH远程连接服务器进行云端编程
1792 0
|
4月前
|
存储 缓存 JavaScript
Set和Map有什么区别?
Set和Map有什么区别?
353 1
|
存储 关系型数据库 MySQL
阿里面试:为什么要索引?什么是MySQL索引?底层结构是什么?
尼恩是一位资深架构师,他在自己的读者交流群中分享了关于MySQL索引的重要知识点。索引是帮助MySQL高效获取数据的数据结构,主要作用包括显著提升查询速度、降低磁盘I/O次数、优化排序与分组操作以及提升复杂查询的性能。MySQL支持多种索引类型,如主键索引、唯一索引、普通索引、全文索引和空间数据索引。索引的底层数据结构主要是B+树,它能够有效支持范围查询和顺序遍历,同时保持高效的插入、删除和查找性能。尼恩还强调了索引的优缺点,并提供了多个面试题及其解答,帮助读者在面试中脱颖而出。相关资料可在公众号【技术自由圈】获取。
|
9月前
|
人工智能 自然语言处理 机器人
在钉钉中与百炼DeepSeek大模型对话
DeepSeek发布了两款先进AI模型V3和R1,分别适用于对话AI、内容生成及推理任务。阿里云百炼提供DeepSeek模型API,通过AppFlow可在钉钉中快速配置与DeepSeek的对话功能,无需代码开发,10分钟内完成全部设置。用户需在钉钉开放平台创建应用、配置消息卡片、授权权限,并使用计算巢AppFlow创建连接流,最后配置钉钉机器人并发布应用版本,即可实现与DeepSeek大模型的交互。
855 8
在钉钉中与百炼DeepSeek大模型对话
ts中interface和type的区别
ts中interface和type的区别
806 61
|
8月前
|
消息中间件 存储 前端开发
MQ有什么应用场景
MQ有什么应用场景