解决在 ECMAScript 2021 中使用 for-of 循环时出现的报错-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2021 是 JavaScript 的最新版本之一，引入了许多新的语言特性和功能，其中包括 for-of 循环。for-of 循环是一种遍历数组和类数组对象的方式，使得代码可以更加简洁和易读。然而，在实践中，使用 for-of 循环时可能会出现一些报错。本文将介绍为什么会出现这些报错，以及如何解决它们。

for-of 循环的语法

for-of 循环的语法非常简单。下面是一个简单的例子：

const arr = [1, 2, 3];

for (const elem of arr) {
  console.log(elem);
}

这个例子中，我们使用 for-of 循环遍历了一个数组，并打印了每个元素的值。for-of 循环的语法是这样的：

for (const elem of iterable) {
  // do something with elem
}

其中，iterable 是一个可迭代的对象，例如数组、类数组对象或生成器对象。elem 是 iterable 中的每个元素的值。

报错分析

使用 for-of 循环时，可能会出现以下两种报错：

TypeError: undefined is not a function

当遍历的对象不是一个可迭代的对象时，会出现 "TypeError: undefined is not a function" 的报错。例如：

for (const elem of 5) {
  console.log(elem);
}

这段代码会抛出 "TypeError: undefined is not a function" 的错误。

TypeError: iterable[Symbol.iterator] is not a function

当遍历的对象是一个可迭代的对象，但是这个对象不包含 Symbol.iterator 的属性时，会出现 "TypeError: iterable[Symbol.iterator] is not a function" 的报错。例如：

const obj = { a: 1, b: 2, c: 3 };

for (const elem of obj) {
  console.log(elem);
}

这段代码会抛出 "TypeError: obj[Symbol.iterator] is not a function" 的错误。

解决方案

为了解决以上报错，我们需要确保遍历的对象是一个可迭代的对象，并且这个对象包含 Symbol.iterator 的属性。

使用数组解决第一个报错

如果我们想遍历一个数字范围，我们可以使用数组来替代它。例如：

for (const elem of [0, 1, 2, 3, 4]) {
  console.log(elem);
}

这样可以避免 "TypeError: undefined is not a function" 的错误。

实现可迭代的对象

对于自定义的对象，我们需要手动实现 Symbol.iterator 方法，以便使对象成为一个可迭代的对象。下面是一个简单的例子：

-- -------------------- ---- -------
----- --- - -
  ----- --- -- ---
  ------------------ ---------- -
    --- ----- - --
    ----- ---- - ----------
    ----- ------ - ------------

    ------ -
      ----- ---------- -
        ----- ---- - ----- -- -------
        ----- ----- - ---- - --------- - --------------

        ------ - ------ ---- --
      -
    --
  -
--

--- ------ ---- -- ---- -
  ------------------
-

这段代码中，我们手动为 obj 对象实现了 Symbol.iterator 方法，使它成为了一个可迭代的对象。这样就可以避免 "TypeError: iterable[Symbol.iterator] is not a function" 的错误。

结论

for-of 循环是 ECMAScript 2021 中引入的一个新特性，它使代码更加简洁易读。然而，在使用 for-of 循环时可能会出现两种报错。为了避免这些报错，我们需要确保遍历的对象是一个可迭代的对象，并且这个对象包含 Symbol.iterator 的属性。如果遍历的对象不是一个可迭代的对象，我们可以使用数组来替代它。如果遍历的对象是一个自定义的对象，我们需要手动实现 Symbol.iterator 方法，以便使对象成为一个可迭代的对象。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/670dc8be5f551281025e63f3