深入理解ES6之《迭代器與生成器》

王軍發(fā)布于2019-08-20 19:03 / 1232人閱讀

摘要：什么是迭代器中創(chuàng)建迭代器如下所示什么是生成器生成器是一種返回迭代器的函數(shù)每當(dāng)招待完一條語句后函數(shù)就會自動停止執(zhí)行關(guān)鍵字可返回任何值或表達(dá)式關(guān)鍵字只可在生成器內(nèi)部使用，在其它地方使用會導(dǎo)致程序拋出語法錯誤所以下面例子是有錯誤的可迭代對象具有屬

什么是迭代器

ES5中創(chuàng)建迭代器如下所示：

function createIterator(items) {
  var i = 0
  return {
    next: function () {
      var done = i >= items.length
      var value = !done ? items[i++] : undefined
      return {
        done: done,
        value: value
      }
    }
  }
}
var iterator = createIterator([1, 2, 3])
console.log(iterator.next())

什么是生成器

生成器是一種返回迭代器的函數(shù)
每當(dāng)招待完一條yield語句后函數(shù)就會自動停止執(zhí)行

function *createIterator(){
  yield 1
  yield 2
  yield 3
}
let iterator =createIterator()
console.log(iterator.next())

yield關(guān)鍵字可返回任何值或表達(dá)式

function* createIterator(items) {
  for (let i = 0; i < items.length; i++) {
    yield items[i]
  }
}
let iterator = createIterator([1, 2, 3])
console.log(iterator.next())

yield關(guān)鍵字只可在生成器內(nèi)部使用，在其它地方使用會導(dǎo)致程序拋出語法錯誤
所以下面例子是有錯誤的

function* createIterator(items) {
  items.forEach(function (element) {
    yield itemsm + 1
  });
}
let iterator = createIterator([1, 2, 3])
console.log(iterator.next())

可迭代對象具有Symbol.iterator屬性，可通過Symbol.iterator指定的函數(shù)來作用于一個附屬對象的迭代器
由于生成器默認(rèn)會有Symbol.iterator屬性賦值，因此所有通過生成器創(chuàng)建的迭代器都是可迭代對象
如果將for of 語句用于不可迭代對象、null或undefined將會導(dǎo)致程序拋出錯誤

訪問默認(rèn)迭代器

let values = [1, 2, 3]
let iterator = values[Symbol.iterator]()
console.log(iterator.next())

檢測一個對象是否為可迭代對象

function isIterable(obj) {
  return typeof obj[Symbol.iterator] === "function"
}
console.log(isIterable([1, 2, 3]))

創(chuàng)建可迭代對象

let collection = {
  items: [],
  *[Symbol.iterator]() {
    for (let item of this.items) {
      yield item
    }
  }
}
collection.items.push(1)
collection.items.push(2)
collection.items.push(3)

for (let x of collection) {
  console.log(x)
}

內(nèi)建迭代器

數(shù)組、Map集合、Set集合，這3個對象都內(nèi)建了以下三種迭代器

keys

values

entries

每個集合對象都有一個默認(rèn)的迭代器，在for of循環(huán)中，如果沒有顯式指定則使用默認(rèn)迭代器

數(shù)組和set集合默認(rèn)的迭代器是values

Map集合默認(rèn)的迭代器是entries

let tracking = new Set([123, 456, 789])
//與調(diào)用tracking.values方法相同
for (let num of tracking) {
  console.log(num)
}

不僅僅字符串可以用for of來迭代,NodeList也可以

let divs = document.getElementsByTagName("div")
for (let div of divs) {
  console.log(div)
}

展開運算符可作用于任何可迭代對象

let one = [1, 2, 3]
let two = [100, 101, 102]
let all = [0, ...one, ...two]
console.log(all)//[0, 1, 2, 3, 100, 101, 102]

高級迭代器

給迭代器傳遞參數(shù)

function* createIterator() {
  let first = yield 1
  let second = yield first + 2//4+2
  yield second + 3//5+3
}
let iterator = createIterator()
console.log(iterator.next())
console.log(iterator.next(4))
console.log(iterator.next(5))
console.log(iterator.next())

在迭代器中拋出錯誤

function* createIterator() {
  let first = yield 1
  let second
  try {
    second = yield first + 2
  } catch (error) {
    second = 6
  }
  yield second + 3
}
let iterator = createIterator()
console.log(iterator.next())//{value: 1, done: false}
console.log(iterator.next(4)) //{value: 6, done: false}
console.log(iterator.throw(new Error("Boom")))//{value: 9, done: false}
console.log(iterator.next())//{value: undefined, done: true}

生成器返回語句

function* createIterator() {
  yield 1
  return;
  yield 2
  yield 3
}
let iterator = createIterator()
console.log(iterator.next())//{value: 1, done: false}
console.log(iterator.next())//{value: undefined, done: true}

function* createIterator() {
  yield 1
  return 42
}
let iterator = createIterator()
console.log(iterator.next())//{value: 1, done: false}
console.log(iterator.next())//{value: 42, done: true}
console.log(iterator.next())//{value: undefined, done: true}

有一點需要注意的是展開運算符與for of循環(huán)語句會直接忽略掉通過return語句指定的任何返回值，只要done一變?yōu)閠rue就立即停止讀取其它的值

異步任務(wù)執(zhí)行器

向任務(wù)執(zhí)行器傳遞參數(shù)

function run(taskDef) {
  let task = taskDef()
  let result = task.next()
  function step() {
    if (!result.done) {
      result = task.next(result.value)
      step()
    }
  }
  step()
}
run(function* () {
  let value = yield 1
  console.log(value)
  value = yield value + 3
  console.log(value)
})

異步任務(wù)執(zhí)行器

function run(taskDef) {
  //創(chuàng)建一個無使用限制的迭代器
  let task = taskDef()
  // 開始執(zhí)行任務(wù)
  let result = task.next()
  // 循環(huán)調(diào)用next函數(shù)
  function step() {
    // 如果任務(wù)未完成則繼續(xù)執(zhí)行
    if (!result.done) {
      if (typeof result.value === "function") {
        result.value(function (err, data) {
          if (err) {
            result = task.throw(err)
            return;
          }
          result = task.next(data)
          step()
        })
      } else {
        result = task.next(result.value)
        step()
      }
    }
  }
  // 開始執(zhí)行迭代任務(wù)
  step()
}

let fs = require("fs")
function readFile(fileName) {
  return function (callback) {
    fs.readFile(fileName, callback)
  }
}
run(function* () {
  let contents = yield readFile("config.json")
  doSomethingWith(contents)
  console.log("hello")
})