JS教程
JS版本
JS HTML DOM
JS Web API
JS AJAX
JS JSON
JS vs jQuery
JS参考手册
JavaScript
for..of 循环
for..of 语句用于遍历可迭代对象的元素。
语法
for (variable of iterable) {
// 要执行的代码块
}
迭代
迭代很容易理解。
它只是意味着遍历一系列元素。
下面是一些简单的例子：
- 遍历字符串
- 遍历数组
遍历字符串
可以使用 for..of 循环遍历字符串的元素：
实例
const name = "W3School";
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) {
// 要执行的代码块
}
运行实例 »点击 "运行实例" 按钮查看在线实例
遍历 Set
可以使用 for..of 循环遍历 Set 的元素：
实例
const letters = new Set(["a","b","c"]);
for (const x of letters) {
// 要执行的代码块
}
运行实例 »点击 "运行实例" 按钮查看在线实例
注释：我们将在后续章节中详细介绍 Set 和 Map。
遍历 Map
可以使用 for..of 循环遍历 Map 的元素：
实例
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
for (const x of fruits) {
// 要执行的代码块
}
运行实例 »点击 "运行实例" 按钮查看在线实例
JavaScript 迭代器
迭代器协议定义了如何从对象中生成一系列值。
当对象实现了 next() 方法时，它就成为迭代器。
next() 方法必须返回一包含两个属性的对象：
- value（下一个值）
- done（true 或 false）
| value |
迭代器返回的值。 如果 done 为 true，则可以省略。 |
| done |
如果迭代器已完成，则为 true。 如果迭代器生成了新值，则为 false。 |
注意：
从技术上讲，可迭代对象必须实现 Symbol.iterator 方法。
字符串、数组、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 语句。
支持 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;
// 任意代码
}
运行实例 »点击 "运行实例" 按钮查看在线实例
相关视频
24小时阅读榜
精品课程
共22课时
24.4万人学习
共28课时
36.2万人学习
共89课时
133.2万人学习
热门下载
集成PHP7，16种组合，超全大合集
下载
phpStudy安装所需运行库集合下载
下载
程序员工具箱 v1.0 php集成环境
下载
中文版，非常好用
下载
Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。
下载
Win64位，支持php多版本共存
下载