前言
ECMAScript 2015（简称 ES6）带来了许多新特性，其中一个特性就是 for...of 循环。相比于 for...in 循环，for...of 循环有许多的优势，并且能够处理更多的数据类型。本文将详细介绍 for...of 循环的语法、特性以及应用场景。
for...of 循环的语法
for...of 循环的语法格式如下：
for (variable of iterable) {
// code block to be executed
}其中，variable 指的是变量名，iterable 可以是一个数组、一个字符串、一个 Set、一个 Map 或者一个类数组对象等，表示要迭代的对象。迭代器是一种对象，它定义了一个标准的方式来访问可迭代对象中的每个元素。
for...of 循环的特性
for...of 循环可以遍历一个集合并访问它的每一个元素。
for...of 循环可以处理任何可迭代对象，而不仅仅是数组。
for...of 循环可以使用 break 和 continue 控制循环过程。
for...of 循环可以使用解构来分离值。
for...of 循环的变量是一个局部变量，循环结束后不会被保存。
for...of 循环的应用场景
- 遍历数组
for...of 循环可以遍历数组并访问每一个元素。例如：
// javascriptcn.com 代码示例
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}
// Output:
// 1
// 2
// 3- 遍历字符串
for...of 循环可以遍历字符串并访问每一个字符。例如：
// javascriptcn.com 代码示例
const str = "Hello, world!";
for (const char of str) {
console.log(char);
}
// Output:
// "H"
// "e"
// "l"
// "l"
// "o"
// ","
// " "
// "w"
// "o"
// "r"
// "l"
// "d"
// "!"- 遍历 Set 和 Map
for...of 循环可以遍历 Set 和 Map，并访问每一个值。例如：
// javascriptcn.com 代码示例
const set = new Set([1, 2, 3]);
for (const item of set) {
console.log(item);
}
// Output:
// 1
// 2
// 3
const map = new Map([[1, "one"], [2, "two"], [3, "three"]]);
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
// Output:
// 1: one
// 2: two
// 3: three- 遍历类数组对象
for...of 循环可以遍历类数组对象，例如 Arguments 对象。例如：
// javascriptcn.com 代码示例
function foo() {
for (const arg of arguments) {
console.log(arg);
}
}
foo(1, 2, 3);
// Output:
// 1
// 2
// 3总结
通过本文的介绍，我们了解了 for...of 循环的语法、特性以及应用场景。for...of 循环可以处理多种类型的数据，提高代码的可读性，并标准化遍历的方式。在实际开发中，合理使用 for...of 循环能够提高我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6531f1ae7d4982a6eb40531f