js迭代器、生成器

内置可迭代对象

【Array、String、Set、Map 】都是内置可迭代对象，因为他们的原型对象都拥有一个Symbol.iterator方法），

而其他类型（比如 Object）则没有。

为了实现可迭代，对象必须实现 [Symbol.iterator]() 方法

数组

数组调用Symbol.iterator方法得到一个迭代器对象,

调用该迭代器对象中的next方法得到包含value和done属性的对象, value代表当前值，done代表是否迭代结束了

一旦没有可迭代的值，iterator.next()就会返回value为undefoned,done为true的对象

let number = [1, 2, 3]
let iterator = number[Symbol.iterator]()
console.log(iterator.next())//{value: 1, done: false}
console.log(iterator.next())//{value: 2, done: false}
console.log(iterator.next())//{value: 3, done: false}
console.log(iterator.next())//{value: undefined, done: true}

enteries方法返回包含键值对的@@iterator

let number = [5, 4, 3]
let iterator = number.entries()//得到键值对的迭代器
console.log(iterator.next().value)//[0, 5],位置为0的值为5
console.log(iterator.next())//{value: Array(2), done: false}
console.log(iterator.next())//{value: Array(2), done: false}
console.log(iterator.next())//{value: undefined, done: true}

keys方法返回包含数组索引的@@iterator

let number = [5, 4, 3]
let iterator = number.keys()
console.log(iterator.next())//{value: 0, done: false}
console.log(iterator.next())//{value: 1, done: false}
console.log(iterator.next())//{value: 2, done: false}
console.log(iterator.next())//{value: undefined, done: true}

values方法返回包含数组的值的@@iterator

let number = [5, 4, 3]
let iterator = number.values()
console.log(iterator.next())//{value: 5, done: false}
console.log(iterator.next())//{value: 4, done: false}
console.log(iterator.next())//{value: 3, done: false}
console.log(iterator.next())//{value: undefined, done: true}

Array.from(array) 根据已有的数组创建一个新数组

console.log( Array.from([1,2,3]))//[1, 2, 3]

Array.of(params) 根据传入的参数创建一个新数组

console.log(Array.of(2,5,6))//[2, 5, 6]

实现一个数组迭代器方法

function makeIterator(arr) {
  let index = 0
  return {
    next() {
      if (index < arr.length) {
        return { value: arr[index++], done: false }
      } else {
        return { value: undefined, done: true }
      }
    }
  }
}
let myIteratorObj = makeIterator(arr)
console.log(myIteratorObj.next())
console.log(myIteratorObj.next())
console.log(myIteratorObj.next())
console.log(myIteratorObj.next())
console.log(myIteratorObj.next())

对象

实现一个对象迭代器方法

let myObj = {
  a: 1,
  b: 2,
  c: 3,
  // [Symbol.iterator]() {
  //   let index = 0

  //   let map = new Map()
  //   map.set('a', 1)
  //   map.set('b', 2)
  //   map.set('c', 3)
  //   let mapEntries = [...map.entries()]

  //   return {
  //     next() {
  //       if (index < map.size) {
  //         return { value: mapEntries[index++], done: false }
  //       } else {
  //         return { value: undefined, done: true }
  //       }
  //     }
  //   }
  // },
  [Symbol.iterator]() {
    let index = 0
    let keys = Object.keys(this)
    let _this = this
    return {
      next() {
        if (index < keys.length) {
          return { value: _this[keys[index++]], done: false }
        } else {
          return { value: undefined, done: true }
        }
      }
    }
  }
}
let myObjIteratorObj = myObj[Symbol.iterator]()
console.log(myObjIteratorObj.next())
console.log(myObjIteratorObj.next())
console.log(myObjIteratorObj.next())
console.log(myObjIteratorObj.next())


/*
      自定义迭代器函数实现对象for of循环
      for of就是 调用迭代器函数生成迭代器对象 并 依次执行该对象的next方法
      */
for (let i of myObj) {
  console.log(i)
}

生成器

/*
	每调用一次next,就执行到对应的yield
*/
function* test() {
  yield 1
  yield 2
  yield 3
}
let iteratorObj = test()
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: undefined, done: true}

// for (let i of iteratorObj) {
//   console.log(i)
// }

生成器实现对象迭代

let myObj = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.iterator]: function* () {
    let index = 0

    let map = new Map()
    map.set('a', 1)
    map.set('b', 2)
    map.set('c', 3)
    let mapEntries = [...map.entries()]

    while (index < map.size) {
      yield mapEntries[index++]
    }
  }
}
for (let i of myObj) {
  console.log(i)
}