在前端开发中，遍历算法是非常常见的技术之一，而在 ES6 中，我们可以使用 for...of 循环来遍历数组、字符串、Map、Set 等可迭代对象，相较于传统的 for 循环，for...of 有助于减少内存开销，并简化编写过程，同时可以提高代码可读性，降低系统复杂度。
ES6 for...of 的基本语法
for...of 对于数组、可迭代对象进行迭代遍历，其基本语法如下：
for (let iterable of iterables) {
// code block to be executed
}iterable 可为数组、Set、Map、Arguments 对象等可迭代对象，而其中的 for...of 循环语句会在每个迭代中按顺序提取 iterable 内的元素，并将其赋值给变量 iterable，使代码执行更加简洁和易读。
与传统的 for 循环不同，for...of 不需声明索引或属性名，以及不需要通过索引或属性名访问元素，直接迭代值即可。
for...of 与 for 循环的比较
为了更好地理解“for...of 较传统 for 循环的优势”，我们可以通过比较两种遍历方法，如下所示：
-- -------------------- ---- ------- --- --- - --- -- -- -- --- -- --- -- --- ---- - - -- - - ----------- ---- - -------------------- - -- -------- -- --- ---- ------- -- ---- - --------------------- -
相较于传统的 for 循环，for...of 循环不需要声明索引，也无需用索引来访问元素，只需直接遍历元素本身即可，在循环中的内存开销更少，系统复杂度更低。
此外，for...of 常用于对 Set、Map 的遍历，而 for 循环需要使用迭代器 iterator 实现，较为繁琐。
for...of 与 forEach() 方法的比较
for...of 循环与 forEach() 方法是两种遍历数组的方式，而它们之间存在一些差异。
forEach() 方法是 ES5 中添加的迭代器方法，意为“对数组的每个元素运行提供的函数”，从语法上看，forEach() 方法是注重方法调用，而 for...of 是注重迭代过程的。
此外，传统的 for 写法以及 forEach() 方法只能中断循环，而 for...of 可以使用 break 和 continue 语句中断或跳过循环，更加灵活。
遍历 Set 与 Map
Set 和 Map 是常见的可迭代对象，利用 for...of 循环遍历 Set 和 Map 也是非常方便的。
对于 Set，其元素是唯一的，而且可以添加、删除和遍历，使用 for...of 循环可以轻松遍历每个元素：
let mySet = new Set([1, 2, 3, 4, 5]);
for (let item of mySet) {
console.log(item);
}对于 Map，其元素由键值对组成，使用 for...of 循环需要结合 Map 的 entries() 方法来遍历。 entries() 方法将 Map 对象转化为由键值对组成的数组，其中键值对表示为 [key, value]，如下所示：
let myMap = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (let [key, value] of myMap.entries()) {
console.log(key, value);
}利用 for...of 提高代码可读性和可维护性
在实际开发中，使用 for 循环遍历数组通常代码量较大，难以维护，而由于 for...of 循环简洁易读，可读性更强，也更容易维护。
比如，我们可以用 for 循环和 for...of 循环分别实现数组求和，两者差异如下：
-- -------------------- ---- ------- --- --- - --- -- -- -- --- --- --- - -- -- --- ---- --- ---- - - -- - - ----------- ---- - --- -- ------- - ----------------- -- -- -- -- -------- ---- --- ---- ------- -- ---- - --- -- -------- - ----------------- -- -- --
可以看到，由于 for...of 循环更加灵活，代码也更清晰，能够优化代码和提升开发效率。
实战应用：遍历 DOM 节点
除了遍历数组、Set、Map 等可迭代对象，for...of 循环也可以用来遍历 DOM 节点。
比如，我们可以遍历一个 div 元素下的所有 p 标签元素并进行样式设置，如下所示：
let myDiv = document.querySelector('.my-div');
let paras = myDiv.querySelectorAll('p');
for (let para of paras) {
para.style.color = 'red';
}可以看到，利用 for...of 循环遍历 DOM 节点很容易实现，并能够简化代码的复杂度。
总结
通过本文的讲解，相信您对于 for...of 循环的语法、优势、应用以及实战方法都有了更加深入的了解。
总的来说，相较于传统的 for 循环和 forEach() 方法，for...of 循环在内存开销和系统复杂度方面都有了很大的提升，可读性和可维护性也更好，因此在实际开发中，使用 for...of 循环进行迭代遍历也是非常值得尝试的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5a3ebf6b2d6eab3114226