


This article brings you an introduction to the principles of iterators and iterable objects in ES6 (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.
ES6 new array methods, collections, for-of loops, spread operators (...) and even asynchronous programming all rely on iterator (Iterator) implementation. This article will explain in detail the iterators and generators of ES6, and further explore the internal principles and usage methods of iterable objects
1. The principles of iterators
Processing arrays in programming languages When using a loop statement or a collection, you must initialize a variable to record the iteration position, and using iterators programmatically can simplify this data operation.How to design an iterator?
The iterator itself is an object. This object has the next() method to return the result object. This result object has the next return value value and the iteration completion Boolean value done, which simulates the creation of a simple iterator. As follows:
function createIterator(iterms) { let i = 0 return { next() { let done = (i >= iterms.length) let value = !done ? iterms[i++] : undefined return { done, value } } } } let arrayIterator = createIterator([1, 2, 3]) console.log(arrayIterator.next()) // { done: false, value: 1 } console.log(arrayIterator.next()) // { done: false, value: 2 } console.log(arrayIterator.next()) // { done: false, value: 3 } console.log(arrayIterator.next()) // { done: true, value: undefined }If you are confused about the above syntax, you can refer to: Detailed explanation of the new functions and destructuring assignment of objects in ES6 (code examples)
Every time next() of the iterator is called, Return the next object until the data set is exhausted.
The rules for writing iterators in ES6 are similar, but generator objects are introduced to make it easier to create iterator objects
2. Create iterators
ES6 encapsulates a generator to create iterators. Obviously a generator is a function that returns an iterator, which is represented by an asterisk (*) after function, and uses the new internal special keyword yield to specify the return value of the iterator's next() method.
How to create an iterator using ES6 generator? A simple example is as follows:
function *createIterator() { yield 123; yield 'someValue' } let someIterator = createIterator() console.log(someIterator.next()) // { value: 123, done: false } console.log(someIterator.next()) // { value: 'someValue', done: false } console.log(someIterator.next()) // { value: undefined, done: true }
Use the yield keyword to return any value or expression, and you can add elements to the iterator in batches:
// let createIterator = function *(items) { // 生成器函数表达式 function *createIterator(items) { for (let i = 0; i <p>Since the generator itself is a function, it can be added into the object, and is used as follows: </p>One feature of the <pre class="brush:php;toolbar:false">let obj = { // createIterator: function *(items) { // ES5 *createIterator(items) { // ES6 for (let i = 0; i generator function is that the function will automatically stop execution after executing a yield statement, and the next() method of the iterator will be called again to continue executing the next yield statement. . <br>This ability to automatically terminate function execution has led to many advanced uses. <p><strong>3. Iterable objects</strong></p><p>The commonly used collection objects (arrays, Set/Map collections) and strings in ES6 are iterable objects, and these objects have default Iterators and the Symbol.iterator property. </p><p>The iterator created by the generator is also an iterable object, because the generator assigns a value to the Symbol.iterator property by default. </p><p><strong>3.1 Symbol.iterator</strong></p><p>Iterable objects have the Symbol.iterator property, that is, objects with the Symbol.iterator property have default iterators. </p><p>We can use Symbol.iterator to access the default iterator of an object, for example, for an array: </p><pre class="brush:php;toolbar:false">let list = [11, 22, 33] let iterator = list[Symbol.iterator]() console.log(iterator.next()) // { value: 11, done: false }
Symbol.iterator obtains the default iterator of the iterable object of the array and operates on it Iterates over the elements in the array.
On the contrary, we can use Symbol.iterator to detect whether the object is an iterable object:
function isIterator(obj) { return typeof obj[Symbol.iterator] === 'function' } console.log(isIterator([11, 22, 33])) // true console.log(isIterator('sometring')) // true console.log(isIterator(new Map())) // true console.log(isIterator(new Set())) // true console.log(isIterator(new WeakMap())) // false console.log(isIterator(new WeakSet())) // false
Obviously arrays, Set/Map collections, and strings are all iterable objects, and WeakSet/WeakMap Collections (weak reference collections) are not iterable.
3.2 Creating iterable objects
By default, custom objects are not iterable.
As mentioned just now, the iterator created by the generator is also an iterable object, and the generator will assign a value to the Symbol.iterator property by default.
So how to turn a custom object into an iterable object? By adding a generator to the Symbol.iterator property:
let collection = { items: [11,22,33], *[Symbol.iterator]() { for (let item of this.items){ yield item } } } console.log(isIterator(collection)) // true for (let item of collection){ console.log(item) // 11 22 33 }
The array items is an iterable object, and the collection object also becomes an iterable object by assigning a value to the Symbol.iterator property.
3.3 for-of
Notice that the last chestnut uses for-of instead of index loop. for-of is a new feature added by ES6 for iterable objects.
Think about the implementation principle of for-of loop.
For an iterable object using for-of, each time for-of is executed, it will call next() of the iterable object, and store the return result in a variable, and continue to execute until the iterable object The done attribute value is false.
// 迭代一个字符串 let str = 'somestring' for (let item of str){ console.log(item) // s o m e s t r i n g }
Essentially, for-of calls the Symbol.iterator property method of the str string to obtain the iterator (this process is completed by the JS engine), and then calls the next() method multiple times to store the object value in item variable.
Using for-of for non-iterable objects, null or undefined will report an error!3.4 Expansion operator (...)
ES6 syntax sugar expansion operator (...) also serves iterable objects, that is, it can only "expand" arrays, Collections, strings, custom iterable objects.
The following example outputs the results calculated by different iterable object expansion operators:
let str = 'somestring' console.log(...str) // s o m e s t r i n g let set = new Set([1, 2, 2, 5, 8, 8, 8, 9]) console.log(set) // Set { 1, 2, 5, 8, 9 } console.log(...set) // 1 2 5 8 9 let map = new Map([['name', 'jenny'], ['id', 123]]) console.log(map) // Map { 'name' => 'jenny', 'id' => 123 } console.log(...map) // [ 'name', 'jenny' ] [ 'id', 123 ] let num1 = [1, 2, 3], num2 = [7, 8, 9] console.log([...num1, ...num2]) // [ 1, 2, 3, 7, 8, 9 ] let udf console.log(...udf) // TypeError: undefined is not iterable
As can be seen from the above code, the expansion operator (...) can easily convert iterable objects is an array. Like for-of, the spread operator (...) will report an error when used on non-iterable objects, null or undefined!
4. Default iterator
ES6 为很多内置对象提供了默认的迭代器,只有当内建的迭代器不能满足需求时才自己创建迭代器。
ES6 的 三个集合对象:Set、Map、Array 都有默认的迭代器,常用的如values()方法、entries()方法都返回一个迭代器,其值区别如下:
entries():多个键值对
values():集合的值
keys():集合的键
调用以上方法都可以得到集合的迭代器,并使用for-of循环,示例如下:
/******** Map ***********/ let map = new Map([['name', 'jenny'], ['id', 123]]) for(let item of map.entries()){ console.log(item) // [ 'name', 'jenny' ] [ 'id', 123 ] } for(let item of map.keys()){ console.log(item) // name id } for (let item of map.values()) { console.log(item) // jenny 123 } /******** Set ***********/ let set = new Set([1, 4, 4, 5, 5, 5, 6, 6,]) for(let item of set.entries()){ console.log(item) // [ 1, 1 ] [ 4, 4 ] [ 5, 5 ] [ 6, 6 ] } /********* Array **********/ let array = [11, 22, 33] for(let item of array.entries()){ console.log(item) // [ 0, 11 ] [ 1, 22 ] [ 2, 33 ] }
此外 String 和 NodeList 类型都有默认的迭代器,虽然没有提供其它的方法,但可以用for-of循环
The above is the detailed content of Introduction to the principles of iterators and iterable objects in ES6 (with examples). For more information, please follow other related articles on the PHP Chinese website!

Vercel是什么?本篇文章带大家了解一下Vercel,并介绍一下在Vercel中部署 Node 服务的方法,希望对大家有所帮助!

node怎么爬取数据?下面本篇文章给大家分享一个node爬虫实例,聊聊利用node抓取小说章节的方法,希望对大家有所帮助!

本篇文章给大家分享一个Node实战,介绍一下使用Node.js和adb怎么开发一个手机备份小工具,希望对大家有所帮助!

在Java编程中,Iterator和Iterable接口是用于处理集合中元素的重要工具。Iterator接口提供了对集合元素进行迭代访问的方法,而Iterable接口则定义了集合的可迭代性,使集合中的元素可以通过Iterator访问。这两者的紧密配合,为我们提供了遍历集合元素的通用方法。Iterator接口Iterator接口定义了以下方法:booleanhasNext():检查集合中是否还有元素。Enext():返回集合中的下一个元素。voidremove():移除当前元素。Iterable接

本篇文章带大家聊聊Node.js中的path模块,介绍一下path的常见使用场景、执行机制,以及常用工具函数,希望对大家有所帮助!

Node.js 如何实现异步资源上下文共享?下面本篇文章给大家介绍一下Node实现异步资源上下文共享的方法,聊聊异步资源上下文共享对我们来说有什么用,希望对大家有所帮助!

概念差异:Iterator:Iterator是一个接口,代表一个从集合中获取值的迭代器。它提供了MoveNext()、Current()和Reset()等方法,允许你遍历集合中的元素,并对当前元素进行操作。Iterable:Iterable也是一个接口,代表一个可迭代的对象。它提供了Iterator()方法,用于返回一个Iterator对象,以便于遍历集合中的元素。使用方式:Iterator:要使用Iterator,需要先获得一个Iterator对象,然后调用MoveNext()方法来移动到下一


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Dreamweaver Mac version
Visual web development tools

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Zend Studio 13.0.1
Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 English version
Recommended: Win version, supports code prompts!
