初入ES6-Generator和Iterator

waltr 發(fā)布于2019-08-21 16:52 / 1400人閱讀

摘要：根據百度百科的說法迭代器模式，又叫做游標模式。給出的定義為提供一種方法訪問一個容器對象中各個元素，而又不需暴露該對象的內部細節(jié)。從定義可見，迭代器模式是為容器而生。很明顯，對容器對象的訪問必然涉及到遍歷算法。這兩種情況好像都能夠解決問題。

Iterator
根據百度百科的說法:

迭代器（Iterator）模式，又叫做游標（Cursor）模式。GOF給出的定義為：提供一種方法訪問一個容器（container）對象中各個元素，而又不需暴露該對象的內部細節(jié)。從定義可見，迭代器模式是為容器而生。很明顯，對容器對象的訪問必然涉及到遍歷算法。你可以一股腦的將遍歷方法塞到容器對象中去；或者根本不去提供什么遍歷算法，讓使用容器的人自己去實現去吧。這兩種情況好像都能夠解決問題。

類似之前的鏈表結構，每個對象不僅包含自身的值，也包含下一個變量的指針；

function Chan(value){
    this.value = value;
    this.next = null;
};
var newObj = new Chan();        //對象都有兩個屬性

創(chuàng)建迭代器

function creatIterator(items){
    var i = 0;
    var next = function(){
        var done =( i>=items.length);            //判斷itmes的數量是否是最后一個，如果是done = true;那么value = undefined;
        var value = !done?items[i++]:undefined;            //
        return {
            value : value,
            done : done
        };
    }
    return {next : next};
};
var iterator = new creatIterator([3,3,2,6,7]);
iterator.next()  ->{value : 3,done:false;}
iterator.next()  ->{value : 3,done:false;}
iterator.next()  ->{value : 2,done:false;}
iterator.next()  ->{value : 6,done:false;}
iterator.next()  ->{value : 7,done:false;}
iterator.next()  ->{value :undefined,done:true;}        //后面執(zhí)行的都是一樣
//或者省略最后一步；
function creatIterator(items){
    var i = 0;
    return {
        next : function(){
            return i
所以可以這樣理解，Iterator就是一個特殊的對象，這個對象可以訪問一個容器對象（包含很多無序的變量屬性等），每次調用next就返回一個對象，直到最后一個，有些方法調用是自動連續(xù)的調用，見生成器函數只要有這個接口就可以將返回的對象用擴展運算符...轉換為數組并且可以使用數組的方法
有三種數據結構具有原生的Iterator接口,可以直接用for..of 遍歷，這三種數結構內置了三個迭代器
entries()返回數組,keys(),values();針對不同的數據結構，都有默認的迭代器，注意不同的瀏覽器支持的成都不一樣；
1,Array

2,Map    

3,Set

一些類數組的對象（有數字屬性，和length的屬性）也具有Iterator 的接口。比如字符串對象

Iterator應用場合
1，解構賦值
var  arr = [1,2,3,4,5];
var arr1 = [...arr];
console.dir(arr1)    //[1, 2, 3, 4, 5]

2,擴展運算符，同上；
3，特殊場合
//for...of;如果數組有非數字鍵名的話不可遍歷，arr.name = "obama"
var  arr = [1,2,3,4,"a","b"];
var obj = {name : "obama",1 : 2}
for( pro in arr){console.log(pro)}    //0,,,,5只是得到鍵名；
for( pro in obj){console.log(pro)}  //得到所有的屬性名
for( pro of o arr){console.log(pro)}  //輸出所有的屬性
for( pro of obj){console.log(pro)}      //報錯，對象不可遍歷
//Array...from;
//Map(),Set()參數對象
//Promise.all(),race()

Generator生成器函數；
有三個屬性next,throw,return ;
function *fnName(){    //函數名字前必須有星號；

    yield "first";    //每次執(zhí)行后都從下一個yield關鍵字開始，直到最后的return;
    yield "second";    //yield 只能用在生成器函數內部，其他 的會報錯
    return "all done";
}
var ob = fnName()        //和普通函數一樣的調用
ob.next()    //
ob.next()    //
ob.next()    //每次調用都返回一個對象
//每個生成器函數都有Iterator方法并且返回自身
ob[Symbol.iteraro]() === ob;



//1,next()的方法；
//yied和return 一樣沒有返回值，或者是undefined;
function *fn(){
    var num  = yield 4;
    console.log(num);
    
}
var s = fn();
s.next();    //{value: 4, done: false}
s.next()    //undefined;{value: undefined, done: true};
//next()的參數，可以明確的設定上一次yield的返回值(如果已經是最后的話，就沒有作用)
s.next(23);    //value : 23,

//生成器函數的遍歷for of ... 解構賦值，Array.from都會自動遍歷，不需要調用next方法
function *test(){
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    return 5;
}
var te = test();
for( v of te){console.log(v)}    //1,2,3,4
te.next();//{value: undefined, done: true}已經循環(huán)完畢
//2,throw方法
//3,return 方法    //直接終止遍歷
function *test(){
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    return 5;
};
var s = test();
s.next();//value:1,done:false;
s.turn ();value:undefined,done:ture;    //
s.next();//value:1,done:false;
 //yield*語句
function *boo(){
    yield 1;
    yield 2;
}  ;
function *bar(){
    yield 3;
    yield boo();
} 
var s = bar();
s.next();//{value: 3, done: false}
s.next();//{value: boo, done: false}沒有執(zhí)行
//使用yield *boo();表明返回的是一個遍歷器對象，可以是數組等其他對象

//{value: 1, done: false}

云服務器 GPU云服務器小白初入 Iterator Iterator模式智和網絡智和網絡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88835.html

ES6-Generator與react狀態(tài)機（13）

摘要：同理，你只要知道改變狀態(tài)能夠實現要的功能，大體上的原理就是狀態(tài)機就可以了。總結，本文重點狀態(tài)機模式的使用場景，復雜多狀態(tài)的管理，這里注意你沒必要寫個選項卡之類的用狀態(tài)機，那反而是給自己找麻煩。大家在寫App和一些單頁面程序的時候，經常會遇到這樣的情況：showImg(https://segmentfault.com/img/bVbsNaA?w=240&h=427);當點擊左邊的箭頭的...

alphahans 2019-08-26 13:49 評論0 收藏0
初入ES6-Array

摘要：用于將對象轉為數組可遍歷和類數組對象部署屬性的對象和擴展運算符的區(qū)別是任何具有屬性的都可以使用的方法是用原型該方法還有一個參數類似的新方法將字符串轉化為數組，特別是大于的單個字符，避免分割成多個用來彌補構造函數的歧義三個空值只有一個參數其實 1,Array.from用于將對象轉為數組（可遍歷和類數組對象部署Iterator 屬性的對象）和擴展運算符的區(qū)別是任何具有Length屬性的都可...

馬永翠 2019-08-21 16:53 評論0 收藏0
初入ES6-解構

摘要：允許按照一定的模式，從數組或者對象中取值，對變量進行賦值數組解構的對象要具有接口也就是可以遍歷按照對應的關系進行取值如果解構不成功變量的值就是如果右側的數值不是數組，就會報錯注意字符串是可以遍歷的也可以有默認值只要被賦值的變量不是嚴格就是默 ES6允許按照一定的模式，從數組或者對象中取值，對變量進行賦值數組 var a = 2; var b = [1,2]; var c = this...

FullStackDeveloper 2019-08-21 16:56 評論0 收藏0
初入ES6-let和const以及代碼塊

摘要：變量和常量的聲明一般的聲明，不在函數內就是全局變量，值可以是基本和引用值，可以隨時修改和刪除語法同一個作用域的聲明，只要有同樣的聲明都會報錯，只能修改值語法，和一樣，但是不能更改值以上兩個語法都不存在變量提升的效果直接使用的話，直接引用錯誤變量和常量的聲明 var a = 34; //一般的聲明，不在函數內就是全局變量，值可以是基本和引用值，可以隨時修改和刪除 ...

wwolf 2019-08-21 17:00 評論0 收藏0
HTML & CSS之小白初入江湖

摘要：之小白初入江湖超文本標記語言簡稱是一種用于創(chuàng)建網頁的標準標記語言。描述了一個網站的結構語義隨著線索的呈現，使之成為一種標記語言而非編程語言。是塊級元素，是行內元素。層疊樣式表簡稱是一種用來為結構化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標記語言(HyperText Markup Language, 簡稱HTML)是一種用于創(chuàng)建網頁的標準標記語言...

fai1017 2019-08-29 12:50 評論0 收藏0