JS--判断空值(null、undefined、NaN、false、空字符串等)

原文网址：JS--判断空值(null、undefined、NaN、false、空字符串等)_IT利刃出鞘的博客-CSDN博客

简介

本文介绍JavaScript判断空值的方法。

空值包括：undefined，null，NaN，''，false，{}，[]。

undefined

正确方法

javascript 复制代码

let tmp = undefined;
console.log(typeof(tmp) == "undefined")  //true
console.log(tmp === undefined)  //true

说明：typeof 返回字符串，有8种取值："number"、"string"、"boolean"、"object"、"function"、"undefined" 、"bigint"、"symbol"

错误方法

javascript 复制代码

let tmp = undefined;
console.log(tmp == undefined)  //true

原因：null == undefined结果也是true。

null

正确方法

javascript 复制代码

let tmp = null;
console.log(tmp === null)  //true

错误方法

javascript 复制代码

let tmp = null;
console.log(tmp == null) //true

原因：null == undefined结果也是true。

NaN

方法

使用isNaN方法

任何与NaN相关的操作都会返回NaN
NaN与任何的值都不相等，而且它与本身也不相等。
- 所以不能使用 == 或 === 运算符判断某个值是否是 NaN。

示例

javascript 复制代码

console.log(isNaN(NaN));//true
console.log(Object.prototype.toString.apply(NaN));//[object Number]
console.log(isNaN('123asd')); //true
console.log(isNaN(undefined));//true

console.log(isNaN(123)); //false
console.log(isNaN(true));//false
console.log(isNaN(Infinity));    //false
console.log(isNaN(null));//false

console.log(isNaN(1 / 0));//false
console.log(isNaN(0 / 0));//true

注意

在c/c++/java...中，一个数字除以0都会报错，但js比较特殊，不会报错、还会返回NaN或者infinity：

非0数字除以0会返回infinity（无穷大），
0和0相除会返回NaN;
Infinity*0 => NaN; 即：1/0*0=>NaN

字符串无效值

javascript 复制代码

let str = ' ';
console.log(str.replace(/(^\s*)|(\s*$)/g, '').length <= 0);

null、undefined、零、NaN、false、空字符串

方法

取反。这些都是逻辑上的false：null、undefined、零、NaN、false、空字符串。所以可以直接取反。

示例

javascript 复制代码

console.log(!null);     //true
console.log(!undefined);//true
console.log(!0);        //true
console.log(!NaN);      //true
console.log(!false);    //true
console.log(!'');       //true
console.log(!{});       //false

其他用法

因此，如果想判断一个值是否有效，可以两次取反：

javascript 复制代码

if(!!a){
    //a有内容才执行的代码...  
}

{}（空对象）

法1：ES6的Object.keys()

javascript 复制代码

let data = {};
let arr = Object.keys(data);
console.log(arr.length == 0); //true

法2：for in 循环判断

javascript 复制代码

let obj = {};
let func = function(aObject) {
    for(let key in aObject) {
        return false;
    }
    return true;
}
console.log(func(obj)); //true

法3：Object.getOwnPropertyNames()

获取对象的属性名，返回数组对象，通过判断数组的length来判断此对象是否为空。

javascript 复制代码

let data = {};
let arr = Object.getOwnPropertyNames(data);
console.log(arr.length == 0); //true

法4：JSON.stringify

javascript 复制代码

let data = {};
console.log(JSON.stringify(data) === '{}'); //true

法5：jquery的isEmptyObject

javascript 复制代码

let data = {};
console.log($.isEmptyObject(data)); //true

[]（空数组）

法1：arr.length

Array.isArray && arr.length（通过Array.isArray来判断是否为数组，再通过length属性。）

javascript 复制代码

let data = [];
console.log(Array.isArray(data) && data.length === 0); //true

法2：JSON.stringify

javascript 复制代码

let data = [];
console.log(JSON.stringify(data) === '[]'); //true