ES6 - for... of循环

ES6 - for... of循环 首页 / ES6入门教程 / 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);
}

输出

10
20
30

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

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

朱赟的技术管理课 -〔朱赟〕

软件测试52讲 -〔茹炳晟〕

后端技术面试 38 讲 -〔李智慧〕

安全攻防技能30讲 -〔何为舟〕

正则表达式入门课 -〔涂伟忠〕

实用密码学 -〔范学雷〕

A/B测试从0到1 -〔张博伟〕

大厂广告产品心法 -〔郭谊〕

大型Android系统重构实战 -〔黄俊彬〕

好记忆不如烂笔头。留下您的足迹吧 :)