这里的扩展运算符有什么作用？

Question

我正在从一本书中学习React，作者在一个例子中让一个组件以这种方式呈现。

return (
        <div className="star-rating">
        {[...Array(totalStars)].map((n,i)=>
            <Star key = {i} selected={i<starSelected} onClick={()=>this.change(i+1)} />
        )}
        <p>{starsSelected} of  {totalStars} stars </p>+
    )

这里使用扩展运算符初始化数组有什么作用呢？

- Orca Prime

---

就我个人而言，如果我在写这段代码的话，我会使用{Array.from({length: totalStars}, (n, i) => 来代替，这样可能会更清晰一些。 - loganfsmyth

没有所谓的扩展运算符。 - Felix Kling

Answer 1

Array(totalStars)会创建一个有totalStars个空槽的数组。使用展开运算符将这些空槽转换为undefined，有效地为数组填充了一些内容（即使是undefined）以便执行映射操作。

只是用Array()实例化一个数组并没有在其空间中放置任何内容，它仅仅是为这些空间分配内存。

- DillGromble

---

很酷，比我目前常用的 Array.from({length:totalStars}) 更短 :p - Jaromanda X

它可能会稍微短一些，但在我看来，Array.from更语义化，而且有点不那么hacky。 - DillGromble

使用带有arrayLength参数的Array构造函数实际上并不为“空槽位”分配任何内存，它只是设置了length属性的初始值。JavaScript中的数组是稀疏的，这意味着它只会为已经设置的索引分配内存。 - 4castle

请不要称其为扩展运算符。 - Felix Kling

Answer 2

Spread operator 意味着当我们希望以数组形式展开事物时，可以使用它，例如 -

function ABC (...) {

console. log(...); //这将打印出数组 [1,3,5]

}

ABC(1,3,5);

当我们调用函数时，我们只是将参数传递而不是作为数组。但是它们会通过展开运算符转换为数组形式。

- hardy

---

console.log(...); //这将打印数组[1,3,5]。不，它不会。 - Jaromanda X

没有匿名参数。 - Bergi