This is the 8th day of my participation in the First Challenge 2022

Preface:

The English word “iteration” comes from the Latin itero, which means “to repeat” or “to come again.” In software development, “iteration” means the execution of a program many times, in sequence, often with explicit termination conditions. The ECMAScript 6 specification adds two high-level features: iterators and generators. Using these two features, you can iterate more clearly, efficiently, and easily.

1. Understand iteration

Counting loops are the simplest iteration in JavaScript:

for (let i = 1; i <= 10; ++i) { 
 console.log(i); 
} 
Copy the code

Loops are the basis of the iterative mechanism because they specify the number of iterations and what to do with each iteration. Each iteration is completed before the next iteration begins, in a predefined order. The iteration takes place over an ordered set. (” ordered “can be understood to mean that all items in the set can be traversed in a given order, especially when the beginning and end items are clearly defined.) Arrays are the most typical example of an ordered collection in JavaScript.

let collection = ['foo'.'bar'.'baz']; 
for (let index = 0; index < collection.length; ++index) { 
 console.log(collection[index]); 
} 
Copy the code

Because the array has a known length and each item can be retrieved by index, the entire array can be traversed by incrementing the index. Executing routines through this loop is not ideal for the following reasons. You need to know how to use data structures before you iterate. Each item in an array can be retrieved only by reference to the array object and then by the [] operator at a specific index position. This does not apply to all data structures. The traversal order is not inherent in the data structure. Increasing the index to access data is an array type specific approach that does not apply to other data structures with implicit order. ES5 has added the array.prototype.foreach () method, which is a step toward the generic iteration requirement (but still not ideal) :

let collection = ['foo'.'bar'.'baz']; 
collection.forEach((item) = > console.log(item)); 
// foo 
// bar 
// baz 
Copy the code

This approach solves the problem of logging indexes separately and fetching values from array objects. However, there is no way to identify when an iteration ends. So this method only works with arrays, and the callback structure is clunky. In earlier versions of ECMAScript, iterations had to be performed using loops or other helper constructs. As the amount of code increases, the code becomes more cluttered. Many languages solve this problem with native language constructs that allow the developer to iterate without having to know how to iterate in advance. This solution is the iterator pattern. Python, Java, C++, and many other languages have complete support for this pattern. JavaScript also supports the iterator pattern after ECMAScript 6.

Iterator pattern

The Iterator pattern (especially in the context of ECMAScript) describes a scenario in which structures can be called “iterable” because they implement the formal Iterable interface and can be consumed through the Iterator Iterator. An iterable is an abstract term. Basically, an iterable can be thought of as an object of a collection type like an array or a collection. They all contain finite elements, and all have an unambiguous traversal order:

// The elements of the array are finite
// Incrementing indexes can access each element in order
let arr = [3.1.4]; 
// Set elements are finite
// Each element can be accessed in insertion order
let set = new Set().add(3).add(1).add(4); 
Copy the code

However, an iterable does not have to be a collection object. It can also be another data structure that simply behaves like an array, such as the counting loop mentioned at the beginning of this chapter. The values generated in the loop are transient, but the loop itself performs an iteration. Counting loops and arrays both have the behavior of an iterable. Any data structure implementing the Iterable interface can be consumed by the structure implementing the Iterator interface. Iterators are disposable objects that are created on demand. Each iterator is associated with an iterable, and the iterator exposes the API that iterates over its associated iterable. An iterator does not need to know the structure of the iterable it is associated with, only how to obtain continuous values. This conceptual separation is the power of Iterable and Iterator

Conclusion:

This issue we share is JavaScript (8) initial iterators and generators, our next issue: **JavaScript iterators and generators ** original is not easy, looking forward to your likes follow and forward comments 😜😜Copy the code