"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"]

... 在不同的语境下，意味着不同的事情。在不同的上下文中，该属性的含义是不同的。... 数组中的文字与 ... 在一个对象 literal 中，它使用迭代来建立数组的条目。在数组文字中，正如你所说，它使用迭代来建立数组的条目，但在对象文字中却不是这样。... 在对象 literal 中，是 财产分布，在ES2018中加入。它完全不依赖迭代；相反，它使用了一个内部操作，叫做 [[OwnPropertyKeys]] 找到要从源对象复制的属性键，然后复制它们（这是在 CopyDataProperties 内部操作）。)

Answer 2

Javascript函数是对象，你要传播函数（对象）的属性。

你可以取函数，然后像这样添加一个值。

someFunction.hello = 'world';
console.log(someFunction.hello);