关注我们

ES6 - for... of循环

在 JavaScript ES6 的更高版本中引入了for ... of循环。

JavaScript中的for..of循环允许您遍历可迭代的对象(数组，集合，映射，字符串等)。

for ... of 循环的语法为:

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

这里，

iterable - 可迭代对象(数组，集合，字符串等)。
element - 可迭代项

循环数组

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循环遍历字符串值。例如，

// string
const string = 'code';

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

输出

c
o
d
e

循环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

循环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 循环遍历生成器。例如，

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

const obj = generatorFunc();

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