ES6之遍歷器 iterator && generator

工作機制

• 創建一個指針對象，指向數組的初始位置
• 調用next方法，對數組逐個進行遍歷
• 遍歷結果的返回值是一個對象，這個對象中包含兩個屬性，value和done
• 當遍歷沒有結束，對象返回的結果爲：{value: 當前遍歷對象的下標, done: false}
• 遍歷結束以後，對象返回的結果爲：{value: undefined, done: true}
• 結束後，不對此時的value值進行處理

function makeIterator(arr) {
  let nextIndex = 0;
  return {
    next:function () {
      return (nextIndex < arr.length 
        ? {value:arr[nextIndex++],done:false}
        :{value:undefined,done:true})
    }
  }
}

let arr = [1,2,3,5];
let iteratorObj = makeIterator(arr);
console.log(iteratorObj.next());  //{value: 1, done: false}
console.log(iteratorObj.next());  //{value: 2, done: false}
console.log(iteratorObj.next());  //{value: 3, done: false}
console.log(iteratorObj.next());  //{value: 5, done: false}
console.log(iteratorObj.next());  //{value: undefined, done: true},以後都是這個結果
console.log(iteratorObj.next());  //{value: undefined, done: true}

iterator模擬遍歷對象

function iteratorMaker() {
// this的指向就是調用的對象
    console.log(this)
//  保存this
    let that = this;
    let index = 0;

//  如果這個iterator遍歷器遍歷的對象是數組      //由於數組中存在Symbol，所以這段代碼可以去掉
    if(that instanceof Array){
//  返回一個對象
      return {
//  調用next方法
        next: function () {
//  返回這個對象相應的value,done屬性的值
          return index < that.length ? {value:that[index++],done:false}:{value:that[index++],done:true};
        }
      }
    }


//   如果是對象
    else {

/*    調用Object.keys()方法，
說明：Object.keys()方法遍歷對象的屬性名，返回的是一個數組
例如：
 let obj = {id:1,age:2};
 let key = Object.keys(obj);
 console.log(key);  // ["id", "age"]
* 
* */
* 
      let keys = Object.keys(that);
      return {
        next:function () {
          return index < keys.length ? {value:that[keys[index++]],done:false}:{value:that[keys[index++]],done:true};
        }
      }
    }
  }

// 驗證數組
//  將Array的prototype中的Symbol.iterator方法指向改變，指向iteratorMaker
  Array.prototype[Symbol.iterator]=iteratorMaker;
  let arr=[1,2,3,55];
  for(var i of arr){
    console.log(i);
  }
    console.log(arr);

// 驗證對象
//  給Object的prototype添加Symbol.iterator方法爲 iteratorMaker
  Object.prototype[Symbol.iterator] = iteratorMaker;
  let obj = {id:1,age:2};
  for (var item of obj){
    console.log(item)
  }
  console.log(obj);`

generator遍歷器

工作機制

• 調用next函數，遇到yield時暫停，接着調用next，遇到yield時暫停
• 終點 {value: undefined, done: true}

    function* generatorTest() {
      console.log('函數開始執行')
      yield  '1';
      console.log('函數再次執行')
      yield  '2';
    }
//    生成遍歷器對象
    let G = generatorTest();
//    執行函數，遇到yield後暫停
    console.log(G);  //{value: "1", done: false}
//    再次執行函數，遇到yield後暫停
    let result = G.next();  //{value: "2", done: false}
    console.log(result);
    result = G.next();  //{value: undefined, done: true}
    console.log(result);
    result = G.next();   //{value: undefined, done: true}
    console.log(result);
    result = G.next();
    console.log(result);