JavaScript骰子游戏如何用slice移除输出null项及CSS格式化列表

1. 使用slice()移除无效输出的修改方法 #

不需要修改原results数组，仅需修改给list赋值的行逻辑即可：

• 调用slice(2)截取原数组索引2到末尾的有效数据段，自动过滤前两个索引的null值
• 注意截取后的新数组索引从0开始，需要加2还原为实际的骰子总点数

原代码的list赋值行：

list.innerHTML = results.map((val, index)=> `You have rolled ${index}: ${val} times`).join('<br/>');

修改后：

list.innerHTML = results.slice(2).map((val, index)=> `你掷出点数${index + 2}的次数：${val}`).join('<br/>');

2. 其他更优的JavaScript实现方案 #

除slice方案外，还有两种更灵活的实现可选：

• 遍历过滤方案：不需要处理索引偏移，兼容性更强

list.innerHTML = results.map((val, index) => {
  if(index < 2) return '';
  return `你掷出点数${index}的次数：${val}`;
}).filter(Boolean).join('<br/>');

• 批量投掷性能优化：针对1000次批量投掷场景，不要每次投掷都更新DOM，循环结束后统一更新，性能提升非常明显

function rollDice1000() {
  for(let i=0; i<1000; i++) {
    let d0= Math.floor(Math.random()*6)+1;
    let d1= Math.floor(Math.random()*6)+1;
    results[d0+d1] +=1;
  }
  // 统一更新一次DOM
  document.getElementById("dice0").innerHTML = '-';
  document.getElementById("dice1").innerHTML = '-';
  document.getElementById("result").innerHTML = "已完成1000次投掷";
  // 此处调用统计渲染逻辑即可
}

3. 结构化输出支持CSS自定义排版 #

将每个结果项封装为独立带类名的DOM元素，即可实现横向排版等自定义样式效果：

JS修改 #

将list的生成逻辑改为生成带类的块元素：

list.innerHTML = results.slice(2).map((val, index) => 
  `<div class="result-item">
    <span class="point">点数${index + 2}</span>
    <span class="count">${val}次</span>
  </div>`
).join('');

配套CSS示例 #

.list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.result-item {
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  min-width: 80px;
  text-align: center;
}
.point {
  font-weight: bold;
  margin-right: 8px;
}

设置后结果项会自动横向排列，超出容器宽度自动换行，可根据需求调整样式属性实现任意排版效果。

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