在前端开发中，我们经常会遇到 TypeError：undefined is not iterable 的错误，这通常是由于在对未定义的变量进行迭代操作时引起的。本文将介绍如何避免这个问题，并提供一些示例代码来帮助你更好地理解。
什么是迭代器？
在 JavaScript 中，迭代器是一种对象，它提供了一种访问集合中每个元素的方法，而不需要暴露集合的内部实现。迭代器可以用于数组、Set、Map 等集合类型。
迭代器通常有两个方法：next() 和 return()。next() 方法返回一个对象，表示迭代器的下一个元素。如果迭代器已经到达了结尾，则返回一个具有 done 属性为 true 的对象。return() 方法用于终止迭代器的执行。
以下是一个简单的迭代器示例：
// javascriptcn.com 代码示例
function createIterator(array) {
let index = 0;
return {
next: function() {
return index < array.length ?
{ value: array[index++], done: false } :
{ done: true };
},
return: function() {
console.log('Iterator has been terminated');
return { done: true };
}
};
}
const iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { done: true }当我们尝试对未定义的变量进行迭代操作时，就会出现 TypeError：undefined is not iterable 的错误。这通常会发生在以下情况下：
- 对
undefined进行迭代操作。 - 对
null进行迭代操作。 - 对数字或字符串进行迭代操作。
为了避免这个问题，我们应该在进行迭代操作之前，检查变量是否已经定义。以下是一个示例代码：
// javascriptcn.com 代码示例
const arr = [1, 2, 3];
let iterator;
if (arr && typeof arr[Symbol.iterator] === 'function') {
iterator = arr[Symbol.iterator]();
}
if (iterator) {
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { done: true }
}在上面的代码中，我们首先检查 arr 是否已定义，并且是否具有 Symbol.iterator 方法。如果是，则创建一个迭代器并将其分配给 iterator 变量。最后，我们使用 if 语句检查 iterator 是否已定义，并且执行迭代器的 next() 方法。
总结
在 JavaScript 中，迭代器是一种访问集合中每个元素的方法，而不需要暴露集合的内部实现。当我们尝试对未定义的变量进行迭代操作时，就会出现 TypeError：undefined is not iterable 的错误。为了避免这个问题，我们应该在进行迭代操作之前，检查变量是否已经定义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6507c0c795b1f8cacd2ff78b