星星包含在<p>标签中：{ Array(rating).fill().map((_, i) => ( <p>⭐</p> )) }因此，它会给出与评级参数接受的星数一样多的输出，但是如何呢？例如，我们给出评级3值，它将***作为输出给出。
2 回答
月关宝盒
TA贡献1772条经验 获得超5个赞
一步步：
Array(rating)创建一个空元素数组rating，因此如果ratingis3，则Array(rating)返回[empty, empty, empty]。[empty, empty, empty].fill()返回[undefined, undefined, undefined]，因为在 JavaScript 中，不能为map()空值。这是 JavaScript 中有点奇怪的部分，但它就是这样。现在，
[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值。
当年话下
TA贡献1890条经验 获得超9个赞
让我们一步一步来。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>' ]
添加回答
举报
0/150
提交
取消