[...obj]和{...obj}之间的差异

Question

我知道...在JavaScript中的传播操作符。我们可以在数组和对象上使用它：

​

let user = {
  name: "aman",
  rollno: 11
}

let newobj1 = {...user}
let newobj2 = [...user]
console.log(newobj1)
console.log(newobj2)

​

为什么newobj2会给出一个错误，TypeError: user is not iterable，但是newobj1工作得很好？

Answer 1

{...user}只创建一个新对象，其属性与user相同。

另一方面，[...user]遍历对象并将它找到的值添加到它返回的数组中。如果没有迭代的方法，因为默认情况下在普通对象(相对于数组)上没有迭代，那么这将不起作用，并引发您引用的错误。

与往常一样，在MDN上有更多关于这方面的信息。特别要注意的是，下面是部分：

扩展语法(在扩展属性的情况下除外)只能应用于像Array这样的可迭代对象，或者使用迭代函数，如map()、reduce()和assign()。 许多对象是不可迭代的，包括Object： 让obj ={‘key1 1’：'value1'}；让数组= ...obj；// TypeError: obj不可迭代 要对这些对象使用扩展语法，您需要提供一个迭代器函数。

请注意，这里所指的“扩展语法”是“数组扩展”版本。“对象传播”非常不同，并在页面的这部分进行了解释，

Answer 2

{...user}

这意味着您创建了新的对象，并在其中传播了来自user的所有数据。

当你打算执行

...user

您尝试创建全新的数组，然后将user对象扩展到内部。