React中Array(fruits.length).fill(0)的含义及useState初始化疑问

我正在学习并练习React的useState Hook，基础用法比如：

const [votes, setVotes] = useState(0)

我知道这里的0是votes的初始值。但碰到进阶用法时产生了疑问：

已知水果数组：

const fruits = ["kiwi", "banana", "mango", "apple", "durian"]

状态声明代码：

const [votes, setVotes] = useState(() => Array(fruits.length).fill(0))

疑问1：既然fruits已经是数组，为什么还要用Array(fruits.length)创建新数组？ #

fruits数组存的是水果名称，但我们需要的是和水果数量一一对应、专门存储每款水果票数的独立数组，不能直接复用原数组。Array(fruits.length)会创建一个长度和fruits完全一致的空数组，数组的每个索引刚好能对应fruits里的某款水果（比如索引0对应kiwi，索引1对应banana），后续投票时可以通过索引精准定位到对应水果的票数，和业务逻辑完美匹配。

疑问2：.fill(0)是不是把数组每个元素初始化为0？ #

没错，fill(0)会将这个新数组的所有元素都设置为0，正好对应场景里“未被投票的水果票数为0”的需求。

结合场景补充说明 #

我的业务场景是：有一个水果数组，两个按钮——一个投票按钮，一个随机选择下一个水果的按钮。点击投票按钮时对应水果票数增加，点击随机按钮时切换显示的水果，未投票的水果票数保持0。投票按钮的代码如下：

const handleVotes = () => { 
    setVotes((votes) => 
      votes.map((vote, index) => index === selected ? vote + 1 : vote)
    )
 }

这段代码就是通过索引匹配当前选中的水果（selected应为当前选中水果的索引），将对应位置的票数加1，完全依赖前面用Array(fruits.length).fill(0)创建的、索引和水果一一对应的票数数组结构。

内容的提问来源于stack exchange，提问作者Jabri Juhinin