JavaScript处理用户输入生成数组时出现额外空值问题排查

问题原因 #

• JS脚本末尾主动调用了一次getName()，页面加载完成后（defer属性保证DOM加载完成后执行脚本）就会触发执行，此时输入框没有内容，document.getElementById("input").value取到空字符串，调用split(", ")分割空字符串会得到[""]，直接被推入两个全局数组，这就是额外空值的核心来源。
• 触发函数的按钮放在了<form>标签内部，默认按钮类型是submit，点击后会触发表单提交行为刷新页面，也可能导致逻辑重复执行、数据异常。
• 补充：当前两个数组声明为全局变量，每次调用getName()都会往原数组追加内容，不会清空旧数据，如果你的需求是每次点击都基于当前输入生成新数组，需要每次调用前先清空原有数组，或者把数组声明放到函数内部。

修正代码 #

修正后的JS代码 #

const NameArr = [];
const IdArr = [];

function getName(e) {
  // 阻止表单默认提交行为
  e?.preventDefault();
  const Input = document.getElementById("input").value.trim();
  // 输入为空时直接终止逻辑，避免生成空串元素
  if (!Input) return;
  // 每次调用前清空原有数组，按需保留
  NameArr.length = 0;
  IdArr.length = 0;
  const list_names = Input.split(", ");

  for (let i of list_names) {
    NameArr.push(i);
    IdArr.push(i);
  };
  console.log(NameArr, IdArr);
  // 原写法的逗号运算符只会返回最后一个值，需要返回两个数组用数组包裹
  return [NameArr, IdArr];
};
// 删除脚本末尾的主动调用语句 getName();

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="main.js" charset="utf-8" defer></script>
    <title></title>
  </head>
  <body>
    <form id="form" action="#" method="post">
      <input type="text" id="input">
      <!-- 指定按钮类型为button，避免默认表单提交行为 -->
      <button type="button" onclick="getName(event);">Get Data</button>
    </form>
  </body>
</html>

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