今天带来的知识点既简单又使用,是不是感觉非常的棒啊,OK,不多说了,咱们开始往下看.

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的优势:

  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( )(第八节有介绍,点击查看),获取键名再遍历,得到的index是数字类型的。

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

遍历字符串

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

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

 

遍历DOM List

for...of支持类数组的遍历,例如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解构的遍历,考虑到set和map我们还没学习,我们在后面章节一并讲解。

这节是近期最简短、最易学的一个章节了,希望大家多能看懂。

本节小结

总结:for...of一种新的遍历方式,能遍历的对象有:数组,类数组对象,字符串,set和map结构等具有iterator接口的数据结构。而且for...in更适合用于对象的遍历。
更多前端学习内容文章干货请关注我的专栏(不断更新)

阿里名厂标准web前端高级工程师教程目录大全,从基础到进阶,看完保证您的薪资上升一个台阶

在这里我给大家准备了很多的学习资料

其实你与阿里工程师的差距只差这些东西