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接口的例子。

let obj = {
data: [ 'hello', 'world' ],
[Symbol.iterator]() {
const self = this;
let index = 0;
return {
next() {
if (index < self.data.length) {
return {
value: self.data[index++],
done: false
};
} else {
return { value: undefined, done: true };
}
}
};
}
};

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

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'
}

注意,普通对象部署数组的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学习笔记(持续更新)

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

  2. ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  3. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  4. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  5. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  6. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  7. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

  8. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

  9. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

  10. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

随机推荐

  1. virtualbox硬盘扩容

    https://blog.csdn.net/ouyang_peng/article/details/53261599 1. cmd界面进入virtualbox安装目录:cd C:\Program Fi ...

  2. python 多版本管理pyenv和virtualenv虚拟开发环境

    pyenv是管理多个python版本的工具. 1.pyenv的安装 git clone https://github.com/yyuu/pyenv.git ~/.pyenv 2.将PYENV_ROOT ...

  3. 让PETSc跑得再快一些

    最近做了一个使用PETSc来求解线性方程组(Ax=b)的项目,把其中遇到的一些坑和解决方法记录下来.本文不介绍PETSc如何入门,而是给出一些能让PETSc运行得更快的编程细节.开始我只是简单地修改P ...

  4. TakePhoto实现拍照得到图片和从相册得到图片

    在学郭霖大神的第一行代码的时候,学到利用相机拍照和从本地相册取照片的那一小节的时候,代码写出来但是出了很多问题,APP老是崩溃,一番百度最终还是没有找到解决办法 无奈只能用别人现成的轮子了,然后就发现 ...

  5. WebForm - cookie赋值乱码问题

    cookie的值为中文时候,取cookie的值会出现乱码 解决办法:存取cookie时候先解码和编码 存cookie,进行编码: cookie.Value = HttpUtility.UrlEncod ...

  6. Web API 2 对于 Content-Length 要求严格

    最近在做一个工具,里面有一个发起http请求的操作,虽然工具不是用.NET写的,但是测试用服务器软件是.NET写的.在这里选择了ASP.NET MVC和Web API 2. 首先预定义Student与 ...

  7. Google Chrome Native Messaging开发实录(一)背景介绍

    最近接手了一个针对Google Chrome的需求,最终是使用Native Messaging来实现的.通过这个连载,将把本次开发从方案选定到编码的全部过程进行完整的回顾,并记录开发过程中踩过的各种坑 ...

  8. Apache本地配置虚拟域名

    转载+修改 例:虚拟域名为 aaa.com 端口为默认80 index.html所在目录  D:/wamp/www/web 不用解析域名,使用虚假的域名也可以 apache安装完默认是不开启虚拟服务器 ...

  9. redis开机自动服务脚本

    1.设置redis.conf中daemonize为yes,确保守护进程开启. 2.编写开机自启动脚本 基本原理为: 系统开机启动时会去加载/etc/init.d/下面的脚本,通常而言每个脚本文件会自定 ...

  10. *2 FastCGI sent in stderr: "PHP message: PHP Parse error: syntax error, unexpected '[' in /application/nginx-1.6.3/html/zabbix/index.php on line 32" while reading response header from upstream, clien

    今天呢想学习一下zabbix监控一下我的服务情况,然后就开始安装我的zabbix服务,首先LNMP环境准备好了,Nginx版本为1.6.3,php版本为5.3.27,MySQL版本为二进制包安装的5. ...