js es6 Iterator
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方法是否部署是可选的。
相关文章
- es6 模板字符串_模板字符串如何实现
- ES6 模板字符串基本用法[通俗易懂]
- ES6 数组新增方法
- es6数组方法find()、findIndex()与filter()的总结
- 简单编译es6
- 每天3分钟,重学ES6-ES12(十八) CJS
- 每天3分钟,重学ES6-ES12(十五)异步代码处理方案
- JS跳转代码_js中跳转页面路径
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码[通俗易懂]
- Vue项目中的mock.js的使用以及基本用法和ES6的新增方法
- ES6-异步遍历器(二)
- Js生成二维码_js在线生成二维码
- Vue.js – 引入外部 JS 文件
- Es6新特性——箭头函数
- 一文快速上手ES6
- JS设置定时器_js设置定时器
- ES6 箭头函数 Arrow Function
- 【JS 逆向百例】猿人学系列 web 比赛第五题:js 混淆 - 乱码增强,详细剖析
- 【JS 逆向百例】猿人学系列 web 比赛第二题:js 混淆 - 动态 cookie,详细剖析
- Es6学习笔记,持续记录
- Uncaught SyntaxError: Cannot use import statement outside a module的解决方法(使用Es6语法引入js对象文件报错)
- module_ES6笔记13
- 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑(html2md.js 或 html2markdown.js)
- get两个js小技能——JS截取视频第一帧&图片转Base64
- 如何使用jscythe并通过Node.js的Inspector机制执行任意JS代码
- 使用JS实现Redis数据读取(js读取redis)
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- 数据JS技术实现实时获取Oracle数据(js实时获取oracle)
- 使用Oracle和JS开发新一代应用仿真世界(oracle js)
- JS函数验证总结(方便js客户端输入验证)
- CSS和JS标签style属性对照表(方便js开发的朋友)