Javascript react中的条件逻辑重构

我有一个react组件，它可以呈现一张10孔的punchcard。它接收一个“穿孔”道具，以确定应填充多少穿孔。我当前的代码工作正常，但我希望能帮助您找到更优雅的解决方案

  const punches = () => {
    const arr = [];
    let numpunch = 0;
    let i;
    for (i = 0; i < 10; i++) {
      if (numpunch !== punched) {
        arr.push(<PunchFill key={i} />);
        numpunch++;
      } else {
        arr.push(<Punch key={i} />);
      }
    }
    return arr;
  };

const punchs=（）=>{
常数arr=[]；
设numpunch=0；
让我；
对于（i=0；i<10；i++）{
如果（numpunch！==穿孔）{
arr.push（）；
numpunch++；
}否则{
arr.push（）；
}
}
返回arr；
};

就我所见，内置的数组方法似乎并不真正符合我的需要，因为这需要首先设置一个大小合适的数组，并且还产生了一个新问题，即如何跟踪已经存在的填充穿孔的数量

const punchs=（）=>{
 const punches = () => {
    return new Array(10)
      .fill('')
      .map((_, i) => (i < punched ? <PunchFill key={i} /> : <Punch key={i} />));
  };

返回新数组（10）
.填写（“”）
.map（（_，i）=>（i

---

这是可行的：新数组（10）创建一个长度为10的数组，每个元素都“未定义”。映射函数在这样的数组上不起作用（更详细的解释是：。“fill”链接提供的值可以映射到您可以这样做

Array.from({length: 10}, (x, i) => i < punched ? <PunchFill key={i} /> : <Punch key={i} />);

Array.from（{length:10}，（x，i）=>i

---

Array.from

方法将类似于数组或iterable的对象转换为数组。这里我们指定一个长度为10的对象，因此它创建一个长度为10的数组。在第二个参数中，我们可以指定一个map函数来调用数组的每个元素。

return（新数组（10））怎么样？非常可爱，谢谢！但是（新数组（10））返回一个无法映射的未定义值数组，因此在链接

.map

调用之前，需要使用类似

.fill（“”）

的方法。这有助于解释为什么数组。新（10）无法映射：即使这是一个自我回答，也请解释代码的作用（特别是为什么需要

填充

），以便将来的读者可以从中学习。