for...in 和 for...of 的区别

for...in 和 for...of 都是 JavaScript 中的循环语句,但它们的作用和使用方式略有不同。

1、for..in 循环

for..in 循环用于遍历对象的可枚举属性,它会将对象的每个属性名称(或键名)作为迭代变量来遍历。

以下是 for...in 的基本语法

javascript 复制代码
for (variable in object) {
}

其中,variable 表示每次迭代中当前属性的名称(或键名),object 表示要遍历的对象。

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

// a  1
// b  2
// c  3

需要注意的是,for...in 循环遍历的是对象的可枚举属性,包括自有属性和继承属性。

因此,它并不适用于遍历数组和类数组对象。

2、for...of 循环

for...of 循环用于遍历可迭代对象的元素,它会将对象的每个元素作为迭代变量来遍历。

以下是 for..of 的基本语法:

javascript 复制代码
for (variable of iterable) {
}

其中,variable 表示每次迭代中当前元素的值,iterable 表示要遍历的可迭代对象,如数组、字符串、Set、Map 等。

javascript 复制代码
const arr = [1, 2, 3];
for (const item of arr) { 
    console.log(item);
}
// 1
// 2
// 3

需要注意的是,for...of 循环只能遍历实现了选代器接口 (lterator) 的对象,因此它不适用于普通的对象。

此外,它遍历的是对象的元素值,而不是键名或属性名

3、总结

for...in 适用于遍历对象的属性名,而 for...of 适用于遍历数组、字符串等可迭代对象的元素值。

相关推荐
gnip11 分钟前
SSE技术介绍
前端·javascript
yinke小琪26 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿29 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux31 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵32 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆35 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端38 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_38 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪40 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany42 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc