"Uncaught TypeError: function is not iterable" 在 [] 中使用 ...，但在 {} 中它有效......？

Question

考虑这个简单的例子：

const someFunction = () => [1, 2, 3];

现在

const myArr = [...someFunction];

给出了一个运行时错误，这是可以理解的，因为函数是不可迭代的。所以

const myArr = [...someFunction()];

是正确的实现。

然而，

const myObj = {...someFunction};

导致{}并且不会导致相同的错误。

请帮助我理解这种行为以及为什么最后一种情况不会导致相同的错误。

Answer 1

您的{...someFunction}工作是因为函数是对象，并且...在对象文字中旨在处理对象，而不是可迭代对象：它采用自己的可枚举属性并将它们放入正在创建的对象中。默认情况下，函数没有任何自己的可枚举属性，因此您将获得一个空对象，但是如果您向函数添加了一个属性，然后...在对象字面量中使用，该属性将被复制到新对象：

const someFunction = () => [1, 2, 3];
someFunction.myProperty = "foo";

const obj = {...someFunction};

console.log(obj.myProperty);   // "foo"
console.log(Object.keys(obj)); // ["myProperty"]

...在不同的上下文中意味着不同的事物。所述...阵列中的文字是来自不同...对象中的文字。在数组文字中，如您所说，它使用迭代来构建数组的条目，但在对象文字中则不然。...在对象字面量中是属性 spread，在 ES2018 中添加。它根本不依赖迭代；相反，它使用称为[[OwnPropertyKeys]]的内部操作来查找要从源对象复制的属性的键，然后复制它们（这是在CopyDataProperties内部操作中）。