前端必知必会-JavaScript 迭代器

文章目录

• JavaScript 可迭代对象
• • For Of 循环
  • 迭代
  • 对字符串进行迭代
  • 遍历数组
  • 遍历集合
  • 在 Map 上进行迭代
  • JavaScript 迭代器
  • 自制可迭代对象
• 总结

JavaScript 可迭代对象

可迭代对象是可迭代对象（如数组）。

可以使用简单高效的代码访问可迭代对象。

可以使用 for…of 循环对可迭代对象进行迭代

For Of 循环

JavaScript for…of 语句循环遍历可迭代对象的元素。

语法

for (variable of iterable) {
  // code block to be executed
}

迭代

迭代很容易理解。

它只是意味着循环遍历一系列元素。

以下是一些简单的例子：
对字符串进行迭代
对数组进行迭代

对字符串进行迭代

您可以使用 for…of 循环对字符串的元素进行迭代：

示例

const name = "john";

for (const x of name) {
// 要执行的代码块
}

遍历数组

您可以使用 for…of 循环遍历数组的元素：

示例 1

const letters = ["a","b","c"];

for (const x of letters) {
// 要执行的代码块
}

示例 2

const numbers = [2,4,6,8];

for (const x of numbers) {
// 要执行的代码块
}

遍历集合

您可以使用 for…of 循环遍历集合的元素：

示例

const letters = new Set(["a","b","c"]);

for (const x of letters) {
// 要执行的代码块
}

注意
集合和映射将在下一章中介绍。

在 Map 上进行迭代

您可以使用 for…of 循环在 Map 的元素上进行迭代：

示例

const fruit = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);

for (const x of fruit) {
// 要执行的代码块
}

JavaScript 迭代器

迭代器协议定义如何从对象生成一系列值。

当对象实现 next() 方法时，它将成为迭代器。

next() 方法必须返回具有两个属性的对象：

value（下一个值）
done（true 或 false）

注意
从技术上讲，可迭代对象必须实现 Symbol.iterator 方法。

String、Array、TypedArray、Map 和 Set 都是可迭代对象，因为它们的原型对象具有 Symbol.iterator 方法。

自制可迭代对象

此可迭代对象每次调用 next() 时都会返回永无止境的结果：10、20、30、40、…

示例

// 自制可迭代对象
function myNumbers() {
let n = 0;
return {
next: function() {
n += 10;
return {value:n, done:false};
}
};
}

// 创建可迭代对象
const n = myNumbers();
n.next(); // 返回 10
n.next(); // 返回 20
n.next(); // 返回 30

自制可迭代对象的问题：

它不支持 JavaScript for…of 语句。

JavaScript 可迭代对象是具有 Symbol.iterator 的对象。

Symbol.iterator 是一个返回 next() 函数的函数。

可以使用以下代码对可迭代对象进行迭代：for (const x of iterable) { }

示例

// 创建对象
myNumbers = {};

// 使其可迭代
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}

现在您可以使用 for…of

for (const num of myNumbers) {
// 此处的任何代码
}

Symbol.iterator 方法由 for…of 自动调用。

但我们也可以“手动”执行：

示例

let iterator = myNumbers[Symbol.iterator]();

while (true) {
const result = iterator.next();
if (result.done) break;
// 此处任意代码
}

总结

本文介绍了JavaScript 迭代器的使用，如有问题欢迎私信和评论