[...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]

您尝试创建全新的数组，然后将 user 对象散布在其中。

Answer 2

{...user} 只是创建一个与 user.

具有相同属性的新对象另一方面，

[...user] 遍历对象并将找到的值添加到数组 returns 中。如果没有办法进行迭代，因为默认情况下没有普通对象（而不是数组），那么这将不起作用并引发您引用的错误。

一如既往，MDN. Note in particular the following 部分提供了更多相关信息：

Spread syntax (other than in the case of spread properties) can only be applied to iterable objects like Array, or with iterating functions such as map(), reduce(), and assign().

Many objects are not iterable, including Object:
let obj = {'key1': 'value1'};
let array = [...obj]; // TypeError: obj is not iterable
To use spread syntax with these objects, you will need to provide an iterator function.

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

[...obj] 和 {...obj} 之间的区别

Difference between [...obj] and {...obj}

javascript

object-destructuring