for…in 遍历对象键，for…of 遍历可迭代值。1. for…in 用于遍历对象的键名，适用于对象和数组，但遍历数组时可能包含原型链属性，需配合 hasownproperty 使用；2. for…of 用于遍历可迭代对象（如数组、字符串、map等）的值，更直观安全，但不适用于普通对象；3. 若需同时获取键和值，可用 object.entries() + for…of；4. 根据数据类型选择合适方式：对象用 for…in，可迭代结构用 for…of。
在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 用在非可迭代对象上，浏览器会报错。
基本上就这些区别。记住它们各自的用途，根据数据结构选择合适的方式就行。
以上就是JS中的for…of和for…in有什么区别？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1505623.html
微信扫一扫 
支付宝扫一扫 
