在 JavaScript 如何判断变量是否为空

我们在通过一些参数检索数据时，有些参数其实本身就没必要传给接口，例如：

• 输入框<Input />对应的参数，若一次也没输入过，通过 Form 表单获取到的是 undefined；但若输入过然后又全部删除了，则得到的是空字符串；
• 下拉框或级联选择在处于多选状态时，将之前的选项全部清除，其实得到的是空数组；

诸如空字符窜和空数组之类的，其实我们就没必要将其传给后端接口了。

之前我也参考过 lodash 中的 isEmpty，但这个方法不太满足我们的业务场景。在 lodash 的 isEmpty 中：

• 该方法只检查 value 是否为一个空对象，集合，映射或者 set；
• 若 value 是 number, string, boolean 等基本类型，该方法会认为是空，即返回 true；

但在实际业务中，比如 true、false、0 等还是有实际意义的。这里我也是根据我们的业务场景，封装了一个判断变量是否为空的方法。

const isParamEmpty = (value) => {
  if (value == null) {
    // 是 null 或 undefined 时，为 true
    return true;
  }
  if (typeof value === "number") {
    /**
     * 若是NaN，则认为是空；
     * 0是合法的
     */
    return value !== value;
  }
  if (typeof value === "string") {
    return value.trim() === "";
  }
  if (Array.isArray(value)) {
    return !value.length;
  }

  const tag = Object.prototype.toString.call(value);
  if (tag == "[object Map]" || tag == "[object Set]") {
    return !value.size;
  }
  if (typeof value === "object") {
    return !Object.keys(value).length;
  }

  return false;
};

使用：

isParamEmpty(null); // true
isParamEmpty(undefined); // true

isParamEmpty(123); // false
isParamEmpty(0); // false
isParamEmpty(false); // false
isParamEmpty(Number.NaN); // true

isParamEmpty("   "); // true
isParamEmpty(" abc  "); // false

isParamEmpty([]); // true
isParamEmpty([1, 2]); // false

isParamEmpty({}); // true
isParamEmpty({ a: 21 }); // false

isParamEmpty(new Map()); // true
isParamEmpty(new Set()); // true

const map = new Map();
map.set("a", 1);
isParamEmpty(map); // false

const set = new Set();
set.add("abc");
isParamEmpty(set); // false

该方法判断了日常业务中的大部分类型。我还把它封装到了kidash的 npm 包中，大家可以直接使用。

import { isParamEmpty } from "kidash";

console.log(isParamEmpty([])); // true