JavaScript 中传播语法的意外行为

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，其中包含一个项目，第 0 个索引处的字符串：

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

一切如期而至。但是在第二个代码中，您首先在数组上调用 .map，然后然后传播第一个 argument 提供给 .map 函数 - 传播的项目不是数组，而是数组 包含的项目 ，在本例中，它是一个字符串。传播字符串时，您将获得与每个字符索引处的值匹配的属性：

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 }))

所以你在这里使用了地图。 Map 是一种获取数组的一个元素并将映射器应用于它的东西。在您的情况下，您的映射器将传播给定的元素。所以现在它会传播你已经通过的元素。所以你得到的输出是：

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

Unexpected behavior from the spread syntax in JavaScript