! [K9DIWTU0D4KID_thumbnail](https://i.loli.net/2020/04/24/zX21NdsLFHcA5OZ.jpg)
## Iterator
Iterator is a new traversal mechanism introduced in ES6. Iterators have two core concepts:
– Iterator is a unified interface that makes various data structures easily accessible through a Symbol. Iterator method.
– Iterators are Pointers used to iterate over data structure elements (such as cursors in databases).
### Iterative process
The process of iteration is as follows:
– Creates an iterator using symbol. iterator that points to the start of the current data structure
– Then iterate down to the next position through the next method. The next method will return the object at the current position, including value and done. Value is the value of the current attribute, and done is used to determine whether the traversal is finished
– Traversal ends when done is true
Here is a simple example:
“` javascript
const items = [“zero”, “one”, “two”];
const it = items[Symbol.iterator]();
it.next();
>{value: “zero”, done: false}
it.next();
>{value: “one”, done: false}
it.next();
>{value: “two”, done: false}
it.next();
>{value: undefined, done: true}
` ` `
In the above example, we first create an array, then use symbol. iterator to create an iterator, and then call next repeatedly to access the items in the array until done is true.
Iterators are part of the protocol (the rules that use them) and are used for iteration. A key feature of this protocol is that it is sequential: iterators return one value at a time. This means that if an iterable data structure is nonlinear (such as a tree), iteration will linearize it.
### Iterable data structures
Here are the iterable values:
– Array
– String
– Map
– Set
– Dom elements (in progress)
We will use **for… Of ** loop (see below for… Of loop) iterates over the data structure.
**Array**
Arrays and TypedArray are both iterable.
“` javascript
for (let item of [“zero”, “one”, “two”]) {
console.log(item);
}
// output:
// zero
// one
// two
` ` `
**String**
Strings are iterable, but they iterate over Unicode codes, each of which may contain one or two Javascript characters.
“` javascript
for (const c of ‘z\uD83D\uDC0A’) {
console.log(c);
}
// output:
// z
// \uD83D\uDC0A
` ` `
**Map**
Maps mainly iterate through their entries, each entry encoded as a [key, value] entry, and the entries are iterated in the same order as they were added.
“` javascript
const map = new Map();
map.set(0, “zero”);
map.set(1, “one”);
for (let item of map) {
console.log(item);
}
// output:
// [0, “zero”]
// [1, “one”]
` ` `
Note: WeakMaps are not iterative
**Set**
A Set iterates over its elements in the same order as it was added to
“` javascript
const set = new Set();
set.add(“zero”);
set.add(“one”);
for (let item of set) {
console.log(item);
}
// output:
// zero
// one
` ` `
Note: WeakSets are not iterative
**arguments**
Arguments is currently used less and less in ES6, but is also traversable
“` javascript
function args() {
for (let item of arguments) {
console.log(item);
}
} args(“zero”, “one”);
// output:
// zero
// one
` ` `
### Ordinary objects cannot be iterated
Ordinary objects are created by object and cannot be iterated:
“` javascript
// TypeError
for (let item of {}) {
console.log(item);
}
` ` `
## for… Of circulation
for… Of is a new loop introduced in ES6 to replace for.. In and forEach(), and support for new iteration protocols. It can be used to iterate over general data types such as Array, String, Map, and Set.
### Iterate over general data types
**Array**
“` javascript
const nums = [“zero”, “one”, “two”];
for (let num of nums) {
console.log(num);
}
// TypedArray
const typedArray1 = new Int8Array(6);
typedArray1[0] = 10;
typedArray1[1] = 11;
for (let item of typedArray1) {
console.log(item);
}
` ` `
**String**
“` js
const str = “zero”;
for (let item of str) {
console.log(item);
}
` ` `
**Map**
“` javascript
let myMap = new Map();
myMap.set(0, “zero”);
myMap.set(1, “one”);
myMap.set(2, “two”);
// Iterate over key and value
for (let [key, value] of myMap) {
console.log(key + ” = ” + value);
}
for (let [key, value] of myMap.entries()) {
console.log(key + ” = ” + value);
}
// just iterate over the key
for (let key of myMap.keys()) {
console.log(key);
}
// Just iterate over value
for (let value of myMap.values()) {
console.log(value);
}
` ` `
**Set**
“` javascript
let mySet = new Set();
mySet.add(“zero”);
mySet.add(“one”);
mySet.add(“two”);
// iterate through the set
for (let item of mySet) {
console.log(item);
}
// Only the key value is iterated
for (let key of mySet.keys()) {
console.log(key);
}
// Just iterate over value
for (let value of mySet.values()) {
console.log(value);
}
// Iterate over key and value, both will be equal
for (let [key, value] of mySet.entries()) {
console.log(key + ” = ” + value);
}
` ` `
### Iterable data structures
The of operands must be iterable, which means they cannot iterate if they are ordinary objects. If the data structure resembles the form of an Array, you can use the array.from () method to iterate over the transformation.
“` javascript
const arrayLink = {
length: 2,
0: “zero”,
1: “one”
}
// TypeError is reported
for (let item of arrayLink) {
console.log(item);
}
// It is running properly
for (let item of Array.from(arrayLink)) {
console.log(item);
}
// output:
// zero
// one
` ` `
**let, const, and var for for.. of**
If you use let and const, each iteration creates a new storage space, which ensures that the scope is inside the iteration.
“` javascript
const nums = [“zero”, “one”, “two”];
for (const num of nums) {
console.log(num);
}
/ / ReferenceError
console.log(num);
` ` `
We can see from the above example that the last sentence will raise an exception. The scope of reason num is only inside the body of the loop. This is not the case with VAR because var is global and iteration will not create a new storage space each time.
“` javascript
const nums = [“zero”, “one”, “two”];
forv (var num of nums) {
console.log(num);
}
console.log(num);
// output: two
` ` `
! [01](https://i.loli.net/2020/04/24/oEYfrkFBCDzR7e2.png)