第十三节：易学又实用的新特性：for...of

        前面几节的内容稍微偏长，代码也不少，估计有基础的同学才会跟得上，不知道大家有没有看懵了。这节来点简单但又很实用的知识，没错，就是for...of。

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

        

        以上案例：用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更适合用于对象的遍历。

总结

以上是生活随笔为你收集整理的第十三节：易学又实用的新特性：for...of的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。