赞
踩
一、什么是迭代器?
迭代器,是确使用户可在容器对象上遍访的对象,使用该接口无需关心对象的内部实现细节。从迭代器的定义我们可以看出,迭代器是帮助我们对某个数据结构进行遍历的对象。
在Javascript中,迭代器也是一个具体的对象,这个对象需要符合迭代器协议(iterator protocol)。
迭代器协议定义了产生一系列值的标准方式,在js中这个标准就是一个特定的next方法;
next方法有如下的要求:
一个无参数函数,返回一个应当拥有以下两个属性的对象:
done (boolean):
如果迭代器可以产生序列中的下一个值,则为false。(这个等价于没有指定done这个属性。)
如果迭代器已将序列迭代完毕,则为true。这种情况下,value是可选的,如果它依旧存在,即为迭代结束之后的默认返回值。
value:
迭代器返回的任何javascript值,done为true时可省略。
例1.创建一个迭代器对象来访问数组
- //数组
- const names =["abd","cba","nba"]
-
-
- //创建一个迭代器对象来访问数组
- let index =0
- const nameiterator ={
- next:function(){
- if(index<names.length){
- return { done : false, value : names[index++]}
- }else {
- return { done: true, value :undefined}
- }
-
- }
- }
-
- console.log(nameiterator.next())
- console.log(nameiterator.next())
- console.log(nameiterator.next())
- console.log(nameiterator.next())
- //{ done: false, value: 'abd' }
- //{ done: false, value: 'cba' }
- //{ done: false, value: 'nba' }
- //{ done: true, value: undefined }
例2.生成迭代器函数
- //生成迭代器函数
- function createArrayIterator(arr){
- let index =0;
- return {
- next:function(){
- if(index<arr.length){
- return { done:false ,value:arr[index++]}
-
- }else{
- return { done:true ,value:undefined}
- }
- }
- }
- }
- const nums =[10,50,60,70]
- const numsIterator =createArrayIterator(nums)
- console.log(numsIterator.next())
- console.log(numsIterator.next())
- console.log(numsIterator.next())
- console.log(numsIterator.next())
- console.log(numsIterator.next())
-
- //{ done: false, value: 10 }
- //{ done: false, value: 50 }
- //{ done: false, value: 60 }
- //{ done: false, value: 70 }
- //{ done: true, value: undefined }
- //创建一个无限的迭代器
- function createArrayIterator(arr){
- let index =0;
- return {
- next:function(){
-
- return {done:false,value:arr[index++]}
-
-
- }
- }
- }
例3.创建一个迭代器对象来访问数组
- //创建一个迭代器对象来访问数组
- const iterableObj={
- names:["鼠","牛","虎","兔"],
- [Symbol.iterator]:function(){
- let index =0
- return { //这里注意用箭头函数,绑定this
- next:()=>{
- if(index<this.names.length){
- return {done:false,value:this.names[index++]}
-
- }else{
- return {done:true,value:undefined}
- }
- }
- }
- }
- }
-
-
- const iterator1 =iterableObj[Symbol.iterator]()
- console.log(iterator1.next())
- console.log(iterator1.next())
- console.log(iterator1.next())
- console.log(iterator1.next())
- console.log(iterator1.next())
-
- //{ done: false, value: '鼠' }
- //{ done: false, value: '牛' }
- //{ done: false, value: '虎' }
- //{ done: false, value: '兔' }
- //{ done: true, value: undefined }
二.可迭代对象
可迭代对象与迭代器是不同的概念;当一个对象实现了iterable protocol协议时,它就是一个可迭代对象。这个对象的要求是必须实现iterator方法,在代码中我们使用Symbol.iterator访问该属性。
三.可迭代对象的应用
1·JavaScript中的语法 for...of、 展开语法(spread syntax)、 yied*、 解构赋值(destructuing_assignment)
- //obj对象不是一个可迭代对象,所以不可以使用of,of需要一个可迭代对象
- const obj ={
- names:"石榴",
- age:18
- }
-
- for (const item of obj){
- console.log(item)
- }
- for (const item of iterableObj){
- console.log(item)
- }
第一段代码会报错,因为obj对象不是一个可迭代对象。for...of需要一个可迭代对象。
第二段代码可以正常执行,iterableObj是一个可迭代对象。
2·创建一些对象时:new Map([Iterable])、new WeakMap([Iterable])、new Set([Iterable])、new WeakSet([Iterable])
3·一些方法的调用:Promise.all([Iterable])、 Promise.race([Iterable])、Array.from([Iterable])
4.原生(内置)可迭代对象 array/map/set/promise/arguments/string/nodelist 里面都有symbol.iterator
5. of ,展开语法[...names],是可迭代对象;{...obj}不是可迭代对象,只是ES9的一个新特性;解构语法也不是可迭代对象,只是只是ES9的一个新特性
- const newObj={...obj}
- console.log(newObj)
- //{ names: '石榴', age: 18 }
-
- const [name1,name2]=names
- console.log(name1) //abd
- console.log(name2) //cba
四.自定义类的可迭代对象
- class Classroom{
- constructor(address,name,students){
- this.address=address,
- this.name=name,
- this.students=students
-
- }
- entry(newstudents){
- this.students.push(newstudents)
-
- }
- [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("工一","503",["金","霞","阿姨"])
- classroom.entry("林狗")
- for(const item of classroom){
- console.log(item)
- if(item==="霞") break
- }
- //金
- //霞
- //迭代器提前终止了~
- const foo =classroom[Symbol.iterator]()
- console.log(foo.next())
- console.log(foo.next())
- console.log(foo.next())
- console.log(foo.next())
- console.log(foo.next())
- console.log(foo.next())
- //{ done: false, value: '金' }
- //{ done: false, value: '霞' }
- //{ done: false, value: '阿姨' }
- //{ done: false, value: '林狗' }
- //{ done: true, value: undefined }
- //{ done: true, value: undefined }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。