JS表示集合的对象主要有Array、Set、Object、Map,在以前,遍历它们需要使用2种不同的方法,而现在,JS提出了Iterator机制,可以给不同的数据结构提供统一的遍历方法,就是for…of。换句话说,只有部署了Iterator的数据才能用for…of遍历。

Iterator的遍历过程是这样的:

(1)创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。

(2)第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。

(3)第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。

(4)不断调用指针对象的next方法,直到它指向数据结构的结束位置。

每一次调用next方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含valuedone两个属性的对象。其中,value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。

ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)。

默认部署了Iterator的数据有

-Array

-Map

-Set

-String

-TypedArray

-arguments

-NodeList 对象

一个对象要被for…of遍历,必须部署Iterator,或者在其原型上部署Iterator,普通对象并没有部署Iterator,如果用for…of遍历,会抛出“not iterable”错误

然而,一个类似于数组的普通对象直接调用数组的Symbol.iterator,也是可以用for…of遍历的

let iterable = {
0: 'a',
1: 'b',
2: 'c',
length: 3,
[Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
console.log(item); // 'a', 'b', 'c'
}

需要注意的是,“类似于数组”这个条件,不仅仅要以数字为索引,length属性也必不可少

两个条件中,任何一条不满足(就是普通对象),调用数组的Symbol.iterator是行不通的

那么普通对象到底要怎样才能被for…of遍历?

一是利用Object.keys得到对象的键名然后遍历这个数组

for (var key of Object.keys(someObject)) {
console.log(key + ': ' + someObject[key]);
}

Iterator的遍历过程看着像Generator,Generator可以很简单就实现Iterator接口,所以第二种方法就是利用Generator方法将对象包装一下

function* entries(obj) {
for (let key of Object.keys(obj)) {
yield [key, obj[key]];
}
} for (let [key, value] of entries(obj)) {
console.log(key, '->', value);
}

总结参考:http://es6.ruanyifeng.com/#docs/iterator

ES6的Iterator遍历器的更多相关文章

  1. ES6的 Iterator 遍历器到底是什么?

    这节课要讲的是ES6中的Iterator. for...of为啥不遍历Object对象 第十三节我们讲了简单又实用的for...of,我们可以使用它来遍历数组,字符串,Set和Map结构,但是有没有发 ...

  2. 疑问:Iterator 遍历器和数据集合各种遍历方法的区别

    https://es6.ruanyifeng.com/#docs/iterator Iterator(遍历器)的概念 Iterator 接口主要供for...of消费 Iterator 的遍历过程是: ...

  3. Java SE之For增强与Iterator遍历器提取数据(附Map.Entry)

    增强for循环: 1.操作数组 2.操作List集合 3.操作Map集合    1.map.values()法    2.map.keySet()法  [传统方法]    3.Map.Entry法   ...

  4. 【前端】【javascript】es6中的遍历器接口Iterator

    好久没发文章啦-.-为了证明我还活着,我决定从笔记里面抓一篇还算不乱比较像文章的发出来... 这些笔记是我在学es6的时候断断续续记录的,最近会一份一份整理陆陆续续发出来,顺便也自己再看一遍.我学习e ...

  5. ES6学习笔记(十三)Iterator遍历器和for...of循环

    1.概念 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有 ...

  6. Iterator 遍历器

    1.遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). 2.Iterator ...

  7. Iterator遍历器 调用Symbol.Iterator属性,遍历器对象。

    Iterator实现原理 创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员. 第二次调 ...

  8. generator生成器iterator遍历器和yield

    generator方法()返回一个iterator 使用generator时永远先去调用generator()方法 for of对iterator的调用过程(babel参照) 1,_iterator. ...

  9. Iterator(遍历器) 和 for...of 循环

    是generator的前置知识 generator :https://www.cnblogs.com/wangtong111/p/11322961.html 遍历器(Iterator)就是这样一种机制 ...

随机推荐

  1. 201521123118《java程序与设计》第4周作业总结

    1.本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点 1.2 使用常规方法总结其他上课内容. 为了不必要写重复的代码,可以运用继承,用关键字extends来定义一个类,被继承的类叫做父类,继 ...

  2. 201521123103 《Java学习笔记》 第十一周学习总结

    一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 二.书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...

  3. 201521123050 《Java程序设计》第10周学习总结

    1. 本周学习总结 2. 书面作业 1.finally,题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 只有执行过try才会执行finally ...

  4. Bitbucket 触发内网 Jenkins Build

    为了保证安全性多数的持续集成系统都会部署在公司内部的局域网中,这样如果代码部署在 Bitbucket 等环境中就只能通过轮询的方式来触发 Build.那么有没有办法通过 Bitbucket 的 Web ...

  5. java:接口特性 接口与抽象类/普通类的区别

    接口 书面定义: Java接口是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为(功能). 在ja ...

  6. Java中数组的概念

    1.什么是二维数组?有几种表达方式?分别是什么? 答:多维数组即数组的数组,即数组的元素也是数组. 例:int[] [] a = {{1},{1,2},{1,2,3}}; 有三种方式 1).int [ ...

  7. python django 使用 haystack:全文检索的框架

    haystack:全文检索的框架whoosh:纯Python编写的全文搜索引擎jieba:一款免费的中文分词包 首先安装这三个包 pip install django-haystackpip inst ...

  8. Spring Boot 学习之项目构建

    最近做了外包,都是工程专业术语,前期熟悉项目看文档看的挺累的,闲暇时间自己学习一下Spring Cloud,找点乐趣. 就有了下面的小项目. 本项目是一个Spring boot项目. 一.nginx做 ...

  9. MySQL+Keepalived配置高可用

    服务器环境: 主mysql:192.168.1.163 从mysql:192.168.1.126 VIP:192.168.1.50 一.mysql配置主从同步 1.配置主mysql服务器 vim /e ...

  10. vue实例讲解之vuex的使用

    vuex是一个状态管理插件,本文通过一个简单的实例来讲解一下,vuex的使用. 先看一张官方的图: 这个图新手一看估计是蒙的,简单解释一下,这个图表示的就是vue通过Action Mutations ...