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

2、Iterator的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费。

3、在ES6中,有些数据结构原生具备Iterator接口(比如数组),即不用任何处理,就可以被for...of循环遍历,有些就不行(比如对象)。

原因在于,这些数据结构原生部署了Symbol.iterator属性(详见下文),另外一些数据结构没有。凡是部署了Symbol.iterator属性的数据结构,就称为部署了遍历器接口。调用这个接口,就会返回一个遍历器对象。

4、在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。

5、一个为对象添加Iterator接口的例子。

  1. let obj = {
  2. data: [ 'hello', 'world' ],
  3. [Symbol.iterator]() {
  4. const self = this;
  5. let index = 0;
  6. return {
  7. next() {
  8. if (index < self.data.length) {
  9. return {
  10. value: self.data[index++],
  11. done: false
  12. };
  13. } else {
  14. return { value: undefined, done: true };
  15. }
  16. }
  17. };
  18. }
  19. };

6、下面是类似数组的对象调用数组的Symbol.iterator方法的例子。

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

注意,普通对象部署数组的Symbol.iterator方法,并无效果。

7、有一些场合会默认调用Iterator接口(即Symbol.iterator方法),除了下文会介绍的for...of循环,还有几个别的场合。

解构赋值

扩展运算符(...)

yield_yield后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口。

由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用

8、字符串是一个类似数组的对象,也原生具有Iterator接口。

9、遍历器对象除了具有next方法,还可以具有return方法和throw方法。如果你自己写遍历器对象生成函数,那么next方法是必须部署的,return方法和throw方法是否部署是可选的。

js es6 Iterator的更多相关文章

  1. js es6 map 与 原生对象区别

    区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...

  2. JS&ES6学习笔记(持续更新)

    ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...

  3. js ES6 多行字符串 连接字符串

    1. 以前,js多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: 旧版写法 alert("你好,\n 我叫\n Olive" ...

  4. Gist - ES6 Iterator

    Introduction Iterator is one of the most common design modes in daily development. Let's explore the ...

  5. js ES6 Set和Map数据结构详解

    这篇文章主要介绍了ES6学习笔记之Set和Map数据结构,结合实例形式详细分析了ECMAScript中基本数据结构Set和Map的常用属性与方法的功能.用法及相关注意事项,需要的朋友可以参考下   本 ...

  6. ES6—— iterator和for-of循环

    Iterator 遍历器的作用:为各种数据结构,提供一个同意的,简便的访问接口.是的数据结构的成员能够按某种次序排列.ES6 新增了遍历命令 for...of 循环,Iterator接口主要供 for ...

  7. es6 -- Iterator 和 for...of 循环

    1:Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就有了四种数据集合,用户还 ...

  8. es6 Iterator和for...of循环

    javascript表示集合的数据结构有 es5: array object es6: map set, 一共4种数据集合 需要一种统一的接口机制来处理所有不同的数据结构 遍历器就是这样一种机制,它是 ...

  9. 2019.7月-前端面试总结(H5+C3+JS+ES6+Vue+浏览器)

    第二次面试 HTML HTML5中的新标签,举例一下 canvas绘画,本地离线存储localStorage,sessionStorage,video和audio元素,语义化元素,表单类型(date, ...

  10. JS ES6

    变量 let 块级作用域内有效 不能重复声明 不会预处理,不存在提升 var btns = document.getElementsByTagName('button'); for (let i = ...

随机推荐

  1. 字典嵌套列表 与 列表嵌套字典 导出为csv 的方法

    字典嵌套列表 导出csv {'rank': ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '1 ...

  2. CPNtools协议建模安全分析---实例变迁标记(五)

    之前的说了库所的标记,现在我们开始加讲变迁标记 1.描述变迁的标记有四种类型,分别是变迁的标记,门卫的标记,世间的标记,代码片段的标记. 咋变迁中限制更严格的输入token,其中Code Segeme ...

  3. 英语单词 重读 注意第六条 类似tion前面的重读这种的

    单词音节重读的10个基本判断规则: 1.一个单词只有一个重读音节 无论该单词有多少个音节(syllable),其重读音节只有一个,而且都在元音上,辅音不重读.单音节词也重读,只是省略了重音符号.如:b ...

  4. 不可不知道的python装饰器

    前记   python小白,估计很多没用过这个高级功能吧,当你用了它之后就会发现,真是非常好用喔.   装饰器本质上是一个 Python 函数或类,它可以让其他函数或类在不需要做任何代码修改的前提下增 ...

  5. [Raspberry Pi]树莓派多线程下串口收发数据

    [Raspberry Pi]树莓派多线程下串口收发数据 鼠鼠用的是python开发树莓派,因为python是最优美的语言! 少废话,直接上代码: import threading import ser ...

  6. MySQL(视图、事务、存储过程、函数、流程控制、索引)

    一 视图(了解) 什么是视图 视图就是通过查询得到一张虚拟表,然后保存下来,下次可以直接使用 为什么要用视图 如果要频繁的操作一张虚拟表(拼表组成的),你就可以制作成视图,后续直接操作 视图其实也是一 ...

  7. 三维模型3DTile格式轻量化在三维展示效果上的重要性分析

    三维模型3DTile格式轻量化在三维展示效果上的重要性分析 三维模型3DTile格式轻量化在三维展示效果上扮演着至关重要的角色.随着计算机图形学和虚拟现实技术的不断发展,我们已经可以创建和渲染非常精细 ...

  8. 记录--手写$forceUpdate,vm.$destroy方法

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 vm.$forceUpdate (1)作用 迫使Vue.js实例重新渲染.注意它仅仅影响实例本身以及插入插槽内容的子组件,而不是所有子组件 ...

  9. Advanced .Net Debugging 5:基本调试任务(线程的操作、代码审查、CLR内部的命令、诊断命令和崩溃转储文件)

    一.介绍 这是我的<Advanced .Net Debugging>这个系列的第五篇文章.今天这篇文章的标题虽然叫做"基本调试任务",但是这章的内容还是挺多的.上一篇我 ...

  10. Python爬虫爬取1905电影网视频电影并存储到mysql数据库

    数据获取方式:微信搜索关注[靠谱杨阅读人生]回复[电影].整理不易,资源付费,谢谢支持! 代码: 1 import time 2 import traceback 3 import requests ...