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 开发必须知道的36个技巧(小结)

    Vue 开发必须知道的36个技巧(小结)

    这篇文章主要介绍了Vue 开发必须知道的36个技巧(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue3-组合式api-provide/inject详解

    vue3-组合式api-provide/inject详解

    provide/inject 适用于跨级通信,在孙组件中通过依赖注入的方式能获取到父组件中改变的这个值,下面通过实例代码介绍vue3-组合式api-provide/inject的相关知识,需要的朋友可以参考下
    2022-11-11
  • vue $set 给数据赋值的实例

    vue $set 给数据赋值的实例

    今天小编就为大家分享一篇vue $set 给数据赋值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 详解vue.js之props传递参数

    详解vue.js之props传递参数

    给大家详细分析了vue.js之props传递参数的相关知识以及问题解决方法,需要的朋友参考下吧。
    2017-12-12
  • vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    这篇文章主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue.js组件实现选项卡以及切换特效

    Vue.js组件实现选项卡以及切换特效

    这篇文章主要为大家详细介绍了Vue.js组件实现选项卡以及切换特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • Vue中watch使用方法详解

    Vue中watch使用方法详解

    watch就是当值第一次绑定的时候,是不会执行监听函数的,只有值诞生改变才会执行。如果需要在第一次绑定的时候也执行函数,则需要用到immediate属性,比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的No认知时,也需要执行函数
    2023-01-01
  • webstorm建立vue-cli脚手架的傻瓜式教程

    webstorm建立vue-cli脚手架的傻瓜式教程

    这篇文章主要给大家介绍了关于webstorm建立vue-cli脚手架的傻瓜式教程,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Element-ui Layout布局(Row和Col组件)的实现

    Element-ui Layout布局(Row和Col组件)的实现

    我们在实际开发中遇到一些布局的时候会用到Layout布局,本文就详细的介绍了Element-ui Layout布局(Row和Col组件)的实现,具有一定的参考价值,感兴趣的可以了解一下
    2021-12-12
  • VUE+SpringBoot实现分页功能

    VUE+SpringBoot实现分页功能

    这篇文章主要为大家详细介绍了VUE+SpringBoot实现分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06

最新评论