在按钮单击上设置状态后，离子反应承诺不等待

Question

星星包含在<p>标签中：{ Array(rating).fill().map((_, i) => ( <p>⭐</p> )) }因此，它会给出与评级参数接受的星数一样多的输出，但是如何呢？例如，我们给出评级3值，它将***作为输出给出。

Answer 1

一步步：

1. Array(rating)创建一个空元素数组rating，因此如果ratingis 3，则Array(rating)返回[empty, empty, empty]。

2. [empty, empty, empty].fill()返回[undefined, undefined, undefined]，因为在 JavaScript 中，不能为map()空值。这是 JavaScript 中有点奇怪的部分，但它就是这样。

3. 现在，[undefined, undefined, undefined].map((_, i) => ( <p>⭐</p> ))将您的数组转换为[<p>⭐</p>, <p>⭐</p>, <p>⭐</p>]，这不是有效的 JavaScript，但我假设您正在使用 React 和 JSX。它将被编译为 HTML 段落元素数组，每个元素的文本都带有 ⭐。

当您使用带有像这样的大括号内的表达式的 JSX 时，它将成为您的输出。

因此，此代码片段将输出<p>⭐</p><p>⭐</p><p>⭐</p>或任意数量的段落，具体取决于rating值。

Answer 2

让我们一步一步来。node通过在终端中打开控制台来跟踪您的计算机可能会有所帮助。

将整数 ( rating) 转换为数组将返回一个长度为rating-length 的数组。

> Array(5)

[ <5 empty items> ]

如果rating是 5，我们现在有一个长度为 5 的数组，但这还没有那么有用，因为数组长度在 Node 中是动态的。

我们称其.fill()为一个方法，它将用您传递的任何内容填充数组中的所有条目。在本例中，我们没有传递任何内容，因此它是未定义的：

> Array(5).fill()

[ undefined, undefined, undefined, undefined, undefined ]

接下来，我们调用this函数map，该函数创建一个新数组，其中填充了对调用数组中每个元素调用所提供函数的结果。

在您的示例中，我们正在创建一个带有两个参数的新匿名函数。当map在数组上调用时，第一个参数是数组中项目的索引（我们不使用它，因此在这种情况下，我们用下划线指示该参数未使用_）。第二个参数是该数组中的实际项目（正如我们之前所说，所有 5 个项目都未定义）。

因此，新创建的数组 frommap被填充为rating-length ，其中包含<p>标签封装的星形表情符号

> let rating = 5

undefined

> Array(rating).fill().map((_, i) => ( '<p>⭐</p>' ))

[ '<p>⭐</p>', '<p>⭐</p>', '<p>⭐</p>', '<p>⭐</p>', '<p>⭐</p>' ]