在 ES6 中，迭代器是一个新的概念，它允许我们按照一定的顺序遍历一个集合中的元素，例如数组、字符串、Map、Set 等等。迭代器提供了一个标准的方式来访问集合中的元素，并且可以通过 for...of 循环来遍历集合中的元素。然而，早期的浏览器并不支持 ES6 的迭代器，因此我们需要使用 Babel 来将 ES6 代码转换为 ES5 代码，从而实现对迭代器的支持。
Babel 支持迭代器的方式
Babel 通过插件的方式来支持迭代器。我们可以使用 @babel/plugin-transform-iterator 插件将 ES6 的迭代器转换为 ES5 的代码。该插件可以将 for...of 循环转换为普通的 for 循环，并且可以将集合对象的 Symbol.iterator 属性转换为一个普通的函数。
安装和配置 Babel 插件
首先，我们需要安装 @babel/plugin-transform-iterator 插件。可以使用以下命令来安装：
npm install --save-dev @babel/plugin-transform-iterator
安装完成后，我们需要在 .babelrc 文件中配置该插件：
{
"plugins": ["@babel/plugin-transform-iterator"]
}示例代码
接下来，让我们来看一个简单的示例代码。假设我们有一个数组，我们想要通过 for...of 循环来遍历这个数组并打印每个元素的值。我们可以使用以下代码：
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}该代码可以正常运行在支持 ES6 的浏览器中。但是，如果我们想要在早期的浏览器中运行该代码，我们需要使用 Babel 将其转换为 ES5 的代码。我们可以使用以下代码：
const arr = [1, 2, 3];
for (var _iterator = arr[Symbol.iterator](), _step; !(_step = _iterator.next()).done;) {
var item = _step.value;
console.log(item);
}可以看到，Babel 将 for...of 循环转换为了一个普通的 for 循环，并且将集合对象的 Symbol.iterator 属性转换为了一个普通的函数。这样，我们就可以在早期的浏览器中运行该代码了。
总结
通过使用 Babel 插件 @babel/plugin-transform-iterator，我们可以将 ES6 的迭代器转换为 ES5 的代码，从而实现对迭代器的支持。该插件可以将 for...of 循环转换为普通的 for 循环，并且可以将集合对象的 Symbol.iterator 属性转换为一个普通的函数。这样，我们就可以在早期的浏览器中使用迭代器了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65725cc1d2f5e1655db3a559