在以前，我们使用 for 循环来遍历集合，比如数组和对象。但是，ES6 中的 for...of 循环可以更加方便和简洁地遍历集合。在这篇文章中，我们将探讨 for...of 循环的用法和一些技巧，帮助读者更好地理解和应用它。
for...of 的用法
for...of 循环的语法类似于 for 循环，但是可以用来遍历集合，比如数组、字符串、元素等。我们可以将 for...of 循环用于任何可迭代的对象，即那些可以像数组一样访问它们的元素的对象。
下面是 for...of 循环的语法：
for (variable of iterable) {
// code block to be executed
}其中，variable 是每一个迭代中的值，iterable 是可迭代的对象。使用 for...of 循环的时候，每一个迭代会将 iterable 中的值赋值给 variable，直到遍历完整个集合。
for...of 的优点
相比较于传统的 for 循环和 forEach 函数，for...of 循环有以下几个优点：
- 可以避免传统 for 循环中的索引错误，如越界、跳过、重复等。
- 可以遍历任何可迭代的对象，包括字符串、数组、集合等。
- 可以在循环体内直接访问迭代器的值，而不需要通过索引或者元素来访问。
for...of 的示例
下面让我们通过一些示例来深入理解 for...of 循环的用法和优点。
遍历字符串
for...of 循环可以遍历字符串中的每一个字符，如下面的例子所示：
const str = 'hello world';
for (const char of str) {
console.log(char);
}这个例子会输出字符串 hello world 中的每一个字符，即：
-- -------------------- ---- ------- - - - - - - - - - -
遍历数组
for...of 循环可以遍历数组中的每一个元素，如下面的例子所示：
const arr = [1, 2, 3];
for (const num of arr) {
console.log(num);
}这个例子会输出数组 [1, 2, 3] 中的每一个元素，即：
1 2 3
遍历 Map 对象
for...of 循环可以遍历 Map 对象中的每一个条目，如下面的例子所示：
const map = new Map();
map.set(1, 'one');
map.set(2, 'two');
map.set(3, 'three');
for (const [key, value] of map) {
console.log(`${key} = ${value}`);
}这个例子会输出 Map 对象 {1=>'one', 2=>'two', 3=>'three'} 中的每一个条目，即：
1 = one 2 = two 3 = three
遍历 Set 对象
for...of 循环可以遍历 Set 对象中的每一个元素，如下面的例子所示：
const set = new Set();
set.add(1);
set.add(2);
set.add(3);
for (const num of set) {
console.log(num);
}这个例子会输出 Set 对象 {1, 2, 3} 中的每一个元素，即：
1 2 3
for...of 的注意事项
虽然 for...of 循环有很多优点，但是在使用的时候也需要注意以下几点：
- for...of 循环只能遍历可迭代的对象，即那些可以像数组一样访问它们的元素的对象。
- for...of 循环无法得到迭代器的索引值，因此如果需要访问数组中的索引，需要在循环中手动处理。
- for...of 循环无法在循环中添加、删除、更新数组中的元素，否则会导致迭代错误。
总结
通过本文的介绍，我们可以看出 for...of 循环在遍历对象时更加优秀和简洁。它可以避免一些传统 for 循环中的错误，更加便捷地访问元素以及支持遍历任何可迭代的对象。当我们需要遍历集合时，使用 for...of 循环是一种更加优雅的方式。希望读者可以通过本文的介绍，更好地理解和应用 for...of 循环。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64818d9048841e989410711f