首页 > 编程笔记 > JavaScript笔记 阅读:23

JavaScript for of循环的用法(附带实例)

ES6 引入了 for...of 循环,作为遍历所有数据结构的统一方法。

For...of 循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如 arguments 对象、DOM NodeList 对象)、字符串以及 Generator 对象。

For...of 循环的语法如下:
for (variable of iterable) {
    // code block to be executed
}
其中,variable 是一个变量名,表示循环中每次迭代时的当前值;iterable 是一个可迭代对象,表示要遍历的数据结构。

在每次循环中,变量 variable 将依次赋值为 iterable 中的每个元素,并执行一次 code block 中的代码。

1) 遍历数组:
const arr = ['red', 'green', 'blue'];
for(let v of arr) {
    console.log(v); // red green blue
}

2) 遍历字符串:
const str = "Hello";
for (const char of str) {
    console.log(char); // h e l l l o
}

3) 遍历 Set:
const set = new Set([1, 2, 3]);
for (const element of set) {
    console.log(element); // 1 2 3
}

4) 遍历 Map:
const map = new Map([
    ["key1", "value1"],
    ["key2", "value2"],
    ["key3", "value3"],
]);
for (const [key, value] of map) {
    console.log(key + " = " + value); //key1 = value1 key2 = value2 key3 = value3
}
遍历 Map 结构时,是按照各个成员被添加进数据结构的顺序,返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值。

5) 历类似数组的对象:
// arguments 对象
function printArgs() {
    for (let x of arguments) {
        console.log(x);
    }
}
printArgs('a', 'b'); // 'a' 'b'

// DOM NodeList 对象
let paras = document.querySelectorAll("p");
for (let p of paras) {
    p.classList.add("test");
}

6) 在 for...of 循环中,可以使用 break 和 continue 关键字来控制循环的执行流程:
const arr2 = [1, 2, 3, 4, 5];
for (const element of arr2) {
    if (element === 3) {
        console.log("Found it!");
        break;
    }
    console.log(element); // 1 2 Found it!
}

注意,for...of 循环只能用于遍历实现了迭代器协议的对象。如果尝试使用 for...of 循环遍历一个不支持迭代器协议的对象,会导致 TypeError 错误。

在编写 JavaScript 代码时,遍历语法包括 for...of、for、forEach 和 for...in 等,不仅需要熟练掌握语言本身的语法和特性,还需要了解现代 Web 应用的开发需求和技术趋势,结合具体的应用场景和业务需求,选择合适的编程模式和工具,以提高代码的质量和效率,同时也为自己的职业发展打下坚实的基础。

相关文章