在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. 【Docker】 CentOS7 安装 Docker 及其使用方法 ( 一 )

    系列目录: [Docker] CentOS7 安装 Docker 及其使用方法 ( 一 ) [Docker] 使用Docker 在阿里云 Centos7 部署 MySQL 和 Redis (二) [D ...

  2. Dr.COM获取用户属性超时!请检查防火墙配置允许UDP 61440端口。怎么解决

    最近校园网老是出问题,看到好多同学都遇到了下面的问题,我就来说一下我的解决方法.(目前我认识的有三个同学遇到了这样的情况,用这个方法都解决了,但不一定对每个人都有效) 首先登陆net.scut.edu ...

  3. 【Kubernetes学习笔记】-kubeadm 手动搭建kubernetes 集群

    目录 K8S 组件构成 环境准备 (以ubuntu系统为例) 1. kubernetes集群机器 2. 安装 docker. kubeadm.kubelet.kubectl 2.1 在每台机器上安装 ...

  4. 题解-比赛CF1332

    题解-比赛CF1332 比赛CF1332 [A] [B] [C] [D] [E] [F] [G] [A]Exercising Walk Exercising Walk \(T\) 组测试数据,每次给定 ...

  5. js中数组、字符串、日期、数学API方法一览

    以下内容摘选自 http://www.w3school.com.cn/jsref/jsref_obj_array.asp 点击方法新窗口打开详解 数组: 方法 描述 concat() 连接两个或更多的 ...

  6. js--前端开发工作中常见的时间处理问题

    前言 在前端开发工作中,服务端返回的时间数据或者你传递给服务端的时间参数经常会遇到时间格式转换及处理问题.这里分享一些我收集到的一些处理方法,方便日后工作中快速找到.先附上必须了解的知识内置对象传送门 ...

  7. centos7下安装iostat命令

    [root@node01 yum.repos.d]# yum intall -y sysstat Loaded plugins: fastestmirror No such command: inta ...

  8. Linux下设置定时任务删除归档日志

    1.编辑删除归档日志的脚本----/home/oracle/clearlog.sh #! /bin/bash source ~/profile_orcl#记录归档删除的日志exec >> ...

  9. 如何push一个docker镜像到DockerHub上

    在DockerHub上创建账号:https://hub.docker.com/ 这里我的账号是firewarm 本地下载镜像(这里拿alpine做示例),并为镜像打tag [root@host-30 ...

  10. 一、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...