为何空/空白字符串仍被推入数组？如何实现禁止推入需求

我在if判断里设置了input值不为undefined的条件，但点击add按钮时，输入为空或仅为空格时，空字符串还是会被推入数组，数组长度计数器也会统计这个值。我想知道：

• 空字符串""或仅含空格的字符串" "属于undefined吗？
• 该怎么实现禁止向数组推入空值、未定义值或仅含空格的字符串？

原代码 #

HTML #

<input>
<button id="add">add</button>
<button id="remove">remove</button>
<p></p>
<span>0</span>

JavaScript #

window.onload = function () {
  const inp = document.querySelector("input");
  const btn = document.getElementById("add");
  const addBtn = document.getElementById("add");
  const rBtn = document.getElementById("remove");
  const p = document.querySelector("p");
  const sp = document.querySelector("span");
  let toDo = [];

  addBtn.addEventListener("click", () => {
    if (inp.value != undefined) {
      console.log(inp.value)
      toDo.push(inp.value);
      sp.innerHTML = toDo.length;
    }
    p.innerHTML = toDo.join(" ");
    inp.value = "";
    inp.value = "";
  });

  rBtn.addEventListener("click", () => {
    inp.value = "";
    p.innerHTML = "";
    toDo = [];
    sp.innerHTML = "0";
    console.clear()
  });
};

首先明确：空字符串""或仅含空格的字符串" "都不属于undefined。undefined是JavaScript的原始数据类型，代表变量未被赋值；而空字符串、空格字符串都是String类型，只是内容为空或仅含空白字符。你的判断条件inp.value != undefined永远为真——因为input的value属性默认就是空字符串，永远不会是undefined，所以这个判断完全起不到过滤作用。

要实现需求，你需要：

1. 先用trim()方法去除输入字符串两端的空白字符
2. 判断处理后的字符串是否不为空

具体修改后的JavaScript代码如下：

window.onload = function () {
  const inp = document.querySelector("input");
  const addBtn = document.getElementById("add");
  const rBtn = document.getElementById("remove");
  const p = document.querySelector("p");
  const sp = document.querySelector("span");
  let toDo = [];

  addBtn.addEventListener("click", () => {
    // 去除输入两端的空白字符
    const inputValue = inp.value.trim();
    // 只有处理后的值不为空才执行推入操作
    if (inputValue) {
      console.log(inputValue)
      toDo.push(inputValue);
      sp.innerHTML = toDo.length;
    }
    p.innerHTML = toDo.join(" ");
    inp.value = "";
  });

  rBtn.addEventListener("click", () => {
    inp.value = "";
    p.innerHTML = "";
    toDo = [];
    sp.innerHTML = "0";
    console.clear()
  });
};

另外，原代码里重复声明了btn和addBtn，已经删掉冗余的const btn = document.getElementById("add");，让代码更简洁。

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