Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to customize the JavaScript iterator

2025-02-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article introduces the knowledge of "how to customize the JavaScript iterator". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1.   what is an iterator?

Iterator is an interface mechanism that provides unified access to a variety of different data structures. (that is, to make some data structures that do not support traversal traversal)

The most common is the Array iterator, which returns values in an array sequentially.

Let arr = [1 console.log 2 3 4 5]; for (let val of arr) {console.log (val);}

2.   custom iterator

So how do we implement iterators?

First of all, it needs to meet two points:

Iterable protocol

Iterator protocol

Iterable protocol

Iterable protocols allow JavaScript objects to define or customize their iterative behavior

How to satisfy the iterable protocol?

To become an iterable object, an object must implement the @ @ iterator method.

This means that an object (or an object on its prototype chain) must have a property with the key @ @ iterator, which can be accessed through the constant Symbol.iterator

That is to say, to satisfy the iterable protocol, your object needs to have a property named Symbol.iterator, which makes it an iterable object.

Iterator protocol

The iterator protocol defines a standard way to produce a series of values, whether finite or infinite.

When the value is limited and all values are iterated, a default return value is returned.

How to satisfy the iterator protocol?

Your object needs to implement at least one next () method, which returns an iterator object IteratorResult. This iterator object contains two properties, done and value.

Done:

False if the iterator can produce the next value in the sequence.

True if the iterator has finished iterating the sequence

Value

The value returned by the iterator. Omitted when done is true

So let's start customizing an iterator.

As mentioned earlier, to customize an iterator, you need to meet the following two conditions:

Become an iterable object, that is, have a Symbol.iterator property

(that is, iterative protocol: Symbol.iterator)

The iterator object returns a next () method, and the next () method returns an object containing value and done properties.

(i.e. iterator protocol: return {next () {return {value, done}})

Let colors = {blue: "blue", green: "green", yellow: "yellow"}

Colors is now a non-iterating object, and we want to use for... Of traverses it, so you can customize the iterator.

Next, start to implement:

Colors [Symbol.iterator] = function () {let keys = Object.keys (colors); / / if you use let keys = Reflect.ownKeys (colors), keys will include some attributes that cannot be enumerated / / then the following len should be subtracted by one, minus the attribute Symbol.iterator / / choose to use let len = keys.length; let index = 0 according to the actual situation Return {next: function () {if (index)

< len) { return { value : colors[keys[index++]], done : false } } return { done : true } } }} 让我们对其验证一下: for (let val of colors) { console.log(val);}

That's all for "how to customize the JavaScript iterator". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report