在for of循环出现之前,for循环适合遍历普通的数组,for in循环比较适合遍历键值对,遍历数组对象的foreach方法,但是这些遍历

都有一定的局限性,所以在ES6之后引入了统一的遍历方式 for of循环 举例下图所示:

但是此时如果遍历对象的话 会报错 obj is iterable 对象不可迭代 这是什么原因呢,如下图所示:

js中能够表示有结构的数据类型越来越多,为了给各种各样的数据结构提供统一遍历方式,官方提供了一个Iterable的接口 可迭代的

(符合相同的规格标准),实现Iterable 接口就是 for of的前提,也就是说原型链中必须要挂载一个Iterable方法,如下图原型所示:

那这个方法到底是干什么的呢,从下图上不难看出 Iterable底层维护了一个next方法的对象 value值为遍历的下一个元素done属性表示

是否遍历完

在上文中提到 之所以能够使用for of循环遍历 是因为Iterable的接口(符合相同的规格标准),也就是说如果对象符合了这个规格标准,

也可以使用for of循环,我们可以尝试着挂载一个Symbol.iterator方法 然后在方法中返回一个迭代器对象

我们来梳理下这几个对象之间的关系 以及它们的作用
1.最外层的obj对象 实现了可迭代接口 英文名 Iterable
作用:返回一个迭代器的Symbol.iterator方法,
2.Symbol.iterator方法 return的这个对象 实现了迭代器接口 英文名 Iterator
作用:内部必须要有一个内部迭代的next方法,
3.next方法中 return返回的对象 实现了迭代结果接口 英文名 IterationResult
作用:value属性 done的布尔值 表示迭代的值和迭代是否结束

ES6 for of循环, 可迭代接口,实现可迭代接口的更多相关文章

  1. Atitit  循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate).

    Atitit  循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate). 1.1. 循环算是最基础的概念, 凡是重复执行一段代码, 都可以称之为循环. ...

  2. 循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate)的区别

    表示“重复”这个含义的词有很多, 比如循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate). 循环算是最基础的概念, 凡是重复执行一段代码, 都可以称 ...

  3. python_如何在一个for循环中迭代多个可迭代对象?

    案例: 某班学生期末考试成绩,语文.数学.英语分别存储在3个列表中,同时迭代三个列表.,计算每个学生的总分(并行) 某年级有4个班,某次英语成绩分别记录在4个列表中,依次迭代每个列表,统计全年级高于9 ...

  4. 003_循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate)的区别

    表示“重复”这个含义的词有很多, 比如循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate). 循环算是最基础的概念, 凡是重复执行一段代码, 都可以称 ...

  5. Python-如何在一个for循环中迭代多个可迭代对象?

    案例: 某班学生期末考试成绩,语文.数学.英语分别存储在3个列表中,同时迭代三个列表.,计算每个学生的总分(并行) 某年级有4个班,某次英语成绩分别记录在4个列表中,依次迭代每个列表,统计全年级高于9 ...

  6. 如何把 Callback 接口包装成 Promise 接口

    最近一段时间一直在看Node.js,在开发过程中经常要调用一些异步接口,通常在接口的最后一个参数会传入一个回调函数,可以用来处理异常,非异常情况.大致模式如下: var fs = require(“f ...

  7. java基础2.-------interface接口类,实现接口

    1.为什么使用接口,是把功能方法都写在一个类中,在其他需要调用的时候,通过implements实现该接口 2.接口可以继承多个父类接口,在实现接口的时候,实现类实现所有方法 3.在接口类写方法时,自动 ...

  8. 【linux草鞋应用编程系列】_1_ 开篇_系统调用IO接口与标准IO接口

    最近学习linux系统下的应用编程,参考书籍是那本称为神书的<Unix环境高级编程>,个人感觉神书不是写给草鞋看的,而是 写给大神看的,如果没有一定的基础那么看这本书可能会感到有些头重脚轻 ...

  9. 转】C#接口-显式接口和隐式接口的实现

    [转]C#接口-显式接口和隐式接口的实现 C#中对于接口的实现方式有隐式接口和显式接口两种: 类和接口都能调用到,事实上这就是“隐式接口实现”. 那么“显示接口实现”是神马模样呢? interface ...

随机推荐

  1. PyQt(Python+Qt)学习随笔:视图中类QAbstractItemView的dragDropOverwriteMode属性不能覆盖写的问题

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在<PyQt(Python+Qt)学习随笔:视图中类QAbstractItemView的dra ...

  2. 第十二章、Designer中的menu菜单、toolBar工具栏和Action动作

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.引言 Qt Designer中的部件栏并没有菜单.toolBar以及Action相关的部件,仅在 ...

  3. 建立SQL Server用户登录

    第一步:右击服务器名,点击"属性",选择"安全性",选中"Sql server和Windows身份验证模式". 第二步:鼠标右键点击安全性中 ...

  4. 关于获取客户端IP问题

    //相关代码 1.HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_FOR"] 2.HttpContext ...

  5. uni-app微信小程序登录授权

    微信小程序授权是非常简单和常用的功能,但为了方便,还是在此记录一下要点: 首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@g ...

  6. css处理文字不换行、换行截断、溢出省略号

    1.使文字不换行 white-space: nowrap; 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签 ...

  7. 自定义radio、checkbox的样式

    input标签中的radio和checkbox是很表单中常用的类型,大多时候,默认样式并不能满足我们的需求,所以有了此篇. 自定义样式,由此开启: html: <div class=" ...

  8. linux下/etc/profile /etc/bashrc /root/.bashrc /root/.bash_profile这四个配置文件的加载顺序

    目录 一.关于linux配置文件 二.验证四个配置文件的加载顺序 三.结论 一.关于linux配置文件 1.linux下主要有四个配置文件:/etc/profile ./etc/bashrc ./ro ...

  9. 浏览器开发者工具network详解

    General概诉 请求链接 Request URL: 请求方式 Request Method: 代码状态 Status Code: 远程地址 Remote Address: 引用协议 用于过滤 Re ...

  10. Elastic Search 学习之路(一)

    一.基本概念及缘由 1.Sql vs nosql SQL:Structured Query Language Nosql:Not only SQL Relationship DB Relations: ...