Home > Web Front-end > Front-end Q&A > What is es6 traverser

What is es6 traverser

WBOY
Release: 2022-04-26 11:17:54
Original
1829 people have browsed it

In es6, the iterator (Iterator) is an interface used to process different data structures and provide a unified access mechanism for various data structures. As long as the data structure deploys the Iterator interface, The traversal operation can be completed; the traverser can arrange the members of the data structure in a certain order.

What is es6 traverser

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

What is the es6 traverser

JavaScript’s original data structures representing “collections” are mainly arrays (Array) and objects (Object), and ES6 adds Map and Set. In this way, there are four data collections, and users can use them in combination to define their own data structures. For example, the members of an array are Maps, and the members of Maps are objects. This requires a unified interface mechanism to handle all different data structures.

Iterator is such a mechanism. It is an interface that provides a unified access mechanism for various different data structures. As long as any data structure deploys the Iterator interface, it can complete the traversal operation (that is, process all members of the data structure in sequence).

Iterator Iterator is an interface that provides a unified access mechanism for various data structures, that is, for...of loop.

Any data structure can complete the traversal operation as long as it deploys the Iterator interface.

The role of the traverser

  • Provides a unified and simple access interface for various data structures;

  • Enables the members of the data structure to be arranged in a certain order;

  • ES6 created a new traversal command for...of loop, and the Iterator interface is mainly used for for... of consumption (the object traversed by for must have a traverser interface before it can be traversed)

Iterator’s traversal process

  • #Create a pointer object pointing to the starting position of the current data structure. In other words, the traverser object is essentially a pointer object.

  • The first time you call the next method of a pointer object, you can point the pointer to the first member of the data structure.

  • The second time you call the next method of the pointer object, the pointer points to the second member of the data structure.

  • Continuously call the next method of the pointer object until it points to the end of the data structure.

Every time the next method is called, the information of the current members of the data structure will be returned. Specifically, it returns an object containing two properties: value and done. Among them, the value attribute is the value of the current member, and the done attribute is a Boolean value indicating whether the traversal has ended.

Examples are as follows:

Normal implementation

    function makeInterator(array){
        let startIndex=0;
        return {
            next:function(){
                return startIndex<array.length?{value:array[startIndex++],done:false}:{value:undefined,done:true}
            }
        }
    }
    let inter=makeInterator([1,2,3,4]);
    console.log(inter.next());
    console.log(inter.next());
    console.log(inter.next());
    console.log(inter.next());
    console.log(inter.next());
Copy after login

Result:

What is es6 traverser

##[Related recommendations:

javascript video Tutorialweb front-end

The above is the detailed content of What is es6 traverser. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
es6
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template