for of 与 for in 得区别

最新推荐文章于 2026-08-22 17:30:01 发布

原创最新推荐文章于 2026-08-22 17:30:01 发布 · 427 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

本文详细比较了JavaScript中的for...of循环和for...in循环，强调for...of适用于遍历数组和字符串的值，for...in则遍历对象的可枚举属性，包括继承的属性。它们的迭代顺序和可迭代性有显著差异。

for...of 循环是一种用于遍历可迭代对象（例如数组和字符串）的语法结构。它可以让我们更加方便地遍历数组中的所有元素，而无需使用传统的 for 循环或 forEach() 方法。

const arr = [1, 2, 3, 4, 5];
for (const element of arr) {
  console.log(element);
}

在上述示例中，我们定义了一个数组 arr，然后使用 for...of 循环遍历数组中的所有元素，并将每个元素打印到控制台上。在每次循环中，element 变量会自动绑定到当前正在遍历的数组元素上。

for...of 循环还可以与 break 和 continue 一起使用，以实现更加复杂的控制流程。例如，下面的示例会跳过数组中所有偶数元素并只打印奇数元素：

const arr = [1, 2, 3, 4, 5];
for (const element of arr) {
  if (element % 2 === 0) {
    continue;
  }
  console.log(element);
}

for...in 遍历数组时，会将数组的所有属性（包括非数值型属性）都枚举出来，所以可能会遍历到一些不是数组元素的属性。

    const arr1 = [1, 2, 3, 4, 5];

    arr1.someProperty = "someValue";

    for (const index in arr1) {
      console.log(arr1[index]); // 依次输出： 1 2 3 4 5 someValue
    }

在上述示例中，我们定义了一个数组 arr，并给它添加了一个自定义属性 someProperty。然后，我们使用 for...in 循环遍历了数组 arr 中的索引，并打印了对应的元素。可以观察到，除了数组元素外，还会遍历到自定义属性 someProperty。

因此，在遍历数组时，建议使用 for...of 循环或传统的 for 循环，而不是 for...in 循环。

总结

遍历对象属性：for...in 循环用于遍历对象的可枚举属性（包括继承的属性），而 for...of 循环用于遍历可迭代对象（如数组、字符串等）的元素。所以，for...in 循环通常用于遍历对象的键，而 for...of 循环用于遍历数组或字符串的值。
迭代的顺序：for...in 循环遍历对象属性时，没有特定的顺序保证，不同 JavaScript 引擎可能以不同的顺序进行遍历。而 for...of 循环遍历数组或字符串时，会按照它们在原始对象中的顺序进行迭代。
可迭代性：for...in 循环可以用于遍历任何对象，无论是否可迭代。但是，for...of 循环只能用于遍历可迭代对象，这意味着对象必须实现迭代器接口，才能使用 for...of 循环进行遍历。