"Uncaught TypeError: function is not iterable" using ... in [], but in {} it works...?

Question

考虑这个简单的例子：

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

现在

const myArr = [...someFunction];

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

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

是正确的实现方式。

然而，

const myObj = {...someFunction};

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

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

Answer 1

Javascript函数是对象，你散布了函数（对象）的属性。

您可以使用该函数并添加一个值，如下所示：

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

Answer 2

你的 {...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]] to find the keys of the properties to copy from the source object, then copies them (this is in the CopyDataProperties 内部操作的内部操作。

"Uncaught TypeError: function is not iterable" using ... in [], but in {} it works...?

"Uncaught TypeError: function is not iterable" using ... in [], but in {} it works...?

javascript

function

ecmascript-6

iterable