This article describes the principles, application scenarios and related common knowledge expansion of ES6 Iterator traverser. Share it for your reference, as follows:
Before introducing Iterator, we will first list several ways to represent the data collection structure of js:
Before es6, map and set were added to Array, Object, and es6. Of course, users can also combine these data structures to store data flexibly.
However, when the data structure becomes complex, how to retrieve the data is relatively complex, which requires a unified interface mechanism for reading data to handle different data structures.
The traverser is such an interface mechanism. Iterator is an interface that provides a unified interface mechanism for different data structures.
Any corresponding data structure can complete the traversal operation as long as the Iterator interface is deployed.
The function of Iterator:
The function of Iterator:
1. Provide a unified and simple access interface for various data structures;
2. Enable members of the data structure to be arranged in a certain order;
3. ES6 provides a new traversal loop (for...of...), and the Iterator is called by the for...of.... loop;
Iterator essence:
The traverser is essentially a pointing pointing to the image. There is a next() method on the pointing pointing to the member when the call is called.
The next() method call on Iterator returns:
1. Return the information of the current member
2. Return whether the traversal ends
Simulate the implementation of Iterator
var it = makeIterator(['a', 'b']);
() // { value: "a", done: false }
() // { value: "b", done: false }
() // { value: undefined, done: true }
function makeIterator(array) {
var nextIndex = 0;
return {
next: function() {
return nextIndex < ?
{value: array[nextIndex++], done: false} :
{value: undefined, done: true};
}
};
}
Using Typescript
interface Iterable {
[]() : Iterator,
}
interface Iterator {
next(value?: any) : IterationResult,
}
interface IterationResult {
value: any,
done: boolean,
}
About the default Iterator interface:
ES6 stipulates that the default Iterator interface is deployed in the data structureAttributes, or a data structure, as long as it hasAttributes can be considered "traversable".
The essence of
1. It is a function itself, corresponding to the default traverser generation function of the current data structure;
2. Executing this function will return a traverser.
Example:
const obj = {
[] : function () {
return {
next: function () {
return {
value: 1,
done: true
};
}
};
}
};
//After defining this way, the object has an Iterator interface//After executing object obj, return a traverser
Data structure with native iterator:
Array, Map, Set, String, TypedArray, the arguments object of the function, NodeList object (node object);
Array iterator instance
let arr = ['a', 'b', 'c'];
let iter = arr[]();
() // { value: 'a', done: false }
() // { value: 'b', done: false }
() // { value: 'c', done: false }
() // { value: undefined, done: true }
Object iterator interface implementation
class RangeIterator {
constructor(start, stop) {
= start;
= stop;
}
[]() { return this; }
next() {
var value = ;
if (value < ) {
++;
return {done: false, value: value};
}
return {done: true, value: undefined};
}
}
function range(start, stop) {
return new RangeIterator(start, stop);
}
for (var value of range(0, 3)) {
(value); // 0, 1, 2
}
Note: If an object does not have an iterator interface and has an Iterator interface on its prototype chain, it can also own the interface through inheritance;
usewhileLoop traversal
var $iterator = ITERABLE[]();
var $result = $();
while (!$) {
var x = $;
// ...
$result = $();
}
These are the basic concepts, let’s take a look at the usage scenarios
Iterator usage scenarios:
Default call scenario:
for...of...loop, deconstruction assignment, extension operator, yield* keyword
ES6 introduces C++, Java, C# and Python languagesfor...ofLoop as a unified method to traverse all data structures
Here we mainly introduce yield*, and the rest are easier to understand
yield*Followed by a traversable structure, it will call the traverser interface of the structure
let generator = function* () {
yield 1;
yield* [2,3,4];//Default traversal of arrays during execution yield 5;
};
var iterator = generator();
() // { value: 1, done: false }
() // { value: 2, done: false }
() // { value: 3, done: false }
() // { value: 4, done: false }
() // { value: 5, done: false }
() // { value: undefined, done: true }
Other scenarios:
Since the traversal of an array calls the traversal interface, any occasion that accepts an array as a parameter actually calls the traversal interface
- for...of
- ()
- Map(), Set(), WeakMap(), WeakSet() (for example
new Map([['a',1],['b',2]])） - ()
- ()
Knowledge expansion：
return(), throw() of the traverser object
Return method is called when loop exits or errors are reported
throwThe method is mainly used in conjunction with the Generator function (see generator for details)
Calculate the generated data structure
Calculate the generated data structure based on the original data structure, such as the data structure generated by the entries(), keys(), and value() methods of Object, Map, Set, Array, and has the iterator interface by default.
Similar array objects
Common: strings, NodeList node objects, parameter arguments
1. Not all array-like objects have Iterator interface
2. For class array objects, you can convert class array objects into array objects through ()
3. For-of can recognize 32-bit UTF-16 characters
for (let x of 'a\uD83D\uDC0A') {
(x);
}
Comparison of for-of and other traversal methods:
for loop, forEach loop, for...in...loop
forEach loop cannot jump out in the middle
for...inSeveral disadvantages of loops (for...inLoops are mainly designed to traverse objects and are not suitable for traversing arrays).
- The key name of the array is a number, but
for...inThe loop takes the string as the key names "0", "1", "2", etc. -
for...inThe loop not only traverses the numeric key names, but also traverses other keys added manually, and even includes keys on the prototype chain. - In some cases,
for...inThe loop will traverse the key names in any order.
For...of...
- Have the same
for...inThe same concise syntax, but nofor...inThose shortcomings. - Different from
forEachMethod, it can be used withbreak、continueandreturnUse together. - Provides a unified operation interface that traverses all data structures.
refer to:/
Interested friends can use itOnline HTML/CSS/JavaScript code running tool：http://tools./code/HtmlJsRunTest the above code running effect.
For more information about JavaScript, please view the special topic of this site: "JavaScript object-oriented tutorial》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.