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 应用的开发需求和技术趋势，结合具体的应用场景和业务需求，选择合适的编程模式和工具，以提高代码的质量和效率，同时也为自己的职业发展打下坚实的基础。