search
HomeWeb Front-endJS TutorialIntroduction to the principles of iterators and iterable objects in ES6 (with examples)

Introduction to the principles of iterators and iterable objects in ES6 (with examples)

Oct 29, 2018 pm 03:34 PM
es6iteratorjavascriptnode.jsBuilderIterator

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!

Statement
This article is reproduced at:segmentfault. If there is any infringement, please contact admin@php.cn delete
From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

The Role of C/C   in JavaScript Interpreters and CompilersThe Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript in Action: Real-World Examples and ProjectsJavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

JavaScript and the Web: Core Functionality and Use CasesJavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsUnderstanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UsePython vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesPython vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software