JavaScript 的 of 关键字
最后修改于 2025 年 4 月 16 日
在本文中，我们将展示如何在 JavaScript 的 for...of 循环中使用 of 关键字来迭代可迭代对象。
of 关键字
of 关键字用于 for...of 循环中，以迭代可迭代对象。与传统的 for 循环相比，它在处理集合时提供了更简洁的语法。
for...of 语句创建一个循环，迭代可迭代对象，包括数组、字符串、Map、Set 和其他类似数组的对象。它是在 ES6 (ECMAScript 2015) 中引入的。
与迭代属性名称的 for...in 不同，for...of 迭代属性值。这使其非常适合直接处理集合的值。
使用数组的基本 for...of 循环
以下示例演示了 for...of 在数组中的基本用法。
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
console.log(fruit);
}
此循环迭代 fruits 数组中的每个元素。fruit 变量依次获取每个数组元素的值。这比使用索引变量的传统 for 循环更简单。
$ node main.js apple banana cherry
迭代字符串
for...of 循环也可以逐个字符地迭代字符串。
const message = 'Hello';
for (const char of message) {
console.log(char);
}
此示例展示了如何单独处理字符串中的每个字符。char 变量依次保存每个字符。与使用传统 for 循环的字符串索引相比，这更具可读性。
$ node main.js H e l l o
处理 Map 对象
for...of 适用于 Map 对象，允许迭代键值对。
const colors = new Map();
colors.set('red', '#FF0000');
colors.set('green', '#00FF00');
colors.set('blue', '#0000FF');
for (const [name, hex] of colors) {
console.log(`${name}: ${hex}`);
}
在这里，我们在循环中使用数组解构来从每个 Map 条目中解包键和值。for...of 循环提供了一种简洁的方式来迭代 Map 集合。
$ node main.js red: #FF0000 green: #00FF00 blue: #0000FF
迭代 Set 对象
也可以使用 for...of 迭代 Set 对象，因为它们是可迭代对象。
const uniqueNumbers = new Set([1, 2, 3, 2, 1]);
for (const num of uniqueNumbers) {
console.log(num);
}
此示例演示了如何迭代 Set 的唯一值。该循环会自动处理 Set 的唯一性属性。仅处理唯一值，即使原始数组中存在重复项也是如此。
$ node main.js 1 2 3
与 arguments 对象一起使用
for...of 循环可以迭代函数中的 arguments 对象。
function sumAll() {
let total = 0;
for (const num of arguments) {
total += num;
}
return total;
}
console.log(sumAll(1, 2, 3, 4));
在这里，我们使用 for...of 来处理传递给函数的所有参数。arguments 对象是类似数组且可迭代的。这提供了一种简洁的方式来处理可变数量的参数。
$ node main.js 10
使用 for...of 循环中断迭代
可以使用 break 和 continue 语句来控制 for...of 循环。
const numbers = [1, 2, 3, 4, 5, 6];
for (const num of numbers) {
if (num > 4) {
break;
}
console.log(num);
}
此示例展示了如何使用 break 提前退出 for...of 循环。当遇到大于 4 的数字时，循环停止。这表明 for...of 循环支持正常的循环控制语句。
$ node main.js 1 2 3 4
迭代 NodeList 对象
for...of 适用于处理由 querySelectorAll 等方法返回的 DOM NodeList 对象。
// Assuming HTML with <div class="box">Box 1</div><div class="box">Box 2</div>
const boxes = document.querySelectorAll('.box');
for (const box of boxes) {
console.log(box.textContent);
}
此示例展示了如何迭代在 NodeList 中收集的 DOM 元素。对于 DOM 操作，与传统的 forEach 或索引循环等方法相比，for...of 循环提供了一种更简洁的替代方案。
$ node main.js Box 1 Box 2
来源
在本文中，我们已经演示了如何在 for...of 循环中使用 of 关键字来迭代 JavaScript 中的各种可迭代对象。