How to turn an object into an iterable object?

An iterable object (Iterable object) is a generalization of an array. This concept means that any object can be customized as an object that can be used in a for...of loop.
That is, objects to which for...of can be applied are called iterable objects.

iterator

In JavaScript, an iterator is an object that defines a sequence and possibly returns a return value when terminated.

More specifically, an iterator is any object next() implemented by using a method that returns an object with two properties:Iterator protocol

• value, which is the next value in the sequence
• done, which is true if the last value in the sequence has been iterated to,
  if value 和 done 一起存在so, it is the return value of the iterator.

Once created, an iterator object can 显式be iterated through repeated calls to next().

Iterating over an iterator is said to consume the iterator, since it can usually only be done once.

After yielding the termination value, additional calls to next() should continue to return {done: true}.

The most common iterator in Javascript is Array 迭代器that it simply returns each value in the associative array in order.

While it's easy to imagine that all iterators can be represented as arrays, this is not the case. Arrays must be allocated in full, but iterators are used only when necessary, so sequences of unlimited size can be represented, such as integer ranges between 0 and infinity.

Here is an example where this can be done. It allows to create a simple range iterator that defines a sequence of integers with interval steps from start (inclusive) to end (exclusive). Its final return value is the size of the sequence it created, tracked by the variable iterationCount.

let index = 0
const bears = ['ice', 'panda', 'grizzly']

let iterator = {
    
    
  next() {
    
    
    if (index < bears.length) {
    
    
      return {
    
     done: false, value: bears[index++] }
    }

    return {
    
     done: true, value: undefined }
  }
}

console.log(iterator.next()) //{ done: false, value: 'ice' }
console.log(iterator.next()) //{ done: false, value: 'panda' }
console.log(iterator.next()) //{ done: false, value: 'grizzly' }
console.log(iterator.next()) //{ done: true, value: undefined }

Implement iterable objects

An object is called if it has [Symbol.iterator]a method that returns an iterator object 可迭代对象.

let info = {
    
    
  bears: ['ice', 'panda', 'grizzly'],
  [Symbol.iterator]: function() {
    
    
    let index = 0
    let _iterator = {
    
    
       //这里一定要箭头函数，或者手动保存上层作用域的this
       next: () => {
    
    
        if (index < this.bears.length) {
    
    
          return {
    
     done: false, value: this.bears[index++] }
        }
  
        return {
    
     done: true, value: undefined }
      }
    }

    return _iterator
  }
}

let iter = info[Symbol.iterator]()
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

//符合可迭代对象协议 就可以利用 for of 遍历
for (let bear of info) {
    
    
  console.log(bear)
}
//ice panda grizzly