js循环遍历（for....of）-优快云博客

本文链接：https://blog.youkuaiyun.com/The_over/article/details/130499038

文章探讨了不同类型的循环在JavaScript中的应用，包括for循环的代码冗肿问题，forEach无法跳出循环的限制，以及for...of的优点，如简洁的语法、提供索引且能遍历多种数据结构。for...of适用于数组、字符串、伪数组、Set和Map，但不支持普通对象的遍历。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

for循环

缺点：代码臃肿

var arr = [1, 2, 3, 4]
    // 代码臃肿
    for (var i = 0; i < arr.length; i++) {
        if (i == 2) {
            continue
        }
        // console.log(arr[i]);
        console.log(i);
    }

forEach

缺点：不能跳出循环

arr.forEach((item, index) => {
        if (index == 2) {
            continue
        }
         console.log(item);
         console.log(index);
    })

…arr

缺点：不能拿到索引

console.log(...arr);

for…of

可遍历对象：可以被for…of遍历的对象，数组，字符串，伪数组，Set, Map
优点： 1、代码简洁
2、索引是number类型
3、key和value可以分别遍历
4、可以跳出循环

 for (y of arr) {
        // console.log(y);
    }
    // for (key of arr.keys()) {
    //     console.log(key);
    // }
    // for (value of arr.values()) {
    //     console.log(value);
    // }
    // entry
    for ([key, value] of arr.entries()) {
        if (key == 2) {
            continue
        }
        // console.log(key);
        console.log(value);
    }
    // for...of 的使用
    // 伪数组
    let list = document.getElementsByTagName('li')
    for (li of list) {
        console.log(li);
    }
    // 字符串
    var str = '我们都是前端的天才'
    for (st of str) {
        console.log(st);
    }
    // 对象
    var obj = {
        name: 'zs',
        age: 18
    }
    for (ob of obj) {
        console.log(ob); //obj is not iterable
    }