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

桃扇骨 2023-10-10 15:49 13阅读 0赞

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

## 简介 ##

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

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

## undefined ##

**正确方法**

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

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

**错误方法**

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

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

## null ##

**正确方法**

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

**错误方法**

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

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

## NaN ##

**方法**

使用isNaN方法

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

**示例**

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

## 字符串无效值 ##

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

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

**方法**

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

**示例**

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

**其他用法**

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

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

## \{\}（空对象） ##

**法1：ES6的Object.keys()**

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

**法2：for in 循环判断**

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

**法3：Object.getOwnPropertyNames()**

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

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

**法4：JSON.stringify**

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

**法5：jquery的isEmptyObject**

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

## \[\]（空数组） ##

**法1：arr.length**

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

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

**法2：JSON.stringify**