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 适用于遍历数组、字符串等可迭代对象的元素值。

相关推荐
用户479492835691526 分钟前
mcp是怎么和大模型进行交互的,有哪些交互方式
前端·人工智能
凤年徐36 分钟前
解锁网页魔法:零基础HTML通关秘籍
前端·javascript·css·前端框架·html·web
PineappleCoder38 分钟前
防抖 vs 节流:高频事件的 “性能优化双雄” 怎么用?
前端·javascript·面试
小old弟39 分钟前
🤔面试官问你:什么是高阶函数?举例说明用到过的...
前端
是你的小橘呀40 分钟前
从小区广场舞群聊,看懂前端 er 必懂的发布订阅模式
前端
margicCode40 分钟前
0-1搭建项目基本配置(eslint+prettier)到release-it发布
前端
ZzMemory43 分钟前
CSS 命名太乱?BEM 规范帮你一键搞定,代码清爽到飞起!
前端·css·面试
大道小路43 分钟前
Vue3 组件数据传输小全
前端·javascript·vue.js
初辰ge43 分钟前
pCameraH5 v2.0:轻量级 H5 相机插件全新升级,支持拍照、录像与自定义水印
前端·javascript
Mr_Swilder44 分钟前
Chapter 8 Light and Color 光与颜色
前端