关于for......of的使用_vue3 for of 异步循环-优快云博客

for…of 一种用于遍历数据结构的方法。它可遍历的对象包括数组，对象，字符串，set和map结构等具有iterator 接口的数据结构。
（上面这句话如果有看不懂的地方，自动忽略即可，后续会有章节介绍。）
下面就以大家熟悉的数组为例来介绍for…of。
遍历数组早就不是什么新鲜事，我们有好几种方法去完成，此时ES6给我们带来一个新的遍历方for…of，难道它有更牛逼的地方？
接下来，我们先来看看几种传统的遍历数组的方式以及它们的缺陷。

                         **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会比它们更好吗？答案是肯定的。

我们来看看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的优势：

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

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

可以终止的循环：

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

得到数字类型的索引：

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

遍历字符串：

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

遍历DOM List：

            <p>1</p>
            <p>2</p>
            <p>3</p>
            //假设有3个p元素
            let pList = document.getElementsByTagName('p');

            for(let p of pList){
                console.log(p);
            }
            // 打印结果：<p>1</p>
            //          <p>2</p>
            //          <p>3</p>

总结：for…of一种新的遍历方式，能遍历的对象有：数组，类数组对象，字符串，set和map结构等具有iterator接口的数据结构。而且for…in更适合用于对象的遍历。