1、什么是迭代器?
--------------------------------------什么是迭代器?
迭代器(iterator),是确使用户可在容器对象(container,例如链表或数组)上遍访的对象,使用该接口无需关心对象的内部实现细节。
其行为像数据库中的光标,迭代器最早出现在1974年设计的CLU编程语言中;
在各种编程语言的实现中,迭代器的实现方式各不相同,但是基本都有迭代器,比如Java、Python等;
2、迭代器的作用?
--------------------------------------迭代器的作用?
迭代器就是去迭代一个容器中的数据的。
从迭代器的定义我们可以看出来,迭代器是帮助我们对某个数据结构(容器)进行遍历的对象。本质也是一个对象。
3、next方法
在JavaScript中,迭代器也是一个具体的对象,这个对象需要符合迭代器协议(iterator protocol): 迭代器协议定义了产生一系列值(无论是有限还是无限个)的标准方式;==> 那么在js中这个标准就是一个特定的next方法
next方法有如下的要求:一个无参数或者一个参数的函数,返回一个应当拥有以下两个属性的对象:
① done(boolean)
=> 如果迭代器可以产生序列中的下一个值,则为 false。(这等价于没有指定 done 这个属性。)
=> 如果迭代器已将序列迭代完毕,则为 true。这种情况下,value 是可选的,如果它依然存在,即为迭代结束之后的默认返回值。
② value
=> 迭代器返回的任何 JavaScript 值。done 为 true 时可省略
4、迭代器的基本语法(定义一个迭代器)
let iterator = {
next:function () {
return {
value:123,done:true
}
}
5、使用迭代器迭代一个简单的数组
let names = ["Jack","Panda","LiHua"];
// 创建一个索引
let index = 0;
// 迭代names数组
let namesIterator = {
next:function () {
if(index < names.length){
return { value:names[index++],done:false }
}else{
return { value:undefined,done:true }
}
}
}
/* -------------------------------- */
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())
console.log(namesIterator.next())
输出结果:
{ value: 'Jack', done: false }
{ value: 'Panda', done: false }
{ value: 'LiHua', done: false }
{ value: undefined, done: true }
但是上面的代码整体来说看起来是有点奇怪的:
① 我们获取一个数组的时候,需要自己创建一个index变量,再创建一个所谓的迭代器对象;
② 事实上我们可以对上面的代码进行进一步的封装,让其变成一个可迭代对象;
6、什么是可迭代对象?
它和迭代器是不同的概念;
当一个对象实现了iterable protocol协议时,它就是一个可迭代对象;
这个对象的要求是必须实现@@iterator 方法,在代码中我们使用 Symbol.iterator 访问该属性;
// 创建一个可迭代器对象---需要遵循可迭代对象协议
let iterableObj = {
names:["z3","l4","w5"],
[Symbol.iterator]:function () {
let index = 0;
return {
next:()=>{
if(index < this.names.length){
return { value:this.names[index++],done:false }
}else{
return { value: undefined,done: true }
}
}
}
}
}
// iterableObj就是一个可迭代对象 iterator是迭代器
let iterator = iterableObj[Symbol.iterator]();
console.log(iterator.next()) //一遍遍输出进行迭代
当我们要问一个问题,我们转成这样的一个东西有什么好处呢?
==> 当一个对象变成一个可迭代对象的时候,进行某些迭代操作,比如 for...of 操作时,其实就会调用它的@@iterator方法;
// 只要是可迭代对象,在JS中,可以使用for of遍历
for(let item of iterableObj){
console.log(item)
}
/* 使用for of遍历输出结果:
z3
l4
w5 */
7、原生的可迭代对象
事实上我们平时创建的很多原生对象已经实现了可迭代协议,会生成一个迭代器对象的:
String、Array、Map、Set、arguments对象、NodeList集合
例如可迭代对象数组:
let names = ["xq","wc","z3"];
let iterator = names[Symbol.iterator]();
for (const item of names){
console.log(item)
}
//当然iterator也可使用next()进行逐次调用。
/*
输出结果:
xq
wc
z3
*/
8、可迭代对象的应用场景
① for of遍历数据
① 展开运算符
数组是原生的可迭代对象:
// 展开运算符,内部会自动迭代,把迭代出来的数据放到数组。
let names = ['Kang','Wang','Li']
let data = [11,22,33];
let newArr = [...data,...names]
console.log(newArr)
// 输出结果:[ 11, 22, 33, 'Kang', 'Wang', 'Li' ]
对象不是可迭代对象=>使用的是es9语法,而非迭代器。
③ 解构赋值
// 解构赋值使用的也是迭代器原理
let names = ['Kang','Wang','Li']
let [n1,n2,n3] = names
console.log(n1,n2,n3);
// 输出结果:Kang Wang Li
同样对象的解构赋值=>使用的也是es9语法,而非迭代器。
9、自定义类的可迭代性
在前面我们看到Array、Set、String、Map等类创建出来的对象都是可迭代对象:
在面向对象开发中,我们可以通过class定义一个自己的类,这个类可以创建很多的对象:
如果我们也希望自己的类创建出来的对象默认是可迭代的,那么在设计类的时候我们就可以添加上@@iterator 方法;
案例:创建一个classroom的类
教室中有自己的位置、名称、当前教室的学生;
这个教室可以进来新学生(push);
创建的教室对象是可迭代对象
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 { value:this.students[index++], done:false}
}else{
return { value:undefined,done:true }
}
}
}
}
}
// 现在的cr就是可迭代对象
let cr = new ClassRoom("2号楼6楼","计科一班",["Kang","Li"]);
cr.entry("Wang")
for(let item of cr){
console.log(item)
}
/*
运行结果:
Kang
Li
Wang
*/
10、迭代器的中断
迭代器在某些情况下会在没有完全迭代的情况下中断:
比如遍历的过程中通过break、continue、return、throw中断了循环操作;
比如在解构的时候,没有解构所有的值;
那么这个时候我们想要监听中断的话,可以添加return方法
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 { value:this.students[index++], done:false}
}else{
return { value:undefined,done:true }
}
},
return(){
console.log("迭代器提前终止了...");
return { done:true }
}
}
}
}
let cr = new ClassRoom("2号楼6楼","计科一班",["Liu","Guo"]);
cr.entry("Zhang")
for(let item of cr){
console.log(item)
if(item == "Guo"){
break;
}
}
/*
运行结果:
Liu
Guo
迭代器提前终止了...
*/