前言
随着前端技术的不断发展，JavaScript 的语法也在不断演进。在 ES6 中，我们已经可以通过 let 和 const 定义块级作用域的变量；通过箭头函数和模板字符串等语法糖，提升了代码的可读性和可维护性。而在 ES7 中，迭代器和 for...of 循环成为了新的语法特性，使得循环结构变得更加灵活和实用。本文会详细讲解这两个特性的用法和指导意义，并提供代码示例，帮助读者更好地理解和掌握这两种语法。
迭代器
在 ES6 中，我们已经可以用 for...of 循环来遍历数组和类数组对象。但是，在遍历一些自定义对象时，我们需要手动给对象添加 next 方法，才能实现迭代循环。而在 ES7 中，可以通过 Symbol.iterator 和 yield 来定义迭代器对象，使得我们可以轻松遍历自定义对象。
原理
在 JavaScript 中，有一种机制叫做迭代器（iterator），它是一种访问集合元素的方式，可以用于遍历集合中的每一个元素。迭代器对象必须要实现 next 方法，当执行该方法时，返回一个对象，对象中包含两个属性：value 和 done。其中，value 属性是当前迭代的元素，done 属性是一个布尔值，表示迭代是否已经结束。
在 ES7 中，我们可以通过 Symbol.iterator 来定义一个迭代器对象。Symbol.iterator 是一个内置的 Symbol 值，对应着对象的默认迭代器方法。我们可以在自定义对象中实现该方法，将对象变成可迭代的。具体实现方法如下：
-- -------------------- ---- -------
----- ---------- -
------------- -
--------- - --- -- ---
---------- - --
-
------ -
-- ----------- - ----------------- -
------ -
------ ------------------------
----- -----
--
- ---- -
------ -
------ ----------
----- ----
--
-
-
------------------- -
------ -----
-
-
--- -- - --- -------------
--- ---- ----- -- --- -
-------------------
-
-- --------上面的代码中，我们定义了一个 MyIterator 类，该类包含 data 和 index 两个属性。data 属性存储了要遍历的元素，index 属性指向当前迭代到的位置。next 方法实现了迭代器的具体逻辑，每次调用该方法都会返回一个带有 value 和 done 属性的对象。当 index 小于 data.length 时，value 属性表示当前迭代的元素，done 属性为 false，表示迭代还未结束。当 index 等于 data.length 时，value 属性为 undefined，done 属性为 true，表示迭代已经结束。
为了让该类支持 for...of 循环，我们还需要实现 Symbol.iterator 方法。该方法返回 this，表示该对象本身就是迭代器对象。这样，我们就可以使用 for...of 循环来遍历 MyIterator 类的实例了。
案例
下面，我们将通过一个案例来演示如何使用迭代器遍历一个自定义集合：
-- -------------------- ---- -------
----- ----- -
------------------ ---- -
---------- - ------
-------- - ----
-
-------------------- -
--- ---- - - ----------- - -- --------- ---- -
----- --
-
-
-
--- ---- --- -- --- -------- --- -
-----------------
-
-- ----- -- -- -- -上面的代码中，我们定义了一个 Range 类，该类表示一个数值范围。该类实现了一个 Symbol.iterator 方法，该方法使用 yield 语句来依次生成数值范围中的数字。由于 yield 语句会将迭代器暂停，等待下一次调用才会继续向下执行，因此该方法可以快速生成大量数据，而不会导致内存溢出等问题。通过 for...of 循环遍历 Range 类的实例时，会依次输出数值范围中的数字。
for...of 循环
在 ES7 中，for...of 循环成为了新的语法特性，它可以让我们以一种更加方便、简洁的方式遍历可迭代对象。该语法结构类似于 for...in 循环，不同的是，for...of 循环遍历的是可迭代对象的元素，而不是对象的属性。
原理
在 ES6 中，for...of 循环可以用来遍历数组和类数组对象。在 ES7 中，该语法扩展了可迭代协议，可以遍历任何实现了迭代器接口的对象，包括字符串、Map、Set、生成器等，甚至可以遍历自定义的可迭代对象。
在 for...of 循环中，循环语句会在每次迭代时调用迭代器对象的 next 方法，返回的元素值被赋值给循环变量。当迭代完成或者遇到 break、throw、return 等语句时，循环会立即终止。具体用法如下：
let arr = [1, 2, 3];
for (let value of arr) {
console.log(value);
}
// 输出：1，2，3上面的代码中，我们使用 for...of 循环遍历了一个数组，循环变量 value 依次取到数组中的每一个元素。与传统的 for 循环相比，for...of 循环语法更加简洁，结构更加清晰。另外，由于不需要手动管理下标和起始位置，因此可以避免一些常见的错误和逻辑问题。
案例
下面，我们将通过一个案例来演示如何使用 for...of 循环遍历一个类数组对象：
let els = document.querySelectorAll('div');
for (let el of els) {
el.classList.add('active');
}上面的代码中，我们使用 querySelectorAll 方法获取了页面中的所有 div 元素，并将其保存在一个类数组对象 els 中。接着，通过 for...of 循环遍历 els，并为每一个元素添加 active 类名，实现了一种快速批量修改元素样式的操作。通过 for...of 循环，我们可以遍历任何可迭代对象，并使用简洁的语法进行快速遍历和操作。
总结
本文介绍了 ES7 中的迭代器和 for...of 循环语法，并提供了详细的代码示例。迭代器和 for...of 循环为 JavaScript 带来了更加灵活和实用的循环结构，使得我们可以快速遍历任何可迭代对象。通过学习本文的内容，读者可以更好地理解和掌握这两种语法的用法和指导意义。同时，我们也应该注意到，为了充分发挥迭代器和 for...of 循环的功能，需要我们对于 JavaScript 的基本语法和面向对象特性有一定的掌握和理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2a41f48841e9894f186f5