Shulou(Shulou.com)05/31 Report--

This article focuses on "whether the for of of es6 can traverse objects", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn whether the for of of es6 can traverse objects.

The "for of" of es6 cannot traverse objects. Reason: Iterator interface is introduced into ES6, and only data types that provide Iterator interface can use "for-of" to cycle through, while ordinary objects do not provide Iterator interface by default, so they cannot be traversed with "for-of".

The operating environment of this tutorial: windows7 system, ECMAScript version 6, Dell G3 computer.

With the continuous development of the front end, there are many methods of optical cycle, such as for, forEach, do..while, for...in and so on, but these cycles also have their own application scenarios and advantages and disadvantages.

ES6 also provides us with a new loop method for...of, which can loop strings, arrays and other array objects. As the most common Object object, it can loop.

Let's take a look at the following code example:

{/ / iterative array const iterable = ['ajar,' b']; for (const value of iterable) {console.log (value);} / / output: ab} {/ / Common object const obj = {a: 'Aids, b:' B'} for (const item of obj) {console.log (item)} / / Uncaught TypeError: obj is not iterable}

Oh no, wrong report: Uncaught TypeError: obj is not iterable. It is suggested that obj can not be iterated, and it is obviously not possible to use for...of to traverse Object objects directly.

So why can't for...of, which can traverse most data structures, traverse Object objects?

Reason:

Iterator is introduced into ES6, and only data types that provide Iterator interface can be iterated using for-of, while Array, Set, Map, and some class arrays such as arguments all provide Iterator interface by default, so they can use for-of for traversal.

For ordinary objects, the for...of structure cannot be used directly, and an error will be reported, indicating obj is not iterable, that is, ordinary objects do not have an Iterator interface by default, and can only be used after the Iterator interface is deployed.

How to solve it? Let for-of traverse the object

So the reason is clear, how to solve it? Is it possible to provide Iterator interfaces for some other data types of objects?

The answer is yes. ES6 also provides the Symbol.iterator attribute. As long as a data structure has this attribute, it will be regarded as having an Iterator interface. Then it is how to implement this interface. The following is the simplest implementation:

NewObj [Symbol.iterator] = function () {let index = 0, self = this, keys = Object.keys (self); return {next () {if (index < keys.length) {return {value: Self [index + +]], done: false} } else {return {value: undefined, done: true};}

If you take a closer look, you will find that the Symbol.iterator interface is actually a Generator function, so the code can be simplified:

NewObj [Symbol.iterator] = function* () {let keys = Object.keys (this); for (let I = 0, l = keys.length; I < l; iTunes +) {yield This [keys [I]];}} for (let v of newObj) {console.log (v);} / / output result / / 5max / 6

It is worth noting that Object.keys happens to solve the inheritance problem encountered by for-in before.

This meets our expectations, using for-of to traverse objects, but there seems to be something wrong. When we traverse objects, we usually expect to output key and value at the same time, so adjust the code.

NewObj [Symbol.iterator] = function* () {let keys = Object.keys (this); for (let I = 0, l = keys.length; I < l; iTunes +) {yield {key: keys [I], value: yield [Keys [I]}} for (let v of newObj) {console.log (v) } / / output result / / {key: "e", value: 5} / / {key: "f", value: 6}

This returns an object, which seems very uncomfortable. Can we try some deconstruction assignments.

For (let {key, value} of newObj) {console.log (key, value);} / / output result / / e 5amp / f 6

This seems to be perfect.

Extended knowledge: the difference between for-of and other loops

Whether the loop name loop object is interruptible whether the loop has a return value forfor the length of the loop body can have no return value forEach can only loop array, map, set, etc., non-cyclable string, ordinary object cannot be without return value do...while satisfies certain conditions, it can always loop, at least once the loop can not return value while satisfies certain conditions, then the loop can always form new array members without return value map Only circular array, non-circular string, ordinary object, set, map non-interruptible return new array, does not affect the original array filter filter array members, only circular array, non-circular string, ordinary object, set, map non-interruptible return new array, does not affect the original array for...in cyclable array, object, non-circular map, set. Traversable numeric key names, you can also traverse other keys that can be added manually, even the keys on the prototype chain can be iterated without a return value for...of loop, and non-circular ordinary objects (unified data structure traversal) can be iterated without a return value to this, I believe that everyone on the "es6 for of can traverse objects" have a deeper understanding, might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.