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遍历相关操作。

相关文章

  • vuex实现的简单购物车功能示例

    vuex实现的简单购物车功能示例

    这篇文章主要介绍了vuex实现的简单购物车功能,结合实例形式分析了vuex购物车组件相关商品列表、购物车创建、添加、删除、清空等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • Vuex中五个属性以及使用方法详解

    Vuex中五个属性以及使用方法详解

    这篇文章主要给大家介绍了关于Vuex中五个属性以及使用的相关资料,Vuex是一个专为Vue.js应用程序开发的状态管理模式,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • 使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

    使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

    最近接了个项目需要开发一个app项目,由于是第一次接触这种app开发,经过一番思考,决定使用Vue3+Vant前端组件的模式进行开发,下面把问题分析及实现代码分享给大家,需要的朋友参考下吧
    2021-06-06
  • 使用vue实现猜谜卡片游戏

    使用vue实现猜谜卡片游戏

    这篇文章主要为大家详细介绍了如何使用vue实现简单的猜谜卡片游戏,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考一下
    2023-09-09
  • 在 React、Vue项目中使用SVG的方法

    在 React、Vue项目中使用SVG的方法

    本篇文章主要介绍了在 React、Vue项目中使用SVG的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue v-model动态生成详解

    vue v-model动态生成详解

    本篇文章给大家分享了vue v-model动态生成的相关知识点以及实例代码,有兴趣的朋友参考学习下。
    2018-06-06
  • vue.js绑定class和style样式(6)

    vue.js绑定class和style样式(6)

    这篇文章我们将一起学习vue.js实现绑定class和style样式,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue + element动态多表头与动态插槽

    vue + element动态多表头与动态插槽

    这篇文章主要介绍了vue + element动态多表头与动态插槽,下面文章围绕vue + element动态多表头与动态插槽的相关资料展开文章的内容,具有一定的参考价值,需要的小伙伴可以参考一下,希望对大家有所帮助
    2021-12-12
  • 手把手教你如何在vue项目中使用rem布局

    手把手教你如何在vue项目中使用rem布局

    公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下,下面这篇文章主要给大家介绍了关于如何在vue项目中使用rem布局的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue3如何在setup中获取DOM元素

    vue3如何在setup中获取DOM元素

    这篇文章主要介绍了vue3如何在setup中获取DOM元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论