JS 实现获取对象属性个数的方法小结

 更新时间:2023年05月22日 09:26:23   作者:书香水墨  
这篇文章主要介绍了JS 实现获取对象属性个数的方法,结合实例形式总结分析了JS 获取对象属性个数的三种常用方法,需要的朋友可以参考下

一、方法一

var attributeCount = function(obj) {
    var count = 0;
    for(var i in obj) {
        if(obj.hasOwnProperty(i)) {  // 建议加上判断,如果没有扩展对象属性可以不加
            count++;
        }
    }
    return count;
}
var testObj = {
    name1: "value1",
    name2: "value2"
};
alert(attributeCount(testObj)); // 2

二、方法二

function TestObj(name, age) {
  this.name = name,
    this.age = age
 }
TestObj.prototype.proCount = function() {
  var count = 0
  for(pro in this) {
      if(this.hasOwnProperty(pro)) { // 这里扩展了对象,所以必须判断
           count++;
         }
    }
    return count;
}
var testObj = new TestObj('名称', 12);
alert(testObj.proCount()); // 2

三、方法三

var testObj = {
  name1: "value1",
  name2: "value2"
};
alert(Object.getOwnPropertyNames(testObj).length); // 2

感兴趣的朋友可以使用本站在线工具:http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果!

笔者在开发过程中比较常用的是第三种方法,通过getOwnPropertyNames返回对象所有属性,直接计算属性的长度,避免了js遍历相关操作。

相关文章

  • vue如何利用store实现两个平行组件间的传值

    vue如何利用store实现两个平行组件间的传值

    这篇文章主要介绍了vue如何利用store实现两个平行组件间的传值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3中createWebHistory和createWebHashHistory的区别详析

    Vue3中createWebHistory和createWebHashHistory的区别详析

    这篇文章主要给大家介绍了关于Vue3中createWebHistory和createWebHashHistory区别的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • vue如何查找数组中符合条件的对象

    vue如何查找数组中符合条件的对象

    这篇文章主要介绍了vue如何查找数组中符合条件的对象,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue组件通信的几种实现方法

    Vue组件通信的几种实现方法

    这篇文章主要介绍了Vue组件通信的几种实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 详解uniapp的生命周期

    详解uniapp的生命周期

    这篇文章主要介绍了uniapp的生命周期,应用生命周期是指应用程序从启动到关闭的整个过程,包括应用程序的启动、前后台切换、退出等,需要的朋友可以参考下
    2023-04-04
  • vue中改变选中当前项的显示隐藏或者状态的实现方法

    vue中改变选中当前项的显示隐藏或者状态的实现方法

    下面小编就为大家分享一篇vue中改变选中当前项的显示隐藏或者状态的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 如何将HTML页面改写到vue项目中详解

    如何将HTML页面改写到vue项目中详解

    html和vue都是前端技术中非常重要的一部分,其中html是web开发的基石,而vue则是现代化的前端开发框架之一,下面这篇文章主要给大家介绍了关于如何将HTML页面改写到vue项目中的相关资料,需要的朋友可以参考下
    2024-08-08
  • vue.js源代码core scedule.js学习笔记

    vue.js源代码core scedule.js学习笔记

    这篇文章主要为大家详细介绍了vue.js源代码core scedule.js的学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 基于vue手写tree插件的那点事儿

    基于vue手写tree插件的那点事儿

    这篇文章主要给大家介绍了基于vue手写tree插件的那点事儿,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • Vue父子组件传值的三种方法

    Vue父子组件传值的三种方法

    这篇文章主要介绍了Vue父子组件传值的三种方法,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12

最新评论