js for...of循环

JavaScript 的 for...of 循环是一种用于遍历可迭代对象（如数组、字符串、Map、Set 等）的方法。它提供了一种简洁的方式来访问可迭代对象中的每个元素，而不需要关心对象的内部结构和迭代细节。

基本语法

for (const element of iterable) {
    // 执行代码
}

• element：在每次迭代中，element 会被赋值为可迭代对象中的当前元素。
• iterable：一个可迭代对象，例如数组或字符串。

示例

遍历数组

const arr = [1, 2, 3, 4, 5];

for (const value of arr) {
    console.log(value);
}
// 输出：
// 1
// 2
// 3
// 4
// 5

遍历字符串

const str = 'hello';

for (const char of str) {
    console.log(char);
}
// 输出：
// h
// e
// l
// l
// o

遍历 Map

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (const [key, value] of map) {
    console.log(key, value);
}
// 输出：
// a 1
// b 2
// c 3

注意事项

1. 中断循环：可以使用 break、continue 语句来中断或跳过迭代。
2. 迭代顺序：for...of 循环按照可迭代对象定义的顺序进行迭代。
3. 非可迭代对象：如果尝试对一个非可迭代对象使用 for...of 循环，会抛出 TypeError。
4. 修改元素值：在遍历数组时，如果直接修改 element 变量，并不会影响数组中的原始值，因为 element 只是数组元素的值的拷贝。

总结

for...of 循环是 JavaScript 中处理可迭代对象的一种简洁且强大的方法。它不仅使代码更加易读，还简化了迭代过程，让我们可以更专注于处理每个元素。