JavaScript 迭代器

2025 年 3 月 18 日 | 阅读 7 分钟

JavaScript 迭代器用于通过对象或模式导航列表或集合。迭代器通过以下 () 方法使用，该方法返回一个带有值的对象。这是为了实现迭代器协议，该协议定义并返回序列。迭代器序列的下一个值包含在 value 中，done 条件是布尔形式的 true 或 false。根据序列的最后一个值是否已被提取，其值为 true 或 false。

我们可以确定实体是否是自动可迭代的。我们可以查看其原型来确定它是否具有 Symbol(Symbol.iterator) 方法的可能性。

我们可以在 Array.prototype 中找到 Symbol(Symbol.iterator): values() 方法。数组可以默认迭代。此外，由于它们每个原型对象都有一个 Symbol.iterator() 方法，因此 String、Map 和 Set 都是内置可迭代对象。

for 循环的问题

for 循环使用变量来跟踪排名数组的索引。每次循环运行时，可迭代变量的值都会增加，并且该值始终低于排名数组中元素的总数。

当一个循环嵌套在另一个循环内时，使用 JavaScript 循环会增加系统的复杂性。此外，在循环内管理多个变量时，很容易出错。

示例

为了降低传统循环的复杂性并避免因记住循环索引而产生的错误，ES6 引入了一种新的循环结构，称为“for...of”循环。

示例 1： 以下示例展示了带有数字数组的 JavaScript 可迭代对象。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables to know for loop issues </h2>
</p>
<script>
// Create an Object of the array
let datas = ['Aaa', 'Bbb', 'Ccc', 'Dd', 'Ee'];
for (let a = 0; a < datas.length; a++) {
console.log(datas[a]);
}
</script>
</body>
</html>

输出

可迭代函数在循环中显示数字。

示例 2

以下示例展示了带有变量的 for 循环。在这里，我们可以为信息每次使用一个循环。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables to know for loop issues </h2>
<p id="demo_val"></p>
<script>
// Create a String to work as an array
const name_val = "javatpoint";
// List all Elements of the string
let text_val = ""
for (const x of name_val) {
text_val += x + "<br>";
}
document.getElementById("demo_val").innerHTML = text_val;
</script>
</body>
</html>

输出

可迭代函数在循环中显示数字。

迭代过程

JavaScript 为数据结构提供了迭代协议。在此协议中使用的 for...of 循环指定了如何迭代数据实体直到完成。

该协议的概念可以分为

JavaScript 中的可迭代对象
JavaScript 中的迭代器

根据可迭代协议，可迭代对象必须包含 Symbol.iterator 键。

JavaScript 中的可迭代对象

具有 Symbol.iterator() 方法的数据结构称为可迭代对象。数组、字符串、集合等是一些示例。

当一个对象实现一个提供以下两种响应的接口（或 API）时，它就被称为迭代器。

是否还有一部分？
如果有，具体是什么元素？

迭代器的技术定义是具有 next() 方法的对象，该方法会生成一个具有以下两个属性的对象

Done：一个布尔值，表示是否还有更多元素可供迭代。当前元素被用作可迭代对象的 value。

JavaScript 中的迭代器

Symbol.iterator() 方法返回一个称为迭代器的对象。
迭代器协议的 next() 方法允许一次访问可迭代对象（数据结构）的每个元素。

示例

以下示例展示了数组的数字和字符数据的基本可迭代性。

示例 1： 以下示例展示了带有数字数组的 JavaScript 可迭代对象。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using Symbol(Symbol.iterator).
</p>
<p id = "demo_value">
</p>
<script>
// Create an Object of the array
my_value = {};
// Make it Iterable
my_value[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n1 += 15;
if (n1 == 150) {done = true}
return {value:n1, done:done};
}
};
}
let text_value = ""
for (const num_value of my_value) {
text_value += num_value +"<br>"
}
document.getElementById("demo_value").innerHTML = text_value;
</script>
</body>
</html>

输出

可迭代函数在循环中显示数字。

示例 2： 以下示例展示了使用 next() 方法的数字数组的 JavaScript 可迭代对象。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using the next method ().
</p>
<p id = "demo_value">
</p>
<script>
// Iterable method and value
function my_Numbers() {
let n1 = 0;
return {
next: function() {
n1 += 20;
return {value:n1, done:false};
}
};
}
// Create Iterable
const n1 = my_Numbers();
n1.next(); // 20
n1.next(); // 40
n1.next(); // 60
//output: 80
document.getElementById("demo_value").innerHTML = n1.next().value;
</script>
</body>
</html>

输出

可迭代函数在循环中显示数据。

示例 3： 以下示例展示了使用 Symbol(Symbol.iterator) 方法的数字数组的 JavaScript 可迭代对象。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using Symbol(Symbol.iterator).
</p>
<p id = "demo_value">
</p>
<script>
// Create an Object of the array
my_value = {};
// Make it Iterable of the array
my_value [Symbol.ite rator] = function() {
let n1 = 0;
done = false;
return {
next() {
n1 += 30;
if (n1 == 200) {done = true}
return {value:n1, done:done};
}
};
}

let text_value = ""
for (const num_value of my_value) {
text_value  += num_value +"<br>"
}
console.log(text_value);
</script>
</body>
</html>

输出

可迭代函数在循环中显示数据。

可迭代参数的功能

您无需为 Array、Set 和 Map 组类型开发迭代器，因为 ES6 已经内置了它们。

该程序构建了一个数组对象，该对象返回一个介于 (start, finish) 之间的数字集合，每个数字之间都有一个间隔。

示例

示例展示了可迭代参数函数的过程。

示例 1： 该示例展示了带有可迭代函数的特定信息数组。第一个值是初始值，最后一个是结束值，第三个是数组中可迭代的增量值。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using Symbol(Symbol.iterator).
</p>
<p id = "demo_value">
</p>
<script>
// Create an Object of the array
class Seq_fun {
constructor( start = 0, end = Infinity, interval = 1 ) {
this.start = start;
this.end = end;
this.interval = interval;
}
[Symbol.iterator]() {
let counter = 0;
let nextIndex = this.start;
return  {
next: () => {
if ( nextIndex <= this.end ) {
let result = { value: nextIndex,  done: false }
nextIndex += this.interval;
counter++;
return result;
}
return { value: counter, done: true };
}
}
}
};
let evenNumbers = new Seq_fun(1, 20, 4);
for (const num of evenNumbers) {
console.log(num);
document.getElementById("demo_value").innerHTML = "please See the Console tab";
}
</script>
</body>
</html>

输出

可迭代函数在循环中显示数据。

示例 2： 该示例展示了带有可迭代函数的特定信息数组。第一个值是初始值，最后一个是结束值，第三个是数组中可迭代的增量值。它使用 next() 和 symbol.iterable() 方法处理数值数据。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using Symbol(Symbol.iterator).
</p>
<p id = "demo_value">
</p>
<script>
// Create an Object of the array
class Seq_fun {
constructor( start = 0, end = Infinity, interval = 1 ) {
this.start = start;
this.end = end;
this.interval = interval;
}
[Symbol.iterator]() {
let counter = 0;
let nextIndex = this.start;
return  {
next: () => {
if ( nextIndex <= this.end ) {
let result = { value: nextIndex,  done: false }
nextIndex += this.interval;
counter++;
return result;
}
return { value: counter, done: true };
}
}
}
};
let evenNumbers = new Seq_fun(5, 100, 25);
let iterator = evenNumbers[Symbol.iterator]();
let result = iterator.next();
while( !result.done ) {
console.log(result.value);
result = iterator.next();
}
</script>
</body>
</html>

输出

可迭代函数在循环中显示数据。

清理可迭代对象

除了 next() 方法外，[Symbol.iterator]() 还可以选择性地返回 return() 函数。

当循环过早终止时，会立即调用 return() 方法。程序在此处实现清理所有资产的逻辑。

示例： 该示例展示了带有可迭代函数的特定信息数组。迭代完值后，我们可以清理 for 循环。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Iterables </h2>
<p> We can determine whether the entity is automatically iterable using Symbol(Symbol.iterator).
</p>
<p id = "demo_value">
</p>
<script>
// Create an Object of the array
class Seq_fun {
constructor( start = 0, end = Infinity, interval = 1 ) {
this.start = start;
this.end = end;
this.interval = interval;
}
[Symbol.iterator]() {
let counter = 0;
let nextIndex = this.start;
return  {
next: () => {
if ( nextIndex <= this.end ) {
let result = { value: nextIndex,  done: false }
nextIndex += this.interval;
counter++;
return result;
}
return { value: counter, done: true };
},
return: () => {
console.log('cleaning up...');
return { value: undefined, done: true };
}
}
}
}
let odd_Numbers = new Seq_fun(11, 20, 2);
for (const num of odd_Numbers) {
if( num > 7 ) {
break;
}
console.log(num);
}
</script>
</body>
</html>

输出

可迭代函数在循环中显示带清理的数据。

结论

JavaScript 迭代器展示了函数、循环、参数和其他工作流程。它消除了循环及其编码的复杂性。

下一主题JavaScript 中搜索数组的不同方法

JavaScript 迭代器

for 循环的问题

迭代过程

JavaScript 中的可迭代对象

JavaScript 中的迭代器

可迭代参数的功能

清理可迭代对象

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 迭代器

for 循环的问题

迭代过程

JavaScript 中的可迭代对象

JavaScript 中的迭代器

可迭代参数的功能

清理可迭代对象

结论

相关帖子

计算 JavaScript 中的中位数

JavaScript 压缩图像

JavaScript 初学者练习

JavaScript 中的二分查找

Jasmine JavaScript

JavaScript Maximum Call Stack Size exceeded

Array JavaScript API

JavaScript 在线运行器

Javascript 练习 Hackerrank

如何检查 JavaScript 中的空字符串