theme: juejin
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情
每天3分钟，重学ES6-ES12文章汇总
前言
今天开始和大家一起系统的学习ES6 ,每天3分钟，用一把斗地主的时间，重学ES6 ，前面我们介绍了Promsis的提出背景和用法，以及相关api， 下面我们再来学习一下Iterator-Generator。
什么是迭代器 Iterator
- 迭代器(iterator)，是确使用户可在容器对象(container，例如链表或数组)上遍访的对象，使用该接口无需关心对象的内部实现细节。
- 其行为像数据库中的光标，迭代器最早出现在1974年设计的CLU编程语言中;
- 在各种编程语言的实现中，迭代器的实现方式各不相同，但是基本都有迭代器，比如Java、Python等;
- 从迭代器的定义我们可以看出来，迭代器是帮助我们对某个数据结构进行遍历的对象。
- 在JavaScript中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议(iterator protocol):
- 迭代器协议定义了产生一系列值(无论是有限还是无限个)的标准方式;
- 那么在js中这个标准就是一个特定的next方法;
- next方法有如下的要求:
- 一个无参数或者一个参数的函数，返回一个应当拥有以下两个属性的对象:
- done(boolean)
- 如果迭代器可以产生序列中的下一个值，则为 false。(这等价于没有指定 done 这个属性。)
- 如果迭代器已将序列迭代完毕，则为 true。这种情况下，value 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。
- value
- 迭代器返回的任何 JavaScript 值。done 为 true 时可省略
一句话总结
帮助我们对某个数据结构进行遍历的对象
什么是可迭代对象
- 可迭代对象 是一个对象，符合迭代器协议，是必须实现 @@iterator 方法，代码中我们使用Symbol.iterator访问该属性
- 当一个对象变成一个可迭代对象的时候，进行某些迭代操作，比如 for...of 操作
- for of 可以遍历一个可迭代对象 for of 是一个语法糖，获取的是迭代器的next
代码演示
- 下面的代码中 创建一个迭代器对象来访问数组names
- iterableObj对象就是一个可迭代对象
// 创建一个迭代器对象来访问数组
const iterableObj = {
names: ['1','2','3'], //[]可计算属性
[Symbol.iterator]:function (){
let index = 0
return {
next: ()=>{
if(index<this.names.length){
return {
done:false,
value:this.names[index ]
}
}else{
return {
done:true,
value:undefined
}
}
}
}
}
}
//iterableObj[Symbol.iterator] 就是一个可迭代对象
console.log(iterableObj[Symbol.iterator])
//调用iterableObj[Symbol.iterator]函数
const iterator = iterableObj[Symbol.iterator]()
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
// {done: false, value: '1'}
// {done: false, value: '2'}
// {done: false, value: '3'}
// {done: true, value: undefined}
for (const item of iterableObj) {
console.log(item)
}
// 1 2 3
// for of 可以遍历一个可迭代对象
// for of 就是一个与语法糖，获取的是迭代器的next原生可迭代器对象
- 事实上我们平时创建的很多原生对象已经实现了可迭代协议，会生成一个迭代器对象的:
- String、Array、Map、Set、arguments对象、NodeList集合;
- for of 方法直接遍历
- 都有[Symbol.iterator]属性
可迭代对象的应用
- for of 扩展操作符 数组的解构
- 创建一些其他对象new Map([Iterable])、new WeakMap([iterable])、new Set([iterable])、new WeakSet([iterable]);
- Promise.all(iterableObj) 接受一个可迭代对象
自定义类的迭代
创建一个classroom的类
- 教室中有自己的位置、名称、当前教室的学生;
- 这个教室可以进来新学生(push);
- 创建的教室对象是可迭代对象;
代码演示
代码语言：javascript复制// 案例: 创建一个教室类, 创建出来的对象都是可迭代对象
class Classroom {
constructor(address, name, students) {
this.address = address
this.name = name
this.students = students
}
entry(newStudent) {
this.students.push(newStudent)
}
[Symbol.iterator]() {
let index = 0
return {
next: () => {
if (index < this.students.length) {
return { done: false, value: this.students[index ] }
} else {
return { done: true, value: undefined }
}
},
return: () => {
console.log("迭代器提前终止了~")
return { done: true, value: undefined }
}
}
}
}
const classroom = new Classroom("3幢5楼205", "计算机教室", ["james", "kobe", "curry", "why"])
classroom.entry("lilei")
for (const stu of classroom) {
console.log(stu)
if (stu === "why") break
}
// kobe
// curry
// why
// 迭代器提前终止了~迭代器的中断
- 迭代器在某些情况下会在没有完全迭代的情况下中断:
- 比如遍历的过程中通过break、continue、return、throw中断了循环操作;
- 比如在解构的时候，没有解构所有的值;
- 那么这个时候我们想要监听中断的话，可以添加return方法
总结
今天介绍了迭代器 可迭代对象 明天继续介绍生成器，生成器函数
