在Java或者PHP等开发语言中都有一个函数isEmpty,这个函数可以很方便的判断变量是否为空值。这里的空值是针对变量不同类型而言。在Javascript中并没有isEmpty这个函数,那么JS如何写一个完美的空值判断函数呢?

在JS中根据变量的类型我们可以确定一下6种类型的空值。字符型空值为"", 数字型空值为0,布尔类型为false, 对象类型{} 数组[], 还有两个特殊类型null和undefined。

根据上面的类型空值可以粗暴的用或运行直接判断,只要有一个判断满足即可返回true,函数如下

const isEmpty = (val) => {
return ('' === val || 0 === val || false === val || (Array.isArray(val) && 0 == val.length ) || 0 == Object.keys(val).length || null === val || undefined === val);
}

简单说来,上面这个公式在业务上基本满足条件,但是放到浏览器里面执行就会出错,因为我们忽略了运算符号的运行顺序。 “或”运行里面两边只要有一个满足条件就不再执行第二个条件。例如(A || B)在执行的时候是从左到右,如果左边为true,那么右边就不走了。上面的函数中,如果传入的变量是null或者undefined,那么第一个 || 运算就走不下去了,因为val为null或者undefined 在第一个|| 那里无法转化为字符串,系统报错。

那我们简单调整一下顺序把undefined 和null 这两个判断放到前面得到下面这个函数

const isEmpty = (val) => {
return (null === val || undefined === val || '' === val || 0 === val || false === val || (Array.isArray(val) && 0 == val.length ) || 0 == Object.keys(val).length );
}

那么基本上这个函数可以满足判断一个变量是否为空值。

如果我们想再把函数写得精简一些,那么可以引入!运行,!运行有两种作用,第1种是非运行,第2种是强制把 非null, 非undefined,非空字符串变为 true, 即 true === !null , true === !undefined, true === !'', 也就是说上文提到的函数有5个类型可以合并为一个,那么函数可以简写为

const isEmpty = (val) => {
return (true === !val || (Array.isArray(val) && 0 == val.length) || 0 == Object.keys(val).length );
}

由于数组也是个特殊的对象所以又可以把数组的判断这块给省了,于是函数变成下面这个方式

const isEmpty = (val) => {
return (true === !val || 0 == Object.keys(val).length );
}

当然调用函数传值的时候千万别传运算符号入参,不然也会报错