Explanation of ES6 syntax iteration protocols and iterator protocols; explanation of es6

Explanation of ES6 syntax iteration protocols and iterator protocols; explanation of es6

The supplement of ECMAScript 2015 is not a new built-in or syntax, but a protocol. These protocols can be implemented by any object that complies with certain conventions.
There are two protocols: the iteratable protocol and the iterator protocol.

Iteratable protocols

The iteratable protocol allows JavaScript objects to define or customize their iterative behaviors, such as (defining) The values in a for... of structure that can be cyclically obtained ). Some built-in types are built-in iteratable objects and have default iteration behaviors, such as Array or Map, while others are not (such as Object ).

The objective of the Iterator interface is to provide a unified access mechanism for all data structures, that is, for... of loops (see below ). When the for... of loop is used to traverse a data structure, the loop will automatically find the Iterator interface, call the Symbol. iterator method, and return the default traversal of the object.

ES6 stipulates that the default Iterator interface is deployed in the Symbol of the data structure. iterator attribute, or, a Data Structure only needs to have Symbol. the iterator attribute can be considered as "iterable ). The Symbol. iterator attribute is a function, which is generated by the default traversal tool of the current data structure. When this function is executed, a traversal is returned.

To become an iteratable object, an object must be implemented (or an object in its prototype chain) with an attribute named Symbol. iterator:

Iterator Protocol

The iterator Protocol defines a standard way to generate a finite or infinite sequence of values.

The original JavaScript data structure that represents a "Set" is mainly Array and Object. ES6 adds Map and Set. In this way, there are four data sets. Users can also combine them to define their own data structures. For example, the members of an array are Map and the members of a Map are objects. In this way, a unified interface mechanism is required to process all different data structures.

Iterator is such a mechanism. It is an interface that provides a unified access mechanism for different data structures. Any data structure can be traversed by deploying the Iterator interface (that is, all members of the data structure are processed in sequence ).

Iterator has three functions: one is to provide a unified and simple access interface for various data structures, and the other is to enable members of the data structure to arrange in a certain order; third, ES6 has created a new traversal command... of loop, Iterator interface mainly... of consumption.

The Iterator traversal process is like this.

1. Create a pointer object pointing to the starting position of the current data structure. That is to say, the traversal object is essentially a pointer object.
2. When you call the next method of the pointer object for the first time, you can point the pointer to the first member of the data structure.
3. When the next method of the pointer object is called for the second time, the Pointer Points to the second member of the data structure.
4. Call the next method of the pointer object until it points to the end position of the data structure.

Each call to the next method returns information about the current member of the data structure. Specifically, an object containing the value and done attributes is returned. The value attribute is the value of the current member, and the done attribute is a Boolean value, indicating whether the traversal ends.

var someString = "hi";typeof someString[Symbol.iterator]; // "function"var iterator = someString[Symbol.iterator]();iterator + "";  // "[object String Iterator]"iterator.next()    // { value: "h", done: false }iterator.next();   // { value: "i", done: false }iterator.next();   // { value: undefined, done: true }

The native data structure with the Iterator interface is as follows.

1. Array
2. Map
3. Set
4. String
5. TypedArray
6. Arguments object of the Function
7. NodeList object

Note that the object does not have the Iterator interface. If an object needs to be available... of the Iterator interface that is called cyclically, it must be in Symbol. deploy the traversal generator generation method on the iterator attributes (the objects on the prototype chain can also use this method ).

Call the Iterator Interface

In some cases, the Iterator interface (Symbol) is called by default. iterator method), except for the... of loop, deconstruct value assignment, extension operators also call the default Iterator interface.

In fact, this provides a simple mechanism to convert any data structure deployed with the Iterator interface into an array. That is to say, if an Iterator interface is deployed in a data structure, you can use an extension operator to convert it into an array.

Since array traversal calls the traversal interface, the traversal interface is actually called when an array is accepted as a parameter. The following are some examples.

1. For...
2. Array. from ()
3. Map (), Set (), WeakMap (), WeakSet () (for example, new Map ([['A', 1], ['B', 2])
4. Promise. all ()
5. Promise. race ()

For...

For... of loop is the loop that is newly added to the JavaScript loop series.

It combines the advantages of its sibling loop form for loop and for... in loop, and can loop any type of data that can be iterated (that is, that is, comply with the iteratable protocol. By default, it contains the following data types: String, Array, Map, and Set. Note that the Object data type ({}) is not included {}). By default, objects cannot be iterated.

Before studying the for... of loop, you can quickly understand other for loops to see their shortcomings.

For Loop

The biggest disadvantage of a for loop is that you need to track the counter and exit conditions. We use variable I as a counter to track loops and access values in the array. We also use Array. length to determine the exit condition of the loop.

Although for loop is indeed advantageous in loop array, some data structures are not arrays, so it is not always suitable for loop.

For... in Loop

The for... in loop improves the shortcomings of the for loop, which eliminates the counter logic and exit conditions. However, you still need to use index to access the array value.

In addition, when you need to add an extra method (or another object) to the array, the for... in loop will bring a lot of trouble. Because for... in cyclically accesses all the enumerated attributes, it means that if you add any other attributes to the array prototype, these attributes will also appear in the loop. This is why we do not recommend using the for... in loop when cyclically accessing the array.

Note: The forEach loop is another form of JavaScript loop. However, forEach () is actually an array method, so it can only be used in an array. You cannot stop or exit the forEach loop. If you want this behavior in your loop, you need to use the basic for loop.

For... of Loop

For... of loops are used to cyclically access any data types that can be iterated.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];for (const digit of digits) { console.log(digit);}

You can stop or exit the for... of loop at any time.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];for (const digit of digits) { if (digit % 2 === 0) {  continue; } console.log(digit); //1,3,5,7,9}

You don't have to worry about adding new attributes to an object. For... of loop will only access the values in the object cyclically.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.