“未捕获的 TypeError：函数不可迭代”在 [] 中使用 ...，但在 中它可以工作...？

Posted 2023-02-23

【中文标题】“未捕获的 TypeError：函数不可迭代”在 [] 中使用 ...，但在 中它可以工作...？

【英文标题】："Uncaught TypeError: function is not iterable" using ... in [], but in it works...?“未捕获的 TypeError：函数不可迭代”在 [] 中使用 ...，但在 中它可以工作...？

【发布时间】：2020-09-13 03:28:03

【问题描述】：

考虑这个简单的例子：

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

现在

const myArr = [...someFunction];

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

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

是正确的实现。

然而，

const myObj = ...someFunction;

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

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

【问题讨论】：

好问题！！

【参考方案1】：

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

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

const obj = ...someFunction;

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

... 在不同的上下文中表示不同的东西。数组文字中的 ... 与对象文字中的 ... 不同。正如您所说，在数组文字中，它使用迭代来为数组构建条目，但在对象文字中并非如此。对象文字中的... 是 property spread，在 ES2018 中添加。它根本不依赖迭代；相反，它使用称为[[OwnPropertyKeys]] 的内部操作来查找要从源对象复制的属性的键，然后复制它们（这是在CopyDataProperties 内部操作中）。

【参考方案2】：

javascript 函数是对象，您可以传播函数（对象）属性。

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

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