今天开发过程中,页面需根据接口返回数据中的一个对象存在与否以及是否为空显示对应的数据,我想都没想,自信满满敲下了下面这行代码:
{arr && arr.length ? arr.name : '--'}
然后刷新页面,咦!怎么不对,数据明明返回了,却还是显示的是‘--’
百思不得其解,突然,灵光一现,对象什么时候有length属性了?[/捂脸]
这里不扯皮哈,不要说数组也是对象->_->
故而总结了下面的知识点
相关知识点:null、undefined、NaN、+0、-0、"",这六种转换成布尔类型是false,其余都是true;if条件语句中会自动执行相应的Boolean转换。
判断数组是否为空
先看下面的代码片段:
var arr1=[]
if (arr1) { // arr1为数组,在六种特定类型之外,转换为true
console.log('test1');
} else {
console.log('test2')
}
// test1
var arr2=[]
if (arr2.length) { // arr2数组为空,arr2.length=0, 自动转换为false
console.log('test11');
} else {
console.log('test22')
}
// test22
总结:
- 已知数组已定义或接口返回的数据中存在该数组字段:if(arr.length);
- 不知道接口返回的数据中是否存在该数组字段:if(arr && arr.length)
判断对象是否为空
对象在六种特定类型之外,无论对象是否为空,if(obj)均成立。且对象没有length属性,根据对象的相关属性及方法,可用下面几种方法判断:
- 将json对象转化为json字符串,再判断该字符串是否为"{}"
var data = {};
var b = (JSON.stringify(data) == "{}");
alert(b); //true
- for in 循环判断
var obj = {};
var b = function() {
for(var key in obj) { // 若对象不为空,则会执行该循环,返回false
return false;
}
return true;
}
alert(b()); //true
- jquery的isEmptyObject方法
此方法是jquery将上一种方法(for in)进行封装,使用时需要依赖jquery
var data = {};
var b = $.isEmptyObject(data);
alert(b); //true
- Object.getOwnPropertyNames()方法
此方法是使用Object对象的getOwnPropertyNames方法,获取到对象中的属性名,存到一个数组中,返回数组对象,我们可以通过判断数组的length来判断此对象是否为空
注意:此方法不兼容ie8,其余浏览器没有测试
var data = {};
var arr = Object.getOwnPropertyNames(data);
alert(arr.length == 0); //true
- 使用ES6的Object.keys()方法
与前一种方法类似,是ES6的新方法, 返回值也是对象中属性名组成的数组
var data = {};
var arr = Object.keys(data);
alert(arr.length == 0);//true
参考链接:js判断对象是否为空对象的几种方法
2019.06.05 更新
细心读者评论道:[]==false,??什么情况!?空数组亦是对象,转化为布尔值不应该是true么?确实是这样,不过[]==false也没毛病。
查了一下,发现了猫腻:原来,任意值与布尔值比较,都会先将两边的值转化为Number,空数组与false比较,false转化为0,空数组也转化为0,所以[]==false是没毛病的。而空数组作为判断条件的时候,比如if(arr){...},此时,是直接将空数组转化为布尔值,即Boolean(arr),结果为true。
双手附上链接: js 空数组是true还是false
特别感谢这位读者的点拨,寻获新知,开心*_*
PS:本人才疏学浅,若有错误或考虑不周之处,欢迎指正,非常感谢!