如何处理使用 ECMAScript 2018 的 Array.from() 方法时出现的错误？
在 JavaScript 开发中，ECMAScript 2018 的 Array.from() 方法常常被开发者用于将类数组对象或可迭代对象转化为数组。然而，有些开发者在使用该方法时会遇到以下类似的错误：
TypeError: Cannot spread non-iterable object
TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
这些错误的出现原因是由于传递给 Array.from() 方法的参数不是可迭代对象。因此，在使用 Array.from() 方法时需要注意数据类型，只能传递可迭代对象，例如 数组、字符串、Set、Map 等。如果传递的不是可迭代对象，则需要进行类型转换。
以下是一些解决方案：
- 使用传统的 for 循环进行类型转换
当我们需要将类数组对象转化为数组时，可以使用传统的 for 循环和 push() 方法进行类型转换。
let arrLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
let arr = [];
for (let i = 0; i < arrLike.length; i++) {
arr.push(arrLike[i]);
}
console.log(arr); // ['a', 'b', 'c']当需要将一个类数组对象转化为一个 Set 对象时，可以使用下面的方法：
let set = new Set();
for (let i = 0; i < arrLike.length; i++) {
set.add(arrLike[i]);
}
console.log(set); // Set(3) { 'a', 'b', 'c' }当然，对于字符串等类型也可以使用同样的方法进行类型转换。不过这种方式有些冗余，当数据量比较大时也会效率比较低。
- 自定义迭代器
在 ECMAScript 6 之后，我们可以自定义迭代器，以将一个普通对象转化为可迭代对象。这样，我们就可以在这个对象上使用 Array.from() 方法进行转化了。
-- -------------------- ---- -------
--- -------------- - -
------------------ --------- -- -
----- --
----- --
----- --
-
--
--- --- - ---------------------------
---------------- -- --- -- --以上代码中，我们定义了一个对象 customIterable，通过定义 [Symbol.iterator] 方法来生成一个迭代器。该迭代器使用 generator 语法实现，生成了连续的三个数。最后，我们可以使用 Array.from() 方法将该迭代器转化为数组。
- 使用 Array.from() 的第二个参数
在 ECMAScript 2018 中，Array.from() 方法提供了第二个参数，用于指定在生成数组元素时的映射函数。
例如，我们可以使用 Array.from() 方法将字符串转化为数组，同时使用 map() 映射函数将每个字符转化为对应的 ASCII 码。
let str = 'abc';
let arr = Array.from(str, function(char) {
return char.charCodeAt(0);
});
console.log(arr); // [97, 98, 99]以上代码中，我们传递了两个参数给 Array.from() 方法，第一个是需要转化为数组的字符串，第二个是映射函数，该函数将每个字符转化为对应的 ASCII 码。最终，我们得到了一个 ASCII 码数组。
总结
在 JavaScript 开发中，使用 ECMAScript 2018 中的 Array.from() 方法可以大大简化代码逻辑，提高开发效率。但是，在使用 Array.from() 方法时需要注意数据类型，只能传递可迭代对象，否则会出现错误。如果传递的不是可迭代对象，则可以使用传统的 for 循环进行类型转换，也可以自定义迭代器，或者使用 Array.from() 的第二个参数进行映射处理。
如果你在 ECMAScript 2018 中使用 Array.from() 方法遇到了错误，请结合上述解决方案进行排查和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651797f795b1f8cacdfc4975