如何用for...of遍历可迭代对象？

for...of 循环用于遍历可迭代对象，如数组、字符串、map、set 等。1. 它通过简洁的语法 for (const element of iterable) 直接获取每个元素；2. 支持自定义可迭代对象，通过实现 symbol.iterator 方法；3. 与 for...in 不同，for...of 遍历值而非属性名；4. 可用于数据处理、异步操作、dom 操作等场景；5. 应避免在需要索引、非可迭代对象或性能极端敏感的情况下使用；6. 可用 break 中断循环，continue 跳过当前项，return 退出函数及循环。

for...of 循环是 JavaScript 中遍历可迭代对象（Iterable objects）的利器。它能让你轻松访问数组、字符串、Map、Set 等数据结构中的元素，而无需手动管理索引。

解决方案

for...of 循环的语法非常简洁：

for (const element of iterable) {
  // 使用 element 做一些事情
}

• element：循环的每个迭代中，element 会被赋值为可迭代对象中的下一个值。
• iterable：你想要遍历的可迭代对象。

示例：遍历数组

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

for (const number of myArray) {
  console.log(number); // 输出 1, 2, 3, 4, 5
}

示例：遍历字符串

const myString = "Hello";

for (const character of myString) {
  console.log(character); // 输出 H, e, l, l, o
}

示例：遍历 Map

Map 对象存储键值对。 for...of 循环会遍历 Map 中的每个键值对，以 [key, value] 的形式返回。

const myMap = new Map();
myMap.set("name", "Alice");
myMap.set("age", 30);

for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`); // 输出 name: Alice, age: 30
}

示例：遍历 Set

Set 对象存储唯一的值。 for...of 循环会遍历 Set 中的每个值。

const mySet = new Set([1, 2, 3, 3, 4, 4, 5]); // Set 会自动去重

for (const number of mySet) {
  console.log(number); // 输出 1, 2, 3, 4, 5
}

与 for...in 的区别

for...of 和 for...in 经常被混淆，但它们用途不同。for...in 循环用于遍历对象的 属性名，而 for...of 循环用于遍历可迭代对象的 值。

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

// for...in 遍历属性名
for (const key in myObject) {
  console.log(key); // 输出 a, b, c
}

// 注意：for...of 不能直接遍历普通对象，因为普通对象不是可迭代的
// for (const value of myObject) { // 会报错
//   console.log(value);
// }

自定义可迭代对象

你可以通过实现 Symbol.iterator 方法来使自定义对象可迭代。 这个方法需要返回一个迭代器对象，该迭代器对象必须具有 next() 方法。 next() 方法返回一个包含 value 和 done 属性的对象。

const myIterable = {
  data: [1, 2, 3],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      },
    };
  },
};

for (const number of myIterable) {
  console.log(number); // 输出 1, 2, 3
}

for...of 循环的优势在于它的简洁性和易用性，它能够清晰地表达遍历可迭代对象的意图，避免了手动管理索引的繁琐。

for...of 循环可以用于哪些实际场景？

• 数据处理： 遍历数组或集合来执行数据转换、过滤或聚合操作。
• 异步操作： 结合 async/await 遍历异步数据流，例如从服务器获取的数据。
• DOM 操作： 遍历 DOM 元素集合，例如为每个元素添加事件监听器。
• 状态管理： 遍历状态对象来更新 UI 或执行其他副作用。

在什么情况下应该避免使用 for...of 循环？

• 需要访问索引： 如果你需要访问当前元素的索引，for...of 循环不是最佳选择。可以使用传统的 for 循环或 Array.prototype.forEach() 方法。
• 非可迭代对象： for...of 循环只能用于可迭代对象。如果尝试遍历非可迭代对象，会抛出错误。 需要使用 for...in (遍历键) 或 Object.keys/values/entries (转换为数组再遍历)。
• 性能敏感场景： 在某些性能敏感的场景下，传统的 for 循环可能比 for...of 循环略快。 但通常情况下，for...of 循环的性能足够好，而且代码更易读。 性能优化应该基于实际测量，而不是盲目猜测。

如何提前中断 for...of 循环？

可以使用 break 语句提前中断 for...of 循环。 break 语句会立即退出循环，并将控制权转移到循环之后的代码。

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

for (const number of myArray) {
  if (number > 3) {
    break; // 当 number 大于 3 时，退出循环
  }
  console.log(number); // 输出 1, 2, 3
}

也可以使用 continue 语句跳过当前迭代，继续下一次迭代。 continue 语句会跳过循环体中剩余的代码，并立即开始下一次迭代。

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

for (const number of myArray) {
  if (number % 2 === 0) {
    continue; // 当 number 是偶数时，跳过本次迭代
  }
  console.log(number); // 输出 1, 3, 5
}

return 语句也可以用于提前退出循环，但 return 语句会退出整个函数，而不仅仅是循环。 因此，只有在循环位于函数内部，并且你想要同时退出循环和函数时，才应该使用 return 语句。

以上就是如何用for...of遍历可迭代对象？的详细内容，更多请关注php中文网其它相关文章！