Iterator of JS

Application of iterators

Data processing ： Summarize the numbers in the following objects

let a = {
    
    b: {
    
        c: [
            '1',
            '2',
            '3'
        ],
        d: [
            '4',
            '5',
            '6',
            '7'
        ],
        e: [
            '8',
            '9',
            '10'
        ]
    }
}

//  Not available here for...of, Is due to Object Of prototype Not on [Symbol.iterator] Method , Therefore, complains 
for (let o of a) {
    
  console.log(o)
}
// Uncaught TypeError: authors is not iterable

If you want to traverse the object , First, the data format can be changed

for (let key in a) {
    
  let r = []
  for (let k in a[key]) {
    
    r = r.concat(a[key][k])
  }
  console.log(r)
}
// ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]

Second, through customization Iterator Interface , Make it traversable

a[Symbol.iterator] = function () {
    
    let b = this.b
    let keys = Reflect.ownKeys(b)
    let values = []
    return {
    
        next () {
    
            if (!values.length) {
    
                if (keys.length) {
    
                    values = b[keys[0]]
                    keys.shift()
                }
            }
            return {
    
                done: !values.length,
                value: values.shift()
            }
        }
    }
}

//  Defined [Symbol.iterator] After the interface , Can be for...of Iterative 
for (let o of a) {
    
  console.log(o)
}

Iterative protocol

If you make an object traversable , We must abide by the iterative protocol , Requirements of the agreement
1. Object to deploy a Symbol.iterator by key Key
2. Symbol.iterator The value of is a parameterless function that complies with the iterator protocol

iterator protocol

The iterator protocol requires the following conditions ：
1. An object must contain a parameterless function next
2.next The return value is also an object , contain done and value attribute . among done Indicates whether the traversal ends ,value Returns the value of the current traversal .

With default Iterator The data type of the interface

ES6 Some data structures of Iterator Interface （ For example, array ）, I.e. no handling , Can be for…of Loop traversal . The reason lies in , These data structures are deployed natively Symbol.iterator attribute ：

Array
Map
Set
String
TypedArray
 Functional  arguments  object 
NodeList  object 

Generator and Iterator

Generator Naturally, it satisfies the iterative protocol , utilize Generator There is no need to show the write iteration protocol （ because Generator contain next Methods and contains done、value Property ）.

//  use generator Rewrite the iterator interface function above ：
a[Symbol.iterator] = function * () {
    
    let b = this.b
    let keys = Reflect.ownKeys(b)
    let values = []
    while (1) {
    
        if (!values.length) {
    
            if (keys.length) {
    
                values = b[keys[0]]
                keys.shift()
                yield values.shift()
            } else {
    
                return false
            }
        } else {
    
        yield values.shift()
        }
    }
}