js循环遍历

小灰灰 2022-05-28 10:23 282阅读 0赞

方式一

var arr = [1,2,3,4,5];
    for(let i = 0;i<arr.length;i++){
         //...
    }

方式一利用for循环来遍历数组的缺点就是：代码不够简洁。

下面介绍一个写法更加简洁的方式。

方式二

var arr = [1,2,3,4,5];
        arr.forEach(function (value,index) {
           //...
        });

利用forEach循环代码量少了很多，写法更加简洁，缺点就是：无法中断停止整个循环。

方式三

var arr = [1,2,3,4,5];
        for(let i in arr){
            //...
        }

for...in循环更常用于对象的循环，如果用于数组的循环，那么就要注意了，上述代码中每次循环中得到的i是字符串类型，而不是预料中的数字类型，要想对它进行运算，那得先要进行类型转换，造成不方便。

来看看for...of的是实现：

var arr = [1,2,3,4,5];
        for(let value of arr){
            console.log(value);
        }
        //打印结果：依次输出：1 2 3 4 5

看样子是不是有点眼熟，很像for...in？确实很像。它的实现跟for...in很类似。

我们列举一下for...of的优势：

1.  写法比for循环简洁很多；
2.  可以用break来终止整个循环，或者continute来跳出当前循环，继续后面的循环；
3.  结合keys( )获取到循环的索引，并且是数字类型，而不是字符串类型。

分别来展示一下上述的几个优点：

循环可以终止

var arr = [1,2,3,4,5];
        for(let value of arr){
            if(value == 3){
                //终止整个循环
                break;
            }
            console.log(value);
        }
        //打印结果：1 2

以上案例：用break实现了终止整个循环，不会继续后面的遍历，所以打印结果为：1  2。
    
    可跳过当前循环

var arr = [1,2,3,4,5];
        for(let value of arr){
            if(value == 3){
                //跳过当前循环，继续后面的循环
                continue;
            }
            console.log(value);
        }
        //打印结果：1 2 4  5

用continue跳过当前循环，继续后面的循环，所以打印结果为：1  2  4  5。

得到数字类型的索引

var arr = [1,2,3,4,5];
        for(let index of arr.keys()){
            console.log(index);
        }
        //打印结果：依次输出:0 1 2 3 4

使用数组的扩展keys( )（[第八节有介绍，点击查看][Link 1]），获取键名再遍历，得到的index是数字类型的。

此外，相比于for...in循环专门为对象设计，for...of循环的适用范围更广。

遍历字符串

for...of 支持字符串的遍历。

let word = "我是前端小菜鸟";
        for(let w of word){
            console.log(w);
        }
        //打印结果：我  是  前  端  小  菜  鸟

遍历DOM List

for...of支持类数组的遍历，例如DOM List。

1
    2
    3
    //假设有3个p元素
    let pList = document.getElementsByTagName('p');
 
    for(let p of pList){
         console.log(p);
    }
    // 打印结果：1
    //          2
    //          3

还有一些其它的遍历 后续再添加~···

[Link 1]: http://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654079&idx=1&sn=6c5d706549242487d93777a893da6132&scene=21#wechat_redirect