JavaScript：for of 与for in的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript：for of 与for in的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

for of 和 for in 都是JavaScript中用于遍历对象或集合的循环结构，但它们的目的和用法有所不同：

相同点：

都是用来遍历数据结构，可以用来处理数组、Set、Map等可迭代对象或对象属性。

区别

1、遍历对象的性质不同

for in 语句主要用于遍历对象的可枚举属性，包括对象自身的属性和从原型链继承的属性。
for of 语句则是遍历实现了可迭代协议（Iterable Protocol）的对象，如数组、Set、Map、String、Generator对象等。它不会遍历对象的属性，而是遍历对象的各个元素或值。

2、循环变量的含义不同

for in 循环中的迭代变量将依次获取对象的属性名。
for of 循环中的迭代变量将依次获取可迭代对象的元素值。

3、使用场景不同

当需要遍历数组元素或可迭代对象的值时，使用 for of 更合适。
当需要遍历对象的所有属性（包括可能继承的属性）时，使用 for in 更合适。

// 对于数组：
let array = ['apple', 'banana', 'cherry'];

// 使用 for of 遍历数组元素：
for (let item of array) {
  console.log(item); // 输出 'apple', 'banana', 'cherry'
}

// 使用 for in 不适合遍历数组，但也可用（不推荐）：
for (let key in array) {
  console.log(array[key]); // 输出数组的索引字符串 '0', '1', '2'
}

// 对于对象：
let obj = { a: 1, b: 2, c: 3 };

// 使用 for in 遍历对象属性：
for (let prop in obj) {
  console.log(prop); // 输出 'a', 'b', 'c'
  console.log(obj[prop]); // 输出 1, 2, 3
}

// 使用 for of 无法直接遍历对象，但可以借助Object.values/Object.entries：
for (let value of Object.values(obj)) {
  console.log(value); // 输出 1, 2, 3
}

总之，for of 主要用于遍历值，而 for in 主要用于遍历键（属性名）。在实际编程中，应根据具体需要选择合适的遍历方式。

另外在vue中

v-for="(item, index) of items" :key="item.id"
v-for="(item, index) in items" :key="item.id"
//两者是等效的，item是value，index是key。均用于遍历数组、Set、Map或其他可迭代对象
//循环生成的元素应该添加一个唯一的key属性，如果没有这样的唯一标识符，也可以使用index作为key

Vue官方文档更多时候是使用in关键字作为示例，建议使用in文章来源地址https://www.toymoban.com/news/detail-838395.html

到了这里，关于JavaScript：for of 与for in的区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！