在前端开发中，我们常常需要使用循环语句来操作数组或类数组对象。其中比较常用的就是 for-of 循环，它可以遍历任何可迭代对象的元素。
然而，在使用 for-of 循环时，您可能会遇到一些兼容性问题。例如，一些浏览器（比如旧版 IE）可能不支持 for-of 循环语句。这时，可以使用 Babel 转译器来解决这些问题。
本文将介绍如何使用 Babel 对 for-of 循环进行转译，以及如何处理 for-of 循环中的默认迭代器和自定义迭代器。
Babel 转译 for-of 循环
Babel 是一个 JavaScript 转译器，可以将 ECMAScript 2015+ 的代码转换成兼容性更好的代码。其中一个常见的应用场景就是将 for-of 循环转换成常规的 for 循环。
例如，下面的代码使用了 for-of 循环来遍历数组：
const array = ['a', 'b', 'c']; for (const item of array) { console.log(item); }
使用 Babel 将其转换成常规的 for 循环代码：
-- -------------------- ---- ------- ---- -------- --- ----- - ----- ---- ----- --- ---- --------- - ---------------- ------ ------- - ------------------------ - --- ----------- - --------------------------- --- ----- - --------------- ---- - --------------- ------------------ -展开代码
可以看到，Babel 将 for-of 循环转换成了使用 entries() 方法生成的迭代器来遍历数组，并使用常规的 for 循环语句来实现。
处理默认迭代器
当我们使用 for-of 循环时，默认情况下会使用对象的 @@iterator 迭代器来实现遍历。例如，对于一个数组对象，它的@@iterator 迭代器就是 entries() 方法。
然而，有些类数组对象（比如 NodeList）并没有默认的迭代器，因此不能直接使用 for-of 循环来遍历它们。这时，我们需要手动指定迭代器。
例如，下面的代码使用 for-of 循环来遍历一个 NodeList 对象：
const nodeList = document.querySelectorAll('div'); for (const node of nodeList) { console.log(node); }
由于 NodeList 没有 @@iterator 迭代器，这段代码执行时会报错。我们可以手动指定迭代器，让其使用 entries() 方法：
const nodeList = document.querySelectorAll('div'); for (const [index, node] of Array.from(nodeList.entries())) { console.log(node); }
这里使用了 Array.from() 方法将 NodeList 转换成了数组对象，然后再使用 entries() 方法生成迭代器。这样就可以在 for-of 循环中使用解构语法来遍历 NodeList 了。
处理自定义迭代器
除了默认的迭代器外，我们还可以定义自己的迭代器。例如，下面的代码定义了一个自定义的迭代器，用来生成随机数：
-- -------------------- ---- ------- ----- ---------- - - ------------------ -------- -- - ------ - ----- -------- -- - ------ - ----- ------ ------ ------------- -- - -- - -- --- ------ ----- -- ----------- - ------------------- -展开代码
这里通过定义 [Symbol.iterator] 符号属性，实现了自定义迭代器。在 for-of 循环中使用自定义迭代器，可以对任意类型的数据进行遍历。
然而，在一些浏览器中，自定义迭代器可能会有一些兼容性问题。对于这些情况，我们可以使用 Babel 来转换代码，以确保脚本的兼容性。
下面的示例代码中，定义了一个自定义的迭代器，用来遍历文本节点中的单词：
-- -------------------- ---- ------- ----- ----------- - ----------- ----- ----- - ----------------- - --------- - ----- - ------------------- - --- ------ ------ - ----- -- -- - ----- - ---------------------------- -- ------- - ------ - ----- ------ ------ -------- -- - ---- - ------ - ----- ---- -- - - -- - - --- ------ ---- -- --- ------------ -------- - ------------------ -展开代码
在使用 Babel 进行转译之前，这段代码可能无法在一些浏览器中执行。使用 Babel 将其转译后，就可以在任意浏览器中使用了：
-- -------------------- ---- ------- ---- -------- --- -------------------------- - ------------------------------------------------------------ --- ---------------------- - -------------------------------------------------------- --- -------- - ----------------------------------------------------------------- --- ----------- - ----------- --- ----- - --------------------- -- - -------- ----------- - --------- - ----- - --- ------ - ---------------- ----------------------- - -------- -- - --- ------ ------ - ----- -------- ------ - ----- - ---------------------------- -- ------- - ------ - ----- ------ ------ -------- -- - ---- - ------ - ----- ---- -- - - -- -- ------ ------ ---- --- --------- - ------------------------------ ------------ --------- ------ --- - --- --------------- ------- - --------------------- - --- ---- - ------------ ------------------ - - ----- ----- - ----------------- - ------- - -------------- -展开代码
可以看到，Babel 将自定义迭代器的相关代码进行了转换，使用 @babel/runtime/helpers/createForOfIteratorHelper() 方法来消除浏览器中可能存在的兼容性问题。
总结
使用 for-of 循环时，可能会遇到一些兼容性问题，特别是在遍历一些非默认迭代器对象时。这时，可以使用 Babel 转换器来解决这些问题。在转换前，需要了解迭代器的用法和注意事项，以确保转换后的代码能够正确地运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6489251248841e9894771d3c
