美文网首页大前端开发
判断数组、对象是否为空

判断数组、对象是否为空

作者: 遇侎粒_duyuqin | 来源:发表于2019-05-10 22:30 被阅读150次

    今天开发过程中,页面需根据接口返回数据中的一个对象存在与否以及是否为空显示对应的数据,我想都没想,自信满满敲下了下面这行代码:

    {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判断对象是否为空对象的几种方法
    PS:本人才疏学浅,若有错误或考虑不周之处,欢迎指正,非常感谢!

    相关文章

      网友评论

        本文标题:判断数组、对象是否为空

        本文链接:https://www.haomeiwen.com/subject/pvyhoqtx.html