为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第20天for...of的用法

【金秋打卡】第20天for...of的用法

2022.11.12 09:59 62浏览

一、课程名称:前端工程师2022版

二、课程章节:ES6语法扩展-Iterator遍历器与for...of循环

三、课程讲师:Alex

四、课程内容

(一)for...of的基本用法

(1)认识for...of:注意,for...of循环只会遍历出那些done为false时,对应的value值

 https://img2.sycdn.imooc.com/636d92e40001475b04200237.jpg

      const arr = [1, 2, 3];

      // 使用for of循环

      for (const item of arr) { console.log(item); }

(2)与break、continue一起使用

      const arr = [1, 2, 3];

      for (const item of arr) {

        if (item === 2) {

          // break;

          continue;

        }

        console.log(item);

      }

(3)在for...of中取得数组的索引

1)keys()得到的时索引的可遍历对象,可以遍历出索引值

      for (const key of arr.keys()) {

        console.log(key);

      }

https://img1.sycdn.imooc.com/636d930e0001f7d304200237.jpg

2)values()得到的是值的可遍历对象,可以遍历出值

      // 获取索引值,但是这和直接遍历没有什么区别

      for (const value of arr.values()) {

        console.log(value);

      }

      for (const item of arr) {

        console.log(item);

      }

3)entries()得到的是索引+值组成的数组的可遍历对象 

    // 在一次for循环中同时遍历出索引和值

    for (const entries of arr.entries()) {

        console.log(entries);

      }

    // 联系解构赋值,可以直接解构出来

    for (const [index,value] of arr.entries()) {

        console.log(index,value);

      }

https://img2.sycdn.imooc.com/636d93400001e8c404200237.jpg

(二)认识可遍历

(1)什么是可遍历

只要有Symbol.iterator方法,并且这个方法可以生成可遍历对象,就是可遍历的,只要可遍历,就可以使用for...of循环来统一遍历

(2)原生可遍历的有哪些

数组、字符串、Set、Map、arguments、NodeList

//数组   

for(const item of [1,2,3]){

     console.log(item);

   }

  // 字符串

   for (const item of "hi") {

     console.log(item);

   }

 //Set

   for (const item of new Set([1, 2])) {

     console.log(item);

   }

  //NodeList

   for (const elem of document.querySelectorAll("p")) {

     console.log(elem);

     elem.style.color = "red";

   }

(3)非原生可遍历有哪些

1)一般对象

      // 一般的对象

      const person = { sex: "male", age: 18 };

      console.log(person[Symbol.iterator]()); //报错,所以不可以使用for of

      // for(const item of person){}

      // 想要遍历对象,有两种方法,一种是使用for in循环,另一种是给对象添加iterator方法

      // {next()}{value,done}

      person[Symbol.iterator] = () => {

        let index = 0;

        return {

          next() {

            index++;

            if (index === 1) {

              return {

                value: person.age,

                done: false,

              };

            } else if (index === 2) {

              return {

                value: person.sex,

                done: false,

              };

            } else {

              return {

                done: true,

              };

            }

          },

        };

      };

      for (const item of person) {

        console.log(item);

      }

2)有length和索引属性的对象

    obj[Symbol.iterator]=Array.prototype[Symbol.iterator]

五、课程心得

今天学习了for...of用法、可遍历等相关知识,对Iterator的理解进一步加深,昨天学习上的问题得到了解决,继续加油!


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
1
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消