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

在 JavaScript 中，我们经常使用循环来迭代数组、对象或其他集合。两种常见的迭代循环是 for...in 和 for...of。尽管它们看起来相似，但它们在使用和功能上有着显著的区别。

for...in

for...in 语句用于迭代对象的可枚举属性。

for (variable in object) {
  // code to be executed
}

注意：for...in 循环不适用于迭代数组和字符串。

我们可以使用 for...in 循环枚举对象的属性，例如：

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

for (let prop in person) {
  console.log(prop + ": " + person[prop]);
}

输出：

name: John
age: 30
city: New York

在这个例子中，prop 是每个属性的变量名，person[prop] 是对应属性的值。

虽然不推荐使用 for...in 循环来迭代数组和字符串，但是在某些情况下，我们可以使用对象的内置方法来实现迭代。例如，如果我们想迭代数组的索引：

const fruits = ["apple", "banana", "orange"];

for (let index in fruits) {
  console.log(index);
}

输出：

0
1
2

但是需要注意，for...in 循环迭代的是数组的索引，而不是数组的元素。

for...of 语句用于迭代可迭代对象的内容。

for (variable of iterable) {
  // code to be executed
}

使用 for...of 循环迭代数组更加直观和简洁：

const fruits = ["apple", "banana", "orange"];

for (let fruit of fruits) {
  console.log(fruit);
}

输出：

apple
banana
orange

在这里，fruit 变量逐个获取数组的元素。

for...of 循环也适用于迭代字符串的每个字符：

const message = "Hello, World!";

for (let char of message) {
  console.log(char);
}

输出：

H
e
l
l
o
,
 
W
o
r
l
d
!

char 变量逐个获取字符串中的字符。

希望通过本博客，你可以清楚地了解 for...in 和 for...of 之间的区别并正确选择适用于不同场景的循环方式。