javascriptRemke之深入迭代

javascriptRemke之深入迭代

前言："迭代"意为按照顺序反复多次执行一段程序，ECMAscript6中新增了两个高级特性：迭代器与生成器，使用这两个特性能更高效地实现迭代，本文主要围绕迭代器详细展开叙述。

一、何为迭代

　　迭代即重复执行某段程序，最简单的一种迭代即计数循环。

 

for(let i =0;i<10;i++){
    console.log(i);
}

　　迭代会在一个有序集合上进行，数组是JavaScript中最经典的例子，数组每一项可以通过索引获取，所以整个数组都可以通过递增索引来遍历，但是很多时候使用数组进行循环并不理想。原因如下：

• 迭代之前需要事先知道如何使用数据结构。在前后端实际开发中并不能完全适用于所有数据结构，前端通常得根据后端得接口文档进行数据处理，数组的遍历有时并不能满足需求。
• 遍历顺序可能非数据结构固有的。通过递增索引来访问数据是特定于数组类型的方式，并不适用于其他隐式顺序的数据结构。

　　

　　ES5中为实现通用迭代需求，新增了Array.prototype.forEach()方法，但是效果仍不理想。这个方法实现了单独记录索引（传入forEach作为参数的回调函数的第一个参数）并能通过数组对象取得值，但是仍未解决标识迭代何时中止的问题，因此这个方法也只适用于数组，且回调形式较为繁琐。因此，ES6中采用迭代器模式作为解决方案，让开发者无须实现知道如何迭代就能实现迭代操作。

let arr = ['sunwukong','zhubajie','shaheshang'];
arr.forEach((value,index,obj)=>{
     console.log(value)
})
//sunwukong
//zhubajie
//shaheshang

二、迭代器模式

2.1  可迭代对象

　　迭代器模式描述了一个方案，把具有迭代能力的结构称为"可迭代对象"。可迭代对象可以理解为数组或集合（Set）类型的对象。它们拥有以下特性：

• 包含有限个元素
• 具有无歧义的遍历顺序

　　计数循环和数组都具有可迭代对象的行为。

2.2  迭代器

　　迭代器模式中还有一个关键概念"迭代器"，迭代器是按需创建的一次性对象，每个迭代器都会关联一个可迭代对象，且迭代器会暴露可迭代对象的相关API。

　　当使用可以接收可迭代对象的原生语言（for-of、Map、Set...）时，会创建一个迭代器，从而实现迭代。

　　*迭代器模式将可迭代对象与迭代器分离，实现了迭代器无须了解与之关联的可迭代对象的结构，只需要知道如何取得连续的值，这也正式分离可迭代对象与迭代器的强大之处。

2.3  可迭代协议

　　实现可迭代协议要求具备两种能力：

• 支持迭代的自我识别能力
• 创建接口的能力

　　要创建接口，就必须要暴露一个属性作为默认迭代器且这个属性必须要用特殊的Symbol.iterator作为建。默认迭代器属性必须引用一个迭代器工厂函数，通过调用这个工厂函数返回一个新的迭代器，简单来说，只有当对象拥有Symbol.iterator这一属性，这一对象才可以实现迭代。

let str = 'abc';
console.log(str[Symbol.iterator]());// f value(){native code};
let obj = {}；
console.log(obj[Symbol.iterator]())；//报错
console.log(obj.__proto__.hasOwnProperty(Symbol.iterator))； 
 //false
console.log(arr.__proto__.hasOwnProperty(Symbol.iterator))； 
 //true

 

　　能够实现接口功能的内置属性有以下几类：

• 字符串
• 数组
• 映射（Map）
• 集合（Set）
• arguments对象（伪数组）
• NodeList等DOM集合（document.queryselectorAll()、document.getElementsByClassName()...）

　　能够接收可迭代对象的原始语言包括：

• for-of
• 数组循环
• 扩展运算符
• Array.from()
• 创建集合
• 创建映射
• Promise.all()
• Promise.race()
• yield*操作符

　　这些原始语言会在后台调用提供的可迭代对象的这个工厂函数，从而创建一个迭代器。

三、迭代器协议

　　迭代器是一种一次性使用的对象，在使用能够接收可迭代对象的原始语言时会临时创建，用于迭代与其关联的可迭代对象。

　　迭代器API使用next()方法在可迭代对象中遍历数据，每次成功调用next()，都会返回一个IteratorResult对象，这一对象包含迭代器返回的下一个值(value)和状态（done）。若不调用next()方法则无法知道迭代器的当前位置，因此next()是迭代器中必须存在的方法，不然仍然无法成为迭代器。

　　next()返回对象包含两个属性：done和value，done是一个布尔值，表示next()是否还可以再次调用并取得下一个有效值，为false表示状态仍未耗尽，还可以获取下一有效值，为true时则下次迭代返回的value为undefined。value包含可迭代对象的下一个值。

//可迭代对象
let arr = ['Billy','Jack'];
//迭代器工厂函数
console.log(arr[Symbol.iterator]); //f values(){native code};
//创建一个迭代器实例
let iterator = arr[Symbol.iterator()]();
console.log(iterator) //ArrayIterator();
//执行迭代
console.log(iterator.next()); //{done:false,value:'Billy'};
console.log(iterator.next()); //{done:false,value:'Jack'};
console.log(iterator.next()); //{done:true,value:undefined};

 

 

　　注意：

• 　　不同迭代器实例相互之间没有关系，只会独立遍历可迭代对象。
• 　　迭代器并不与可迭代对象某个时刻的快照绑定。即中途插入新元素，使用next()进行迭代会展现新元素。

四、自定义迭代器

 　　任何使用Iterator接口的对象都可以作为迭代器使用。

　　下方通过实现Iterator接口完成自定义迭代器。

　

class IteratorTest{
    constructor(limit){
        this.limit = limit;
        this.present = 1;
    }
    [Symbol.iterator](){
        return this;
    }        
    next(){
        if(this.present<this.limit){
            return{
                done:false,value:this.present++                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
            }
        }
        else{
            return{
                done:true,value:undefined
            }
        }
    }
}
const iterator = new IteratorTest(5)
for (let item of iterator) {
    console.log(item)
}
//1
//2
//3
//4

 

 

　　上方例子在for-of的作用下调用Symbol.iterator属性返回自身实例（创建迭代器），接着调用实例原型上的next()方法实现迭代。

　　但是上方例子存在的缺陷为每个实例之恩被迭代一次。若多次遍历不打印结果。

　　为了能让可迭代对象能够实现正常迭代需求，因此每创建一个迭代器就对应一个新迭代器，采用的解决方案为将计数变量放在闭包里，然后通过闭包返回迭代器。

class IteratorTest{
    constructor(limit){
        this.limit = limit;
    }
    [Symbol.iterator](){
        let start = 1;
        let present = start;
        let limit = this.limit;
        return{
            next(){
                if(present<limit){
                    return{
                        done:false,value:present++                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                    }
                }
                else{
                    return{
                        done:true,value:undefined
                    }
                }
            }
        }
    }        
}
const iterator = new IteratorTest(5)
for (let item of iterator) {
    console.log(item)
}
for (let item of iterator) {
    console.log(item)
}
//1
//2
//3
//4
//1
//2
//3
//4

　　上面例子因为每个迭代器都实现了Iterator接口且都有next()方法，所以在任何期待可迭代对象的地方都可以循环。

 

五、提前中止迭代器

　　为提前中止迭代器，需要return()方法返回一个用于提前中止迭代的有效对象（IteratorResult），这个对象可以只返回{done:true}

　　return()方法用于指定迭代器在提前关闭时执行的逻辑。提前关闭迭代器的可能情况为：

• 　　for-of循环通过break、continue、return或throw提前退出。
• 　　解构操作并未消费所有值。

　

class IteratorTest{
    constructor(limit){
        this.limit = limit;
    }
    [Symbol.iterator](){
        let start = 1;
        let present = start;
        let limit = this.limit;
        return{
            next(){
                if(present<limit){
                    return{
                        done:false,value:present++                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                    }
                }
                else{
                    return{
                        done:true,value:undefined
                    }
                }
            },
            return(){
                console.log('exit');
                return {done:true};
            }
        }
    }        
}
const iterator = new IteratorTest(5)
for (let item of iterator) {
    if(item>2){
        break;
    }
    console.log(item);
}
//1
//2
//exit

 

　　注意：如果迭代器没有关闭，则还可以继续从上次离开的地方继续迭代。

let arr = [1,2,3,4,5];
const iterator2 = arr[Symbol.iterator]();
for(let i of iterator2){
    console.log(i);
    if(i>2){
        break
    }
}
//1
//2
//3
for(let i of iterator2){
    console.log(i);
}
//4
//5