JavaScript中的扩展语法出现意外行为?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (86)

我正在尝试传播语法,并且在特定情况下难以理解其行为。

在一个例子中,当我使用:

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的第二个示例中,将其分解为不同的索引元素?由于艺术数组中只有一个项目我会假设结果是相同的。

提问于
用户回答回答于

在第一个代码中,您将传播一个包含一个项目的数组,即第零个索引处的字符串:

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

一切都如预期。但是在第二个代码中,你.map首先调用数组,然后传播提供给函数的第一个参数.map - 传播的项不是数组,而是数组包含的项,在本例中是串。展开字符串时,您将获得与每个字符索引处的值匹配的属性:

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

他们是完全不同的情况。

用户回答回答于
                                 const art = ["hello"]

在上面的例子中,你试图传播数组。所以它会给你以下输出:

                                 [ { '0': 'hello' } ]

现在您尝试执行以下操作

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

所以你在这里使用了地图。Map是一个需要一个数组元素并将mapper应用于它的东西。在您的情况下,您的映射器将传播给定的元素。所以现在它将传播你已经过去的元素。所以你得到的输出为:

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

扫码关注云+社区

领取腾讯云代金券