JavaScript for...of 循环

在 JavaScript 中，有三种方法可以使用 for 循环。

• JavaScript for 循环
• JavaScript for...in 循环
• JavaScript for...of 循环

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

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

JavaScript for...of 循环

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

for (element of iterable) {
    // body of for...of
}

这里，

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

用通俗的话来说，你可以将上面的代码理解为：对于可迭代对象中的每一项，都执行循环体。

Arrays 的 for...of

for..of 循环可用于遍历 数组。例如：

// array
const students = ['John', 'Sara', 'Jack'];

// using for...of
for ( let element of students ) {

    // display the values
    console.log(element);
}

输出

John
Sara
Jack

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

Strings 的 for...of

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

// string
const string = 'code';

// using for...of loop
for (let i of string) {
    console.log(i);
}

输出

c
o
d
e

Sets 的 for...of

你可以使用 for...of 循环来遍历 Set 元素。例如：

// define Set
const set = new Set([1, 2, 3]);

// looping through Set
for (let i of set) {
    console.log(i);
}

输出

1
2
3

Maps 的 for...of

你可以使用 for...of 循环来遍历 Map 元素。例如：

// define Map
let map = new Map();

// inserting elements
map.set('name', 'Jack');
map.set('age', '27');

// looping through Map
for (let [key, value] of map) {
    console.log(key + '- ' + value);
}

输出

name- Jack
age- 27

用户定义迭代器

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

// creating iterable object
const iterableObj = {

    // iterator method
    [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 };
            }
        }
    }
}

// iterating using for...of
for (const i of iterableObj) {
 console.log(i);
}

输出

1
2
3

Generators 的 for...of

由于 generators 是可迭代的，你可以更轻松地实现一个迭代器。然后你可以使用 for...of 循环来遍历 generators。例如：

// generator function
function* generatorFunc() {
  
    yield 10;
    yield 20;
    yield 30;
}

const obj = generatorFunc();

// iteration through generator
for (let value of obj) {
    console.log(value);
}

输出

10
20
30

for...of 与 for...in 对比

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