Question

我正在尝试spread syntax，并且在特定情况下很难从其行为中合理地理解。

在一种情况下，当我使用：

const art = ["hello"]
console.log( [{...art}] )

the return value is 
=> [ { '0': 'hello' } ]

但是，当我遍历单个数组的值时，会产生完全不同的效果：

const art2 = art.map((item) => ({ ...item }))
console.log(art2)
=> [ { '0': 'h', '1': 'e', '2': 'l', '3': 'l', '4': 'o' } ]

为什么在第一个示例中使用扩展语法仅将其与单个索引结合使用，而在第二个示例中使用.map则将其分解为不同的索引元素？由于在art数组中只有一个项目，因此我假设结果将是相同的。

Answer 1

在第一个代码中，您正在传播一个 array ，其中包含一个项目，即在第零个索引处的字符串：

console.log({ ...["hello"] });

所有操作均符合预期。但是在第二个代码中，您首先在数组上调用.map，然后然后扩展提供给.map函数的第一个 argument -被散布的项目不是数组，但是数组包含的项目（在这种情况下为字符串）。散布字符串时，将获得与每个字符索引处的值匹配的属性：

console.log(['hello'].map((item) => ({ ...item })))
// same as:
console.log({ ...'hello' });

它们是完全不同的情况。

Answer 2

两个结果均符合预期。

在第一种情况下，您要将整个数组传递给散布运算符

const art = ["hello"]
console.log( [{...art}] )

因此spread operator立即应用于整个数组。

在第二种情况下，首先您要使用.map() 迭代该数组，即您要选择每个item并将那个item传递给spread operator 。

const art2 = art.map((item) => ({ ...item }))
console.log(art2)

因此spread operator应用于每个项目。

Answer 3

                                 const art = ["hello"]

在上述情况下，您尝试扩展阵列。因此，它将为您提供以下输出：

                                 [ { '0': 'hello' } ]

现在您尝试执行以下命令

                        const art2 = art.map((item) => ({ ...item }))

所以您在这里使用过地图。映射是采用数组的一个元素并将映射器应用于它的东西。在您的情况下，您的映射器将散布给定的元素。因此，现在它将传播您已通过的元素。所以您得到的输出为：

                  [ { '0': 'h', '1': 'e', '2': 'l', '3': 'l', '4': 'o' } ]