gpt4 book ai didi

JavaScript for... of 循环

转载 作者:知者 更新时间:2024-03-13 00:50:38 24 4
gpt4 key购买 nike

在本教程中,您将借助示例了解 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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com