js中forin和forof区别

Javascript 中 for...in 和 for...of 的区别

在 Javascript 中，for...in 和 for...of 是两种常用于遍历数据结构的循环语句。尽管它们都可以用来遍历数组或对象，但它们之间存在一些重要的差异。下面我们将详细探讨这些区别。

for...in 循环

for...in 循环重点用于遍历对象的 可枚举属性，包括原型链上的所有可枚举属性。以下是使用 for...in 遍历对象的示例：

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(`属性名：${key}，属性值：${obj[key]}`);
}

需要注意的是，for...in 循环不仅遍历对象自身的属性，还会遍历从原型继承的属性。故而，在遍历数组时不推荐使用 for...in，由于它会遍历所有可枚举的属性，包括数组索引以外的属性（如原型上的属性）。

for...of 循环

for...of 循环是 ES6 中引入的，它重点用来遍历可迭代对象，如数组、字符串、Map、Set 等。这种循环语句不会遍历对象的属性，而是遍历对象的 值。以下是使用 for...of 遍历数组的示例：

const array = [1, 2, 3];
for (let value of array) {
  console.log(value);
}

for...of 循环的语法比 for...in 更简洁，并且它直接迭代对象的值，而不是属性名，这意味着你不需要通过属性名来访问值。

重点区别

• for...in 遍历对象的 键，而 for...of 遍历对象的 值。
• for...in 可以遍历任何对象，无论它们是否具有迭代标志（iterable），但通常只应该用于遍历对象的键。
• for...of 只遍历具有迭代标志（如 Symbol.iterator 方法）的迭代对象，如数组、字符串等。
• for...in 遍历时会包括原型链上的所有可枚举属性，而 for...of 只遍历当前对象自身的元素。
• 对于数组来说，for...of 循环的性能通常比 for...in 更好。

结论

在处理数组和其它可迭代对象时，推荐使用 for...of 循环。而对于对象，尤其是那些你想要遍历所有可枚举属性的对象，使用 for...in 更为合适。需要注意的是，使用 for...in 遍历数组时，应该结合 hasOwnProperty 方法来过滤出对象自身的属性：

const array = [1, 2, 3];
for (let key in array) {
  if (array.hasOwnProperty(key)) {
    console.log(`索引：${key}，值：${array[key]}`);
  }
}

本文由IT视界版权所有,禁止未经同意的情况下转发