The iterator

What is an iterable

  • The A object, or A prototype of it, implements the @@iterator method, which returns an iterator that can be accessed through symbol. iterator

What is an iterator

  • The @@iterator method returns an iterator. It’s really just an object with a next method.

3. What is the Next method

  • The next method returns {done: Boolean, value: any}. Done =true indicates the end of the iteration.

4. Application of iterables and iterators

  • for item of A [...A] Array.from(A)Etc. — “A” is an iterable.
  • Such asfor ofTraversal, which is called when it starts upSymbol.iteratorMethod, which returns an iterator (an object with a next method). The for of loop is actually calling next() over and over again.
  • Array, Map, and so on have symbols. Iterator methods built in, so they are themselves iterable. A custom object does not have a symbol. iterator method. If you want to participate in the for of loop, you must define the symbol. iterator method.

5. Speed up understanding: Customize an iterable

let obj = {
  a: 'aa'.b: 'bb'.c: 'cc'
}

obj[Symbol.iterator] = function () {
  const _this = this // Get obj easily
  return {
    currentIdx: 0.next: function() {
      const totalLength = Object.keys(_this).length // ['a', 'b', 'c'].length
      const values = Object.values(_this) // ['aa', 'bb', 'cc']
      if(this.currentIdx < totalLength) {
        return {done: false.value: values[this.currentIdx++]}
      } else {
        return {done: true}
      }
    }
  }
}

// for a loop
for (let i of obj) { // Call next until {done: true}
  console.log('i :>> ', i)
}
/ / output
// i :>> aa
// i :>> bb
// i :>> cc


// for example
const iterator = obj[Symbol.iterator]()

console.log('test :>> ', iterator.next()) // { done: false, value: 'aa' }
console.log('test :>> ', iterator.next()) // { done: false, value: 'bb' }
console.log('test :>> ', iterator.next()) // { done: false, value: 'cc' }
console.log('test :>> ', iterator.next()) // { done: true }
console.log('test :>> ', iterator.next()) // { done: true }

Copy the code

The generator

What is a generator

  • Generator Object: A Generator Object, which is returned by a Generator function
  • A generator is both an iterator — an object with a next method — and an iterable — an object with a symbol. iterator method
  • A generator object is a special iterable, similar to an improved version of the iterable, with a new name, similar to the difference between a broom and a sweeping robot

2. What are generator functions

  • Generator functions: refers tofunction*Defined function (), which returns a Generator object

3. Speed up understanding: Rewrite iterables

  • Each yield is similar to the originalreturn {done: false, value: this[key]}The operation of the
  • ⚠ ️ callfunction*The function is not executed, as followsobj[Symbol.iterator]()whenconsole.log(1)Does not execute, and can be carefully compared to the implementation of iterator ~
// The above iterator can be rewritten as
obj[Symbol.iterator] = function* () {
  for(let i = 0; i < Object.keys(this).length; i++) {
    const key = Object.keys(this)[i]
    console.log(1)
    yield this[key] // yield: Used to pause and resume a generator function}}// obj[symbol.iterator]() returns a generator
Copy the code

4. Generator Object application

I have always thought that Promise is an improvement of Generator. What is the confusion? It should be the following

  • The Generator is an improvement on Iterator
  • Async /await is a syntactic sugar for Generator + Promise

Refer to the link

  • MDN Iterative protocol
  • Iterable object