JavaScript for... of 循环

    在本教程中，您将借助示例了解 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 - 可迭代的项

    用简单的英语，您可以将上面的代码理解为：对于 iterable 中的每个 element，运行循环体。

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 数组对象并显示其所有值。

for…of 与字符串

    您可以使用 for…of 循环来遍历字符串值。例如，

// string
const string = 'code';

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

    输出

c
o
d
e

for…of 与 Set

    您可以使用 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

for…of 与 Map

    您可以使用 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

for…of 与生成器

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

// 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 Vs for…in

for…of	for…in
for…of 循环用于遍历 iterable 的值。	for…in 循环用于遍历对象的键。
for…of 循环不能用于遍历对象。	你可以用 for…in 来遍历一个可迭代的数组和字符串，但你应该避免将 for…in 用于 iterable

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

    上一教程 ：JS Inheritance                                          下一教程 ：JS Proxies

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/for-of