跳到主要内容

JavaScript for... of 循环

提示
  1. 迭代可迭代对象：JavaScript的for...of循环（ES6引入）用于遍历可迭代对象，如数组、集合、映射、字符串等。
  2. 不同类型的迭代：for...of循环可以用于遍历数组、字符串、Set集合和Map映射中的元素。
  3. 与for...in的区别：for...of循环用于遍历迭代对象的值，而for...in循环用于遍历对象的键，for...of不能用于迭代普通对象。

在 JavaScript 中，我们可以使用三种方式来使用 for 循环。

for...of 循环是在 JavaScript ES6 的后期版本中引入的。

JavaScript 中的 for..of 循环允许你遍历可迭代对象（如数组、集合、映射、字符串等）。

JavaScript for...of 循环​

for...of 循环的语法是：

for (element of iterable) {
  // for...of 的主体
}

这里，

  • iterable - 一个可迭代对象（如数组、集合、字符串等）。
  • element - 可迭代对象中的项目

用简单的英语，你可以将上述代码解读为：对于可迭代对象中的每个元素，运行循环的主体。

for...of 与数组​

for..of 循环可以用来遍历数组。例如，

// 数组
const students = ["John", "Sara", "Jack"];

// 使用 for...of
for (let element of students) {
  // 显示值
  console.log(element);
}

输出

John;
Sara;
Jack;

在上述程序中，for...of 循环用于遍历学生数组对象并显示其所有值。

for...of 与字符串​

你可以使用 for...of 循环遍历字符串值。例如，

// 字符串
const string = "code";

// 使用 for...of 循环
for (let i of string) {
  console.log(i);
}

输出

c;
o;
d;
e;

for...of 与集合​

你可以使用 for...of 循环遍历集合元素。例如，

// 定义集合
const set = new Set([1, 2, 3]);

// 遍历集合
for (let i of set) {
  console.log(i);
}

输出

1;
2;
3;

for...of 与映射​

你可以使用 for...of 循环遍历映射元素。例如，

// 定义映射
let map = new Map();

// 插入元素
map.set("name", "Jack");
map.set("age", "27");

// 遍历映射
for (let [key, value] of map) {
  console.log(key + "- " + value);
}

输出

name - Jack;
age - 27;

用户定义的迭代器​

你可以手动创建一个迭代器，并使用 for...of 循环来遍历迭代器。例如，

// 创建可迭代对象
const iterableObj = {
  // 迭代器方法
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step === 1) {
          return { value: "1", done: false };
        } else if (step === 2) {
          return { value: "2", done: false };
        } else if (step === 3) {
          return { value: "3", done: false };
        }
        return { value: "", done: true };
      },
    };
  },
};

// 使用 for...of 进行迭代
for (const i of iterableObj) {
  console.log(i);
}

输出

1;
2;
3;

for...of 与生成器​

由于生成器是可迭代的，你可以以更简单的方式实现迭代器。然后你可以使用 for...of 循环遍历生成器。例如，

// 生成器函数
function* generatorFunc() {
  yield 10;
  yield 20;
  yield 30;
}

const obj = generatorFunc();

// 通过生成器进行迭代
for (let value of obj) {
  console.log(value);
}

输出

10;
20;
30;

for...of 与 for...in 的比较​

for...offor...in
for...of 循环用于遍历可迭代对象的值。for...in 循环用于遍历对象的键。
for...of 循环不能用于遍历对象。你可以使用 for...in 来遍历可迭代对象，如数组和字符串，但应避免对可迭代对象使用 for...in。

for...of 循环在 ES6 中被引入。一些浏览器可能不支持其使用。要了解更多，请访问 JavaScript for...of 支持。

最后于 更新