盤點JS判斷空物件的幾大方法
theme: channing-cyan
「這是我參與2022首次更文挑戰的第17天,活動詳情檢視:2022首次更文挑戰」
知識準備
在盤點JS判空方法之前我們先來了解下面的三個方法。
Object.keys
Object.keys()
方法是以物件為引數,返回一個包含該物件內所匹配的屬性和方法的陣列
var obj = {
name: "cxy",
age: "19"
};
var objArray = Object.getOwnPropertyNames(obj);
console.log(objArray)
可以看到objArray
為返回值,且返回值為以物件內的屬性為內容的陣列
Object.getOwnPropertyNames
Object.getOwnPropertyNames()
方法同樣是也是以物件為引數,返回一個包含該物件內所匹配的屬性和方法的陣列
大家在這裡會發出疑問,這兩個有啥區別?Object.getOwnPropertyNames()
可以返回所有的屬性,而Object.keys()
只能返回可列舉屬性,誒?到這裡大家又疑惑了可列舉屬性又是個啥?不要著急,我來解釋一下什麼叫可列舉屬性
可列舉屬性
可列舉或者不可列舉屬性是物件內部通過可列舉標誌enumerable
來進行區分的,在預設情況下,我們obj.name = "cxy"
為物件新增了一個屬性後,其可列舉標誌enumerable
為ture
,而當其值為false
的時候它是不可列舉的,當我們對物件進行for
,Object.keys()
,JSON.stringify()
的時候不可列舉屬性是找不出來的,我們可以理解為不可列舉屬性是隱身的
現在我們拿上面的Object.getOwnPropertyNames
和Object.keys()
進行實戰舉例,我們通過defineProperty
來為物件新增age
屬性,因為該方法可以設定列舉標誌,這裡設定為false
,可以看到下面兩個不同的返回結果
var stuObj = {
name: "cxy"
}
Object.defineProperty(stuObj, 'age', {
value: "18",
enumerable: false
});
console.log(Object.keys(stuObj))
console.log(Object.getOwnPropertyNames(stuObj))
hasOwnProperty
hasOwnProperty()
是用來判斷某物件是否含有某屬性的,其引數為屬性名
var stuObj = {
name: "cxy"
}
console.log(stuObj.hasOwnProperty('name'))
但是這裡要注意一個問題就是,hasOwnProperty()
判斷繼承屬性的時候會返回false
,繼承屬性即物件從原型物件上繼承的屬性,比如說toString
盤點判空方法
JSON.stringify
判空
這種方式是比較簡單的了,使用JSON.stringify
將物件轉換為字串,再通過等於判斷即可得到物件是否為空的布林值
let obj = {
name: "cxy"
}
console.log(JSON.stringify(obj) == '{}')
for in
判空
使用for in
的話可以當觸發迴圈的時候返回false
沒有觸發迴圈的時候代表物件為空返回ture
let forNull = (items) => {
for (let item in items) {
return false
}
return true
}
Object.getOwnPropertyNames
判空
這裡使用了上文提及的Object.getOwnPropertyNames
,將返回的陣列的length
作為判斷依據。
let stuArray = Object.getOwnPropertyNames(obj)
console.log(stuArray.length === 0)
Object.keys()
判空
和上個方法一樣,使用陣列作為判斷依據
let stuArray = Object.getOwnPropertyNames(obj)
console.log(stuArray.length === 0)
hasOwnProperty
判空
使用hasOwnProperty
是使用for迴圈將元素進行判斷如果含有則返回false
說明不為空,反之則為空
let forNull = (items) => {
for (let item in items) {
if(items.hasOwnProperty(item)){
return false
}
}
return true
}
- 一份非官方的稀土掘金社群活動攻略
- 學長突然問我用過Symbol嗎,我哽咽住了(準備捱罵)
- 助力鄉村振興,我為農民伯伯開發了這款微信小程式
- 迷茫者的抉擇,我與掘金的故事,準大三生的年中總結
- 盤點幾種資料型別的解構賦值細節
- vue electron 開發一個實時監測github的跨端桌面應用
- 微信小程式實戰之骨架屏的應用與實現
- 小程式觸底載入與下拉重新整理功能的設計與實現
- 非Vuex實現的登入狀態判斷封裝
- 盤點JS判斷空物件的幾大方法
- 初識指令碼語言VBS
- 瀏覽器物件模型BOM的基本使用
- 基本的移動端適配
- WSL入門與Linux基礎❤
- 超Q的彈性盒子——flex✨
- 2021琴理工作室JS基礎教學(上)