Q: Can you use for of to traverse Object?

Preface

This article uses for of to traverse Object as an introduction to talk about the iterator pattern.

What is iterator pattern

The Iterator pattern provides a way to sequentially access the individual elements of an aggregate object without exposing the object's internal representation. ——"Design Patterns: The Foundation of Reusable Object-Oriented Software"

It can be said that the iterator pattern exists for traversal. When it comes to traversal, everyone is familiar with those methods. Let’s briefly list the traversal of various data types:

Traverse array

1. for loop
2. forEach
3. map
4. reduce
5. keys
6. values
7. for of
8. ......

The keys values ​​for of require Iterator support, which will be introduced later.

Traverse Map/Set

1. keys
2. entries
3. forEach
4. ......

Traverse Object

1. for in
2. First, use Object.keys(obj) to get the array of each attribute of the object, and then use the array traversal method to traverse each key to get the value corresponding to each key.

Iterator and for of
Iterator are an interface proposed by ES6 to provide a unified access mechanism for various data structures. As long as the Iterator interface is deployed on any data structure, the traversal operation can be completed.

The function of Iterator
is to provide a unified and simple access interface for various data structures.
ES6 proposes a new traversal command for...of loop, and the Iterator interface is mainly used for for...of consumption.
Iterator's traversal process
Since the array supports for...of loop, the array must have deployed the Iterator interface. Let's use it to take a look at the Iterator's traversal process.

 From the picture we can see:

• The Iterator interface returns an object with a next method.
• Each time next is called, the items in the array are returned in sequence until it points to the end of the data structure.
• The returned result is an object, which contains the current value value and whether the current done is completed.

Use for of to traverse Object

Back to the question in the title, how can we now make an object traversable using for of? 

 According to what is mentioned above, the Iterator interface needs to be deployed to the object (actually, a function named Symbol.iterator is implemented on Object.prototype. This function returns an object with a next method. Each time next is called, it can be used in sequence. Returns the items in the array until it points to the end of the data structure)

function objectIterator() {
  const keys = Object.keys(this)
  let index = 0
  return {
    next: () => {
      const done = index >= keys.length
      const value = done ? undefined : this[keys[index]]
      index++
      return {
        done,
        value
      }
    }
  }
}

Object.prototype[Symbol.iterator] = objectIterator

const obj = {
  key: '1',
  value: '2'
}

for (const iterator of obj) {
  console.log(iterator)
}