JS 實(shí)現(xiàn)獲取對象屬性個數(shù)的方法小結(jié)
更新時間：2023年05月22日 09:26:23 作者：書香水墨
這篇文章主要介紹了JS 實(shí)現(xiàn)獲取對象屬性個數(shù)的方法,結(jié)合實(shí)例形式總結(jié)分析了JS 獲取對象屬性個數(shù)的三種常用方法,需要的朋友可以參考下
一、方法一
var attributeCount = function(obj) {
? ? var count = 0;
? ? for(var i in obj) {
? ? ? ? if(obj.hasOwnProperty(i)) { ?// 建議加上判斷,如果沒有擴(kuò)展對象屬性可以不加
? ? ? ? ? ? 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)) { // 這里擴(kuò)展了對象,所以必須判斷
??? ??? ?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 測試上述代碼運(yùn)行效果！
筆者在開發(fā)過程中比較常用的是第三種方法，通過getOwnPropertyNames返回對象所有屬性，直接計算屬性的長度，避免了js遍歷相關(guān)操作。
相關(guān)文章
這篇文章主要介紹了Vue 開發(fā)必須知道的36個技巧(小結(jié)),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
provide/inject 適用于跨級通信，在孫組件中通過依賴注入的方式能獲取到父組件中改變的這個值，下面通過實(shí)例代碼介紹vue3-組合式api-provide/inject的相關(guān)知識,需要的朋友可以參考下2022-11-11
vue $set 給數(shù)據(jù)賦值的實(shí)例
今天小編就為大家分享一篇vue $set 給數(shù)據(jù)賦值的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
給大家詳細(xì)分析了vue.js之props傳遞參數(shù)的相關(guān)知識以及問題解決方法，需要的朋友參考下吧。2017-12-12
vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作
這篇文章主要介紹了vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue.js組件實(shí)現(xiàn)選項(xiàng)卡以及切換特效
這篇文章主要為大家詳細(xì)介紹了Vue.js組件實(shí)現(xiàn)選項(xiàng)卡以及切換特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
watch就是當(dāng)值第一次綁定的時候，是不會執(zhí)行監(jiān)聽函數(shù)的，只有值誕生改變才會執(zhí)行。如果需要在第一次綁定的時候也執(zhí)行函數(shù)，則需要用到immediate屬性，比如當(dāng)父組件向子組件動態(tài)傳值時，子組件props首次獲取到父組件傳來的No認(rèn)知時，也需要執(zhí)行函數(shù)2023-01-01
這篇文章主要給大家介紹了關(guān)于webstorm建立vue-cli腳手架的傻瓜式教程，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Element-ui?Layout布局(Row和Col組件)的實(shí)現(xiàn)
我們在實(shí)際開發(fā)中遇到一些布局的時候會用到Layout布局，本文就詳細(xì)的介紹了Element-ui?Layout布局(Row和Col組件)的實(shí)現(xiàn)，具有一定的參考價值，感興趣的可以了解一下2021-12-12
VUE+SpringBoot實(shí)現(xiàn)分頁功能
這篇文章主要為大家詳細(xì)介紹了VUE+SpringBoot實(shí)現(xiàn)分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06