Series of links:

Js traversal object -for… And in the Object. The keys

Js traversal object part 2 – enumerability and Symbol

Iterator

ES6 states that the default Iterator interface is deployed in the symbol. Iterator property of a data structure (pointing to the default Iterator method for that object), or that a data structure can be considered “iterable” as long as it has the symbol. Iterator property. The symbol. iterator property is itself a function that is the default traverser generator for the current data structure. Executing this function returns a traverser. Iterator is an expression that returns the iterator property of the Symbol object, which is a predefined special value of type Symbol, so it is enclosed in square brackets.

The data structures with the Iterator interface are as follows:

  • Array
  • Map
  • Set
  • String
  • TypedArray
  • The arguments object for the function
  • The NodeList object

Above Iterator related introduction text from ruan Yifeng teacher ES6 tutorial

let arr = ['a'.'b'.'c'];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // { value: 'a', done: false }
console.log(iter.next()); // { value: 'b', done: false }
console.log(iter.next()); // { value: 'c', done: false }
console.log(iter.next()); // { value: undefined, done: true }
Copy the code

Add the Iterator interface

1. Add an Iterator interface to the object

for… of… Iterator interface is required to iterate over objects

// Cannot iterate over objects because they have no native Iterator interface
// const obj = {
// name: 'lsc',
// age: 21
// }

// for (let item of obj) {
// console.log(item); // TypeError: obj is not iterable
// }

// Add an iterator interface to the object
const obj2 = {
  name: 'lsc'.age: 21.height: 187[Symbol.iterator] () {
    const self = this
    const keys = Object.keys(self)
    let index = 0
    return {
      next() {
        if (index < keys.length) {
          return {
            value: self[keys[index++]],
            done: false}}else {
          return {value: undefined.done: true}
        }
      }
    }
  }
}

for (let item of obj2) {
  console.log(item);
}
Copy the code
2. Add an iterator interface to the class array

Arguments /nodelist and other common pseudo-arrays have an iterator interface of their own, so this is where the native pseudo-arrays are documented

// This example comes from ruan Yifeng ES6 tutorial
let iterable = {
  0: 'a'.1: 'b'.2: 'c'.length: 3[Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // 'a', 'b', 'c'
}
Copy the code

But it’s easier to convert a pseudo-array directly to an Array using the extension operator or array. from

Generator

Generator is both a state machine and an iterator Generator function, so you can assign Generator to the Symbol. Iterator property of an object

const obj2 = {
  name: 'lsc'.age: 21.height: 187[Symbol.iterator]: function* myIterator(){
    for(let key of Object.keys(this))
      yield this[key]; }}for (let item of obj2) {
  console.log(item); // lsc 21 187
}
Copy the code