generator 與 Iterable

es6 中的很多新的特效都能與generator （生成器函數(shù)）有關(guān)，實(shí)際用處比較廣泛，如異步模塊，數(shù)組遍歷等等

Generator的用法

function*  f1() {
    console.log("f1 start")
    yield 1;
    yield 2;
}

var result = f1();
console.log(result);            // Object [Generator] {}
console.log(result.next());    //  "f1 start"  { value: 1, done: false }
console.log(result.next());   // { value: 2, done: false }
console.log(result.next());  // { value: undefined, done: true }

Generator函數(shù)和普通的函數(shù)區(qū)別有兩個(gè):

• function和函數(shù)名之間有一個(gè)*號(hào)
• 函數(shù)體內(nèi)部使用了yield表達(dá)式；

通過上面的log可以發(fā)現(xiàn)，f1 返回的是一個(gè)Iterator實(shí)例,執(zhí)行next()方法，此時(shí)這個(gè)函數(shù)才開始執(zhí)行,并把yield后面的值包裝成固定對(duì)象并返回
如{value:2,done:false},直到運(yùn)行到函數(shù)結(jié)尾， 最后再返回undefined

yield 與 return

function*  f1() {
    yield 1;
    return 3;
    yield 2;
}

var result = f1();
console.log(result);            // Object [Generator] {}
console.log(result.next());    // { value: 1, done: false }
console.log(result.next());   // { value: 3, done: false }
console.log(result.next());  // { value: undefined, done: true }

yield和return一起使用的話， 那么return的值也會(huì)作為最后的返回值，如果return語句后面還有yield， 那么這些yield不生效

next方法

function* f1(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y+ 3);
  return (x + y + z);
}
var a = f1(5);
console.log(a.next())   // { value: 6, done: false }
console.log(a.next()) // { value:NaN, done:false }
console.log(a.next()) // { value:NaN, done:true }

var b = f1(5);
console.log(b.next())   // { value: 6, done: false }
console.log(b.next(12)) // { value:27, done:false }
console.log(b.next(13)) // { value:42, done:true }

next方法傳參數(shù)，這個(gè)參數(shù)將會(huì)作為上一次yield語句的返回值

• var b = f1 (5); 此時(shí)傳入一個(gè)參數(shù)5，即x = 5；
• b.next() ;返回第一個(gè)yield 后面的值 即 x+1 = 6
• b.next(12); 將這個(gè)參數(shù)作為上一次yield的返回值，即此時(shí) y = 2 * 12 = 24，返回 y+3 = 27
• b.next(13);同理 z = 13 ，返回 5+24+13 = 42

return 方法

function*  f1() {
    yield 1;
    return 3;
    yield 2;
}
var g = f1();
console.log(g.return()); //{ value: undefined, done: true }
console.log(g.return(100)); //{ value: 100, done: true }

Iterator的return()方法， 會(huì)被強(qiáng)制迭代完畢， 執(zhí)行return()方法的參數(shù)就是這個(gè)Iterator的返回值，此時(shí)done的狀態(tài)也為true

generator 中的 this

function *g() {
  this.a=1
}
let obj=g()
console.log(obj.a)   //undefined
let obj2=new g()   //TypeError: g is not a constructor

generator函數(shù)b不是普通構(gòu)造函數(shù)， 無法繼承this; 無法new

如何讓generator返回一個(gè)正常的對(duì)象實(shí)例

function *F() {
  this.a=1
  yield this.b=2
  yield  this.c=3
}
var obj={}
var f=F.apply(obj)
console.log(f.next()) //{ value: 2, done: false }
console.log(f.a) //undefined
console.log(obj.a) //1 此時(shí)的this指向是 obj 并不是我們想要的f ，迭代器是f，生成了obj實(shí)例

generator函數(shù)的 prototype原型對(duì)象指的是除了yield以外的語句，所以我們可以將Generator內(nèi)部的this指向他的原型的，

function *F() {
  this.a=1
  yield this.b=2
  yield  this.c=3
}
var f=F.call(F.prototype)
console.log(f.next()) //{ value: 2, done: false }
console.log(f.a) //1


//這樣generator不僅繼承了 Iterator的原型，也繼承了Funcion的原型

function *f1() {
    this.a=1
    yield this.b=2
    yield  this.c=3
}
function F() {
    return f1.call(f1.prototype)
}
var f=new F()

iterable 類型

iterable是ES6標(biāo)準(zhǔn)引入的新的類型。而String、Array、Map和Set都實(shí)現(xiàn)了Symbol.iterator
只要實(shí)現(xiàn)了Symbol.iterator就都可以通過for ... of循環(huán)來遍歷

var str = "112222";
var array = "112222";
var set = new Set(['A', 'B', 'C']);
var map = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);

for (var x of str) { // 遍歷String
  console.log(x);
}
 for (var x of array) { // 遍歷Array
   console.log(x);
 }
for (var x of set) { // 遍歷Set
  console.log(x);
}
for (var x of map) { // 遍歷Map
  console.log(x[0] + '=' + x[1]);
}

var str = "12",arr = [1,2],num = 2;

console.log(str[Symbol.iterator]);//[Symbol.iterator]()
console.log(arr[Symbol.iterator]);//[Symbol.iterator]()
console.log(num[Symbol.iterator]);//undefined

object是不支持 Symbol.iterator,我們只需要跟object實(shí)現(xiàn)一個(gè)Symbol.iterator 接口，就可以很輕松用for of 對(duì)其進(jìn)行遍歷

... 與for of

由于generator 返回是一個(gè)迭代實(shí)例，所以我們可以進(jìn)行for of 遍歷

function* f1() {
    yield 0;
    yield 1;
    return 2;
    yield 3;
};
let g = f1();
console.log(...g) ; //0,1
console.log([...g]); //[ 0, 1 ]
for(let foo of g) {
    console.log( foo ); //0, 1
}

Iterator的return的值不會(huì)被for...of循環(huán)到,通過上面可以看出 擴(kuò)展符 ...也是可以遍歷 iterator事例，return的值也不會(huì)被遍歷
所以es6 中的 擴(kuò)展符（...）也是一個(gè) 可以遍歷實(shí)現(xiàn)了 Iterator 接口的對(duì)象，可以很輕松的把對(duì)象變成一個(gè)數(shù)組

let map = new Map([  
                [1, 'one'],  
                [2, 'two'],  
                [3, 'three'],  
                ]);  
let arr = [...map.keys()]; // [1, 2, 3]

var obj = {a: 1, b: 2};  
let arr = [...obj]; // TypeError: Cannot spread non-iterable object 

為Object添加迭代器

• 實(shí)現(xiàn) Iterator接口，返回iterator事例{value:1,done:false}，提供一個(gè)next方法

function it(){
  let keys = Object.keys(this)
  let obj = this
  let idx = 0
  let length = keys.length
  return {
    next: function() {
      if (idx < length) {
        let ret = {
          value: {
            key: keys[idx],
            val: obj[keys[idx]]
          },
          done: false
        }
        idx ++
        return ret
      } else {
        return {
          value: undefined,
          done: true
        }
      }
    }
  }
}

var a = {x:1, y:2, z:3}

a[Symbol.iterator] = it

for (let v of a)
{
  console.log(v)
}

• 利用generator實(shí)現(xiàn)

function* it(obj) {
  let propKeys =Object.keys(obj);

  for (let propKey of propKeys) {
    yield {
      key:propKey,
      val : obj[propKey]
    }
  }
}

var a = {x:1, y:2, z:3}

for (let v of it(a))
{
  console.log(v)
}



var a = {x:1, y:2, z:3}
a[Symbol.iterator] = it
for (let v of a)
{
  console.log(v)
}