Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of the iterator pattern in the front end of web. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Iterator mode (Iterator Pattern)

If you see this, I'm sure you'll be impressed by the iterator Iterator in ES6, which has been briefly introduced in section 60 above. The iterator pattern simply provides a way to sequence the elements of an aggregate object without exposing the internal representation of the object.

The iterator pattern solves the following problems:

Provides a consistent way to traverse various data structures without understanding the internal structure of the data

Provides the ability to traverse containers (collections) without changing the container's interface

An iterator usually needs to implement the following interfaces:

HasNext (): determines whether the iteration is over and returns Boolean

Next (): find and return the next element

Implementing an iterator for an array of Javascript can be written as follows:

Const item = [1, 'red', false, 3.14]; function Iterator (items) {this.items = items; this.index = 0;} Iterator.prototype = {hasNext: function () {return this.index < this.items.length;}, next: function () {return this.items [this.index++];}}

Verify that the iterator works:

Const iterator = new Iterator (item); while (iterator.hasNext ()) {console.log (iterator.next ());} / output: 1, red, false, 3.14

ES6 provides a simpler iterative loop syntax for... Of, the premise of using this syntax is that the Operand needs to implement the iterable protocol (The iterable protocol). To put it simply, the object has a method whose Key is Symbol.iterator, which returns an iterator object.

For example, we implement a Range class to iterate over a certain range of numbers:

Function Range (start, end) {return {[Symbol.iterator]: function () {return {next () {if (start < end) {return {value: start++, done: false};} return {done: true, value: end};}

Verify:

For (num of Range (1,5)) {console.log (num);} / output: 1, 2, 3, 4 on the "sample analysis of iterator patterns in the web front end" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

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.