在 ES6 中，JavaScript 引入了 Spread 运算符 ...，它可以将一个可迭代对象（如数组或字符串）“展开”成一个个独立的元素，方便我们进行数据操作。ES8 中，Spread 运算符还可以用于对象，可以将对象的属性“展开”到另一个对象中。但是，在实际的开发中，我们可能会遇到 Spread 运算符使用时报错的问题。本文将详细介绍这个问题的原因以及解决方法。
问题描述
考虑以下代码：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
上面的代码展示了 Spread 运算符在数组中的使用方法，它可以将两个数组连接起来，形成一个新的数组。这段代码正常运行，没有出现错误。但是，如果我们尝试将 Spread 运算符用于对象，情况就会有所不同。考虑以下代码：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3);上面的代码用到了 Spread 运算符，将两个对象合并成一个新的对象。如果你运行这段代码，你会得到一个类似这样的错误信息：
Uncaught TypeError: Found non-callable @@iterator
这个错误信息并不是很容易理解，但它意味着什么呢？接下来我们将深入探讨这个问题。
问题解析
问题的根源在于 JavaScript 引擎如何处理对象。在 ES6 中，JavaScript 提供了一个新的类型叫做可迭代对象。可迭代对象是一种可以被迭代的值，比如数组和字符串。当我们使用 Spread 运算符将一个可迭代对象“展开”，实际上是将它转换成一个迭代器。
迭代器是一种可以顺序访问值的对象。在对象被视为可迭代对象时，JavaScript 引擎会尝试获取该对象的迭代器。如果对象没有实现一个 Symbol.iterator 的方法，该对象就不是一个可迭代对象，JavaScript 引擎也无法对该对象进行迭代操作。
对于对象而言，与数组和字符串不同，它们没有一个默认的迭代器行为。因此，在我们使用 Spread 运算符时，我们需要在对象上手动指定一个 Symbol.iterator 的方法，以将其转换为迭代器。这就是在对象上使用 Spread 运算符出现报错的原因所在。
解决方法
为了解决这个问题，我们必须手动为对象指定一个迭代器行为。有两种方法可以实现这个目的。
方法一：使用 Object.entries()
Object.entries() 方法返回一个由对象自身的可枚举属性键值对组成的数组，数组中的每个元素都是一个包含两个元素的数组，第一个元素是属性名，第二个元素是属性值。可以将 Object.entries() 的返回值作为参数传递给 Map 构造函数，将其转换为一个 Map 对象，然后使用 Map 对象的迭代器即可。
以下代码演示了如何使用 Object.entries()：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = new Map([...Object.entries(obj1), ...Object.entries(obj2)]);
console.log(Object.fromEntries(obj3));在上面的代码中，我们使用了 Object.entries() 将对象转换为一个数组，将两个数组使用 Spread 运算符连接在一起，然后使用 Map 构造函数将它们转换为一个 Map 对象。最后，我们将 Map 对象转换回对象，即可得到两个对象的合并结果。
方法二：手动添加 Symbol.iterator 属性
除了使用 Object.entries()，我们还可以手动为对象添加 Symbol.iterator 属性。这个属性的值应该是一个返回迭代器的函数。以下代码演示了如何手动为对象添加 Symbol.iterator 属性：
-- -------------------- ---- -------
----- ---- - - -- -- -- - --
----- ---- - - -- -- -- - --
--------------------- - --------- -- -
--- ---- --- -- ------------------ -
----- ----- -----------
-
--
--------------------- - --------- -- -
--- ---- --- -- ------------------ -
----- ----- -----------
-
--
----- ---- - - -------- ------- --
------------------在上面的代码中，我们定义了两个对象的迭代器函数，使用 Symbol.iterator 属性将它们与对象进行绑定。然后，我们可以将这两个对象使用 Spread 运算符连接在一起，形成一个新的对象，输出结果即可。
总结
在 ES8 中，Spread 运算符不仅可以用于数组，还可以用于对象。当我们使用 Spread 运算符对对象进行操作时，如果对该对象没有指定一个迭代器行为，JavaScript 引擎会抛出一个错误。我们可以使用 Object.entries() 或手动添加 Symbol.iterator 属性的方式解决这个问题。当我们理解 Spread 运算符的原理后，这个问题并不难解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d056f3b5eee0b52574d49c