ES6-24【生成器与迭代器的应用】

一.迭代器

(1).es5方式手写迭代器

var arr = [1,2]
function generator(arr){
    var i = 0;
    return{
        next(){
           var done = i > arr.length ? true : false,
               value = done ? 'undefined' : arr[i++];
            return {
                value : value,
                done : done
            }  
        }
    }
}
var gen = generator(arr);
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

二.生成器

(1).按序执行方法

var fn = [
    function test1(){
        console.log(1);
        return true
    },
    function test2(){
        console.log(2);
        return false
    },
    function test3(){
        console.log(3);
        return true
    }
]
for(var i of fn){
    if(!i()){
        break
    }
}

(2).中间件原理

中间件集合:[test1,test2,test3]

将传入的值分别通过test1 ,test2, test3方法，如有一条执行不下去就立马结束

 这就是node的express中间件，洋葱模型

(3).通过生成器写中间件

;(function(functions){
    function * doFun(arr){
        for(var i = 0; i < arr.length; i++){
            yield arr[i];
        }
    }
    var iterator = doFun(functions);
    var init=()=>{
       nextDo(iterator.next())
    }
    function nextDo(fn){
        fn.value(function(){
            var fn = iterator.next();
            if(!fn.done){
                nextDo(fn)
            }else{
                return
            }
        })
        
    }
    init()
    
})
(
    [
        function test1(next){
            console.log(1);
            next()  
        },
        function test2(next){
            console.log(2);
            next()  
        },
        function test3(next){
            console.log(3);
            next()  
        }
    ]
)

模块化方式

index.js
 import M from '/shit.js' ;
M([test1,test2,test3])
function test1(next){
    console.log(1);
    next()  
}
function test2(next){
    console.log(2);
    next()  
}
function test3(next){
    console.log(3);
    next()  
}

shit.js
export default function(functions){
    function * doFun(arr){
        for(var i = 0; i < arr.length; i++){
            yield arr[i];
        }
    }
    var iterator = doFun(functions);
    var init=()=>{
       nextDo(iterator.next())
    }
    function nextDo(fn){
        fn.value(function(){
            var fn = iterator.next();
            if(!fn.done){
                nextDo(fn)
            }else{
                return
            }
        })
        
    }
    init()
}

index.html
<script type="module" src="index.js"></script>

这就是中间件的实现

迭代器常用于底层代码和日志的产生，其原理就是把push完的数组利用next特性 可以直接将本次迭代对象传入到操作函数中