在 JavaScript 中，循环是经常用到的语句之一。而 ES6 引入的 for of 循环给我们提供了一种更加高效和简洁的循环方式。在本文中，我们将深入理解 ES6 中的 for of 循环，并且学会如何使用它。
ES6 中的 for of 循环
for of 循环是 ES6 新引入的循环语句，它可以用来遍历可迭代对象（iterable objects），例如数组、字符串、类数组、Map 和 Set 等。与传统的 for 循环和 for in 循环不同，for of 循环更加简洁和直观。下面是一个 for of 循环的示例：
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}这个示例遍历了一个数组，并且打印出了数组中的每一个元素。与传统的 for 循环和 for in 循环相比，这个代码更加简洁和易于理解。
for of 循环不仅可以遍历数组，还可以遍历其他可迭代对象。下面是一些示例：
-- -------------------- ---- ------- ----- --- - ------- -------- --- ------ ---- -- ---- - ------------------ - ----- --- - --- ---------- --- ----- --- ----- ----- --- ------ ----- ------ -- ---- - -------------------- ----------- -
这些示例展示了如何使用 for of 循环遍历字符串和 Map 对象。在字符串示例中，我们遍历了字符串的每一个字符，并且打印出来。在 Map 示例中，我们使用了解构语法来获取键值对。
需要注意的是，for of 循环只能用来遍历可迭代对象，如果尝试遍历一个非可迭代对象，会抛出异常。
for of 循环与其他循环的区别
在深入理解 for of 循环之前，需要了解一下它与其他循环的主要区别。下面是一些区别：
- for 循环：for 循环是传统的循环语句，可以遍历数组或其他可迭代对象。for 循环的特点是灵活性大，在循环中可以执行任何语句，例如条件语句、函数调用等等。但是，它的语法比较繁琐，容易出错。
- for in 循环：for in 循环用来遍历 JavaScript 对象的属性名，并且通常不用来遍历数组和其他可迭代对象。for in 循环的特点是遍历对象属性非常方便，但是对于数组等可迭代对象效率不高，而且可能出现属性名的无序遍历。
- forEach 循环：forEach 循环是 ES5 引入的数组方法，用来遍历数组。forEach 循环的特点是代码简洁，但是功能比较有限，不能用来遍历非数组对象。
for of 循环具有下面的优点：
- 语法简洁：for of 循环不需要写数组下标或者属性名，语法比传统的 for 循环和 for in 循环简洁。
- 遍历效率高：for of 循环是基于迭代器（iterator）实现的，遍历效率比 for in 循环高，并且支持 break 和 continue 语句。
- 支持任意可迭代对象：for of 循环支持遍历多种可迭代对象，包括数组、字符串、Map、Set 等等。
for of 循环的底层实现
虽然 for of 循环比较简洁和高效，但是底层实现比较复杂。在这里，我们简单介绍一下 for of 循环的底层原理。
for of 循环的遍历过程是基于迭代器（iterator）实现的。迭代器是一种统一的接口，用来遍历可迭代对象。在 JavaScript 中，迭代器对象必须包含一个 next 方法，callable（可被调用）并返回一个对象，该对象具有两个属性：value 和 done。value 表示迭代器当前返回的值，done 表示迭代是否结束，如果结束，则为 true。下面是一个迭代器的示例：
const arr = [1, 2, 3];
const iter = arr[Symbol.iterator]();
console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { value: undefined, done: true }在这个示例中，我们调用了 arrSymbol.iterator 方法获取了一个迭代器对象，并且使用 next 方法遍历了数组的每一个元素。
for of 循环的底层实现与迭代器密切相关。具体来说，for of 循环在遍历可迭代对象时，会自动调用该对象的迭代器对象，并且使用 next 方法遍历元素。如果迭代器的 done 属性为 true，则停止遍历。下面是一个 for of 循环的底层实现示例：
-- -------------------- ---- -------
----- --- - --- -- ---
--- ------ ---- -- ---- -
------------------
-
-- ---
----- ---- - -----------------------
----- ------ -
----- - ------ ---- - - ------------
-- ------ -
------
-
-------------------
-在这个示例中，我们手动实现了一个 for of 循环的迭代器实现方式。首先，我们获取了数组的迭代器对象，然后不断调用 next 方法遍历数组元素，直到 done 为 true 表示遍历结束。
使用 for of 循环的注意事项
最后，我们介绍一些使用 for of 循环时需要注意的事项：
- for of 循环只能遍历可迭代对象，如果尝试遍历一个非可迭代对象，会抛出异常。
- for of 循环的循环变量是一个临时变量，不能修改迭代的对象。
- for of 循环可以使用 break 和 continue 语句，跳出循环或者跳过某个元素。
- for of 循环的本质是基于迭代器实现的，如果要使用 for of 循环遍历自定义对象，需要手动实现迭代器接口。
总结
在本文中，我们深入理解了 ES6 中的 for of 循环。我们了解了 for of 循环的语法和底层实现，以及它与其他循环的主要区别。最后，我们着重强调了使用 for of 循环的注意事项，并且给出了一些示例代码。相信读者在掌握了本文中的知识后，能够更加熟练地使用 for of 循环来遍历可迭代对象，并且提高代码的效率和简洁度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a67df748841e98943204a8