For...of 和 For...in 语句之间的区别

在 JavaScript 中，for...of 和 for...in 是两个常用的循环语句，它们可以用来遍历数据结构。本篇文章将会探讨这两种语句的不同之处。

for...of

for...of 是 ES6 中引入的一种新的循环语句，用于遍历可迭代对象，例如数组、Map、Set 等。

for...of 语句的语法如下：

for (variable of iterable) {
  statement
}

其中的 iterable 是一个可迭代对象，variable 是每个迭代中取得的值。

for...of 循环不需要我们关注对象的下标或者键，只需要关注值。因此如果我们想要遍历数组中的每一个元素，我们可以使用 for...of 语句。

const arr = [1,2,3];

for (const value of arr) {
  console.log(value);
}
// Output: 1 2 3

for...in

for...in 是 JavaScript 中常用的一种循环语句，用于遍历对象中的可枚举属性。

for...in 语句的语法如下：

for (variable in object) {
  statement
}

其中的 object 是需要遍历的对象，variable 是每个迭代中取得的属性名。

for...in 循环往往与对象一起使用，例如我们想要遍历一个简单的对象：

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]);
}
// Output: a 1, b 2, c 3

在 for...in 循环中，我们不仅可以获得对象中的键名（属性名），也可以获得相应的键值。

区别

for...of 和 for...in 语句的区别在于它们遍历的对象不同。for...of 遍历可迭代对象中的值，而 for...in 遍历对象中的属性。

另外需要注意的是，for...in 语句会遍历对象中的原型链上的属性。如果你仅需要遍历对象本身的属性，可以使用 Object.hasOwnProperty() 方法来避免遍历到继承来的属性。

const obj = { a: 1, b: 2, c: 3 };
Object.prototype.d = 4;

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}
// Output: a 1, b 2, c 3

结论

在 JavaScript 中，for...of 用于遍历可迭代对象的值，而 for...in 用于遍历对象的属性。需要注意的是，for...in 循环会遍历对象的原型链上的属性，可以使用 Object.hasOwnProperty() 方法来避免这种情况。