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实现图像识别和人脸对比

    详解如何使用Vue实现图像识别和人脸对比

    随着人工智能的发展,图像识别和人脸识别技术已经被广泛应用于各种应用程序中,Vue为我们提供了许多实用工具和库,可以帮助我们在应用程序中进行图像识别和人脸识别,在本文中,我们将介绍如何使用Vue进行图像识别和人脸对比,需要的朋友可以参考下
    2023-06-06
  • vue3+vite实现在线预览pdf功能

    vue3+vite实现在线预览pdf功能

    这篇文章主要为大家详细介绍了如何通过vue3和vite实现在线预览pdf功能,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以学习一下
    2023-10-10
  • Mint UI实现A-Z字母排序的城市选择列表

    Mint UI实现A-Z字母排序的城市选择列表

    这篇文章主要为大家详细介绍了Mint UI实现A-Z字母排序的城市选择列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • vue3如何将通用组件注册成全局组件

    vue3如何将通用组件注册成全局组件

    这篇文章主要介绍了vue3将通用组件注册成全局组件的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 使用Vue.js和MJML创建响应式电子邮件

    使用Vue.js和MJML创建响应式电子邮件

    这篇文章主要介绍了使用Vue.js和MJML创建响应式电子邮件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

    vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

    今天小编就为大家分享一篇vue.js 双层嵌套for遍历的方法详解, 类似php foreach(),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue+bpmn.js实现自定义流程图的完整代码

    vue+bpmn.js实现自定义流程图的完整代码

    这篇文章主要介绍了vue+bpmn.js实现自定义流程图的完整代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借价值,需要的朋友参考下吧
    2024-03-03
  • vue中实现多页面应用方式

    vue中实现多页面应用方式

    这篇文章主要介绍了vue中实现多页面应用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue的基本知识你都了解吗

    Vue的基本知识你都了解吗

    这篇文章主要为大家详细介绍了Vue的基本知识,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • vuecli3.x中轻松4步带你使用tinymce的步骤

    vuecli3.x中轻松4步带你使用tinymce的步骤

    这篇文章主要介绍了vuecli3.x中轻松4步带你使用tinymce的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论