值得一看
双11 12
广告
广告

JS中的for…of和for…in有什么区别?

for…in 遍历对象键,for…of 遍历可迭代值。1. for…in 用于遍历对象的键名,适用于对象和数组,但遍历数组时可能包含原型链属性,需配合 hasownproperty 使用;2. for…of 用于遍历可迭代对象(如数组、字符串、map等)的值,更直观安全,但不适用于普通对象;3. 若需同时获取键和值,可用 object.entries() + for…of;4. 根据数据类型选择合适方式:对象用 for…in,可迭代结构用 for…of。

JS中的for...of和for...in有什么区别?

在JavaScript中,for…of 和 for…in 看起来很像,但它们的作用和适用对象完全不同。简单来说,for…in 用于遍历对象的键(key),而 for…of 用于遍历可迭代对象的值(value)


for…in:遍历对象的键

for…in 主要用于遍历对象的可枚举属性名(也就是键)。它适用于普通对象、数组也可以用,但使用时需要注意一些细节。

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
console.log(key); // 输出 'a', 'b', 'c'
}

常见用途和注意事项:

  • 遍历的是键名,不是值,所以需要通过 obj[key] 来获取值。
  • 不建议直接用于数组遍历时,因为:
    • 它遍历的是索引(字符串形式),但还可能包括原型链上的属性。
    • 顺序不一定可靠(虽然ES6后基本有序了)。
  • 使用前最好加上 hasOwnProperty 判断,避免遍历到继承来的属性。
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(obj[key]);
}
}

for…of:遍历可迭代对象的值

for…of 只能用于可迭代对象,比如数组、字符串、Map、Set、NodeList等。

const arr = [10, 20, 30];
for (let value of arr) {
console.log(value); // 输出 10, 20, 30
}

特点和适用场景:

  • 直接拿到,不需要再通过索引来取。
  • 更适合数组、字符串这种有顺序的结构。
  • 不适用于普通对象,除非给对象设置了 Symbol.iterator。

如果你写 for…of 遍历一个普通对象,会报错:“obj is not iterable”。


哪个更适合我?

这个问题取决于你要遍历的对象类型和目的:

场景 推荐方式 原因
遍历对象的属性 for…in 能获取到键名,配合 hasOwnProperty 安全
遍历数组/字符串/集合等 for…of 简洁、直观地获取值
想要同时获取键和值? Object.entries() + for…of 例如:for (let [key, val] of Object.entries(obj))

小贴士:别混淆了!

  • for…in 是为对象设计的,但也能“凑合”遍历数组,只是容易出问题。
  • for…of 更现代,更安全,但不能用于普通对象。
  • 如果你不小心把 for…of 用在非可迭代对象上,浏览器会报错。

基本上就这些区别。记住它们各自的用途,根据数据结构选择合适的方式就行。

温馨提示: 本文最后更新于2025-06-08 22:40:59,某些文章具有时效性,若有错误或已失效,请在下方留言或联系易赚网
文章版权声明 1 本网站名称: 创客网
2 本站永久网址:https://new.ie310.com
1 本文采用非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
2 本站所有内容仅供参考,分享出来是为了可以给大家提供新的思路。
3 互联网转载资源会有一些其他联系方式,请大家不要盲目相信,被骗本站概不负责!
4 本网站只做项目揭秘,无法一对一教学指导,每篇文章内都含项目全套的教程讲解,请仔细阅读。
5 本站分享的所有平台仅供展示,本站不对平台真实性负责,站长建议大家自己根据项目关键词自己选择平台。
6 因为文章发布时间和您阅读文章时间存在时间差,所以有些项目红利期可能已经过了,能不能赚钱需要自己判断。
7 本网站仅做资源分享,不做任何收益保障,创业公司上收费几百上千的项目我免费分享出来的,希望大家可以认真学习。
8 本站所有资料均来自互联网公开分享,并不代表本站立场,如不慎侵犯到您的版权利益,请联系79283999@qq.com删除。

本站资料仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
THE END
喜欢就支持一下吧
点赞15赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容