认识迭代器

一、什么是迭代器？

迭代器，是确使用户可在容器对象上遍访的对象，使用该接口无需关心对象的内部实现细节。从迭代器的定义我们可以看出，迭代器是帮助我们对某个数据结构进行遍历的对象。

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