for…in遍历对象的可枚举属性名，包括继承属性，适用于对象；for…of遍历可迭代对象的值，如数组、字符串等，不适用于普通对象。
for…of 和 for…in 是 JavaScript 中两种不同的循环语法，虽然写法相似，但用途和行为有本质区别。理解它们的差异有助于在实际开发中正确选择使用场景。
for…in 遍历对象的键（key）
for…in 用于遍历对象的**可枚举属性名**（即键），包括自身和继承的属性（来自原型链）。它适用于普通对象，不推荐用于数组。
常见用法：
遍历对象的所有可枚举属性 获取属性名进行操作const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
console.log(key); // 输出: “a”, “b”, “c”
}
注意：如果对象的属性来自原型链或被设置为不可枚举，可能不会按预期输出。建议配合 hasOwnProperty 使用以避免遍历继承属性：
立即学习“Java免费学习笔记（深入）”；
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key, obj[key]);
}
}
for…of 遍历可迭代对象的值（value）
for…of 用于遍历实现了 Iterable 接口的对象，如数组、字符串、Map、Set、arguments 等。它直接获取的是元素的值，而不是键。
适用对象：
Array String Map Set arguments NodeList（DOM 节点集合）const arr = [10, 20, 30];
for (let value of arr) {
console.log(value); // 输出: 10, 20, 30
}const str = “hi”;
for (let char of str) {
console.log(char); // 输出: “h”, “i”
}
for…of 不适用于普通对象，因为普通对象默认不可迭代。尝试对普通对象使用会报错：
const obj = { a: 1 };
// for (let v of obj) { } // 报错：obj is not iterable
关键区别总结
遍历目标 对象的可枚举属性名（key） 可迭代对象的值（value） 适用对象 所有对象（包括数组） 数组、字符串、Map、Set 等可迭代对象 是否包含继承属性 是（需用 hasOwnProperty 过滤） 否 能否用于普通对象 可以 不可以（会报错） 顺序 不一定保证顺序（尤其非整数键） 按插入或索引顺序
使用建议
遍历数组元素值时，优先使用 for…of 遍历对象的属性时，使用 for…in，并检查 hasOwnProperty 需要同时获取索引和值时，数组可用 entries() 配合 for…of：for (let [index, value] of arr.entries()) {
console.log(index, value);
}
基本上就这些。掌握它们的核心差异，能让你写出更清晰、安全的循环代码。
以上就是JavaScript中for…of与for…in循环区别_javascript技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535366.html
微信扫一扫 
支付宝扫一扫 
