重置数组后返回undefined？Killfeed脚本技术求助

问题根源 #

你的resetNames函数中错误地使用了let声明局部变量names，这导致全局的names数组完全没有被重置——你只是在函数内部创建了一个新的局部数组，全局数组依然保持为空状态。当getRandomName再次执行时，即使调用了resetNames，全局数组还是空的，此时Math.floor(Math.random() * names.length)计算出的索引为0，访问空数组的第0项自然返回undefined。

修复方案 #

移除resetNames函数里的let关键字，直接修改全局的names数组：

function resetNames() {
  names = [...myNames];
}

完整修复后的JavaScript代码 #

const myNames = ["Niko", "Anomaly", "Kandis"];
let names = [...myNames];

function getRandomName() {
  if (names.length === 0) {
    resetNames();
  }
  let randomIndex = Math.floor(Math.random() * names.length);
  let randomName = names[randomIndex];
  names.splice(randomIndex, 1);
  return randomName;
}

function addKill() {
  let kills = $("li").length + 1; // 补充let声明，避免全局变量污染
  let selectedName = getRandomName();
  $("#killfeed").append('<li><b class="ct">ne0lines</b> killed <i class="t">' + selectedName + '</i></li>');
}

function resetNames() {
  names = [...myNames]; // 去掉let，直接修改全局数组
}

function resetKill() {
  $("ul").fadeOut(1000);
  setTimeout(function() {
    $("li").remove();
  }, 1000);
  $("ul").fadeIn();
  resetNames();
}

保留的CSS与HTML代码 #

CSS代码

body {
  background-color: transparent;
  margin: 0px auto;
  overflow: hidden;
  text-decoration: none;
  font-size: 20px;
  font-family: rajdhani, sans-serif !important;
  letter-spacing: 1px;
  font-weight: 600;
  text-align: center;
}

ul {
  list-style: none;
}

li {
  display: table;
  margin: 0px auto;
  position: relative;
  clear: both;
  float: none;
  min-width: 100px;
  height: 32px;
  line-height: 32px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px #b50000 solid;
  border-radius: 6px;
  padding: 0 10px;
  color: #fff;
  margin-top: 5px;
  right: -100%;
  animation: smooth-appear 1s ease forwards;
}

b {
  font-style: normal;
  font-weight: 600;
}

i {
  font-style: normal;
}

.ct {
  color: rgb(105, 180, 255);
}

.t {
  color: rgb(237, 208, 87);
}

@keyframes smooth-appear {
  to {
    right: 5px;
    opacity: 1;
  }
}

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button onClick="javascript:addKill();">Add kill</button>
<button onClick="javascript:resetKill();">Reset</button>
<ul id="killfeed"></ul>

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