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
相关推荐
R-G-B5 小时前
【02】C#入门到精通——C# 变量、输入/输出、类型转换
开发语言·c#·c# 变量·c#输入/输出·c#类型转换
星河队长5 小时前
C# 软件加密方法,有使用时间限制,同时要防止拷贝
开发语言·c#
史迪奇_xxx5 小时前
10、一个简易 vector:C++ 模板与 STL
java·开发语言·c++
2301_801252225 小时前
Java中的反射
java·开发语言
Kiri霧6 小时前
Rust开发环境搭建
开发语言·后端·rust
weixin-a153003083166 小时前
[数据抓取-1]beautifulsoup
开发语言·python·beautifulsoup
quweiie6 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
小杨同学yx6 小时前
有关maven的一些知识点
java·开发语言
闲蛋小超人笑嘻嘻6 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
重生之我要当java大帝7 小时前
java微服务-尚医通-编写医院设置接口下
java·开发语言·sql