for.. of..

for… of… As a unified way of traversing all data structures

For iterates over an ordinary array

For in iterates over key-value pairs

The traversal method for the forEach array

Const arr = [100,200,300,400] for(const item of arr){console.log(item); If (item>300){break; if(item>300){break; }} // Instead of the forEach method, for.. of.. ForEach (function(item,index){}) forEach(function(item,index){})

Other traversal

// Array traversal (arguments) // DOM traversal (arguments) // DOM traversal (arguments) Const s = new Set(['foo',"bar"]) for(var I of s) {console.log(I); //foo bar }

Use with matching structure

const m = new Map() m.set({a:1},"value") m.set(true,100) for(var mm of m){ console.log(mm); [{/ / a: 1}, 'value'] [true, 100]} / / above are optimized by the deconstruction of the for. of for(var [key,value] of m){ console.log(key,value); //{ a: 1 } value || true 100 }

Note that traversing the object returns an error

Const DDD = {naz:" McGee ",baz:100} for(var item of DDD){console.log(item); //TypeError: ddd is not iterable }

Iterable iterates over interfaces

for.. The of loop is a way of traversing data uniformly

for… of… Object TypeError Why?

Es can represent more and more structured data types in the form of array, obj, set, map combinations

Iterable is an interface. For example, any type of data can have a toString method because they implement the same specification.

Iterable interfaces are an interface that can be used for… of.. Specifications for loop traversal access

In other words, if he implements an iterable interface, he can be traversed by the for of loop

What is Iterable

  • Console Test Help -> toggle developer tools to see output
console.log([])
console.log(new Set())
console.log(new Map())



We find that there are all the objects that can be traversed by for — of

  • proto -> Symbol(Symbol.iterator):f values()
  • The Iterator interface convention stipulates that an object must mount a method called iterator, which returns an object with the next() method
  • Repeated calls to next allow the internal traversal to take place
const result = ["foo","bar","baz"]
const iterator = result[Symbol.iterator]()

console.log(iterator.next()) //{value: "foo", done: false}
console.log(iterator.next()) //{value: "bar", done: false}
console.log(iterator.next()) //{value: "baz", done: false}
console.log(iterator.next()) //{value: undefined, done: true}

Const s = new Set([1,2,"as","foo"]) const it2 = S [Symbol.iterator]() console.log(it2.next()) console.log(it2.next())) console.log(it2.next()) console.log(it2.next()) console.log(it2.next())

Customize an iterable interface

Implementing the Iterable iterable interface needs to be met

  1. Have/Symbol. The iterator method
  2. The [Symbol. Iterator] method returns an object that implements the iterator interface, Iterator
  3. The returned object has a next method,
  4. The next method returns an object that iterates the result of an IterationResult
  5. The object takes two arguments, value, which is the value of each iteration, and done, which indicates whether the iteration has been completed
// The Iterable object implements an Iterable interface for an array. Of const _iterable = [1,23,4] const ob = {[Symbol. Iterator](){let index=0 Return {next:function(){return {value:_iterable[index], done:index++>=_iterable.length } } } } } for(var item of ob){ console.log(item) }

Since the Generator generator also implements the Iterator interface, the above method can be overwritten

Const ob = {* [Symbol.iterator](){// [Symbol.iterator]:function * (){} for(let item of _iterable) { yield item } } } for(var item of ob){ console.log(item) / / 1,23,4}

case

/ / I want to get a file of data const obj = {work: [" eat ", "sleeping", "play" doug], learn: [" and ", "fuck" and "your"], gos: [] "mother", / / cb (the callback) by way of the callback {const result = [] concat (enclosing the work, this. Learn, enclosing gos) for (var item of result) {callback (item)} }, // Implement the Iterator interface externally through for.. of.. Way [Symbol. The iterator] : the function () {const arr = [... this. Work,... this. Learn, enclosing gos] let index = 0; return { next:function(){ return { value:arr[index], done:index++>=arr.length } } } } }

Stupid way…

For (const item of obj.work) {console.log(item); // For (const item of obj.work) {console.log(item); } for(const item of obj.learn) { console.log(item); }

Traditional callbacks

Obj.cb (function(item){console.log(item); })

for.. Of way

// For (var item of obj){console.log(item); }

Generator

The generator function was mentioned earlier

The Iterable interface is also implemented above using a generator

Example: Add an identifier

Function * creatId(){let id=1 while(true){yield id++}} const g = creatId() g.next() g.next().