欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS判斷空對象的幾個方法大盤點

 更新時間:2022年02月15日 16:06:18   作者:豬痞惡霸  
在做數(shù)據(jù)交互的時候,我們經(jīng)常需要判斷數(shù)據(jù)或者對象是不是為空,避免當接口異常時候前端頁面崩潰,下面這篇文章主要給大家介紹了關于JS判斷空對象的幾個方法,需要的朋友可以參考下

知識準備

在盤點JS判空方法之前我們先來了解下面的三個方法。

Object.keys

Object.keys()方法是以對象為參數(shù),返回一個包含該對象內(nèi)所匹配的屬性和方法的數(shù)組

  var obj = {
    name: "cxy",
    age: "19"
  }; 
  var objArray = Object.getOwnPropertyNames(obj);
  console.log(objArray)

可以看到objArray為返回值,且返回值為以對象內(nèi)的屬性為內(nèi)容的數(shù)組

Object.getOwnPropertyNames

Object.getOwnPropertyNames()方法同樣是也是以對象為參數(shù),返回一個包含該對象內(nèi)所匹配的屬性和方法的數(shù)組

大家在這里會發(fā)出疑問,這兩個有啥區(qū)別?Object.getOwnPropertyNames()可以返回所有的屬性,而Object.keys()只能返回可枚舉屬性,誒?到這里大家又疑惑了可枚舉屬性又是個啥?不要著急,我來解釋一下什么叫可枚舉屬性

可枚舉屬性

可枚舉或者不可枚舉屬性是對象內(nèi)部通過可枚舉標志enumerable來進行區(qū)分的,在默認情況下,我們obj.name = "cxy"為對象新增了一個屬性后,其可枚舉標志enumerable為ture,而當其值為false的時候它是不可枚舉的,當我們對對象進行for,Object.keys(),JSON.stringify()的時候不可枚舉屬性是找不出來的,我們可以理解為不可枚舉屬性是隱身

現(xiàn)在我們拿上面的Object.getOwnPropertyNamesObject.keys()進行實戰(zhàn)舉例,我們通過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()是用來判斷某對象是否含有某屬性的,其參數(shù)為屬性名

  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的話可以當觸發(fā)循環(huán)的時候返回false沒有觸發(fā)循環(huán)的時候代表對象為空返回ture

let forNull = (items) => {
    for (let item in items) {
        return false
    }
    return true
}

Object.getOwnPropertyNames判空

這里使用了上文提及的Object.getOwnPropertyNames,將返回的數(shù)組的length作為判斷依據(jù)。

let stuArray = Object.getOwnPropertyNames(obj)
console.log(stuArray.length === 0)

Object.keys()判空

和上個方法一樣,使用數(shù)組作為判斷依據(jù)

let stuArray = Object.getOwnPropertyNames(obj)
console.log(stuArray.length === 0)

hasOwnProperty判空

使用hasOwnProperty是使用for循環(huán)將元素進行判斷如果含有則返回false說明不為空,反之則為空

let forNull = (items) => {
    for (let item in items) {
        if(items.hasOwnProperty(item)){
            return false
        }
    }
    return true
}

附將對象轉換為字符串進行比較

這種方法很不推薦,但也確實是最容易想到的,主要使用JSON.stringify()這個方法對對象進行強轉,貼出來僅供一看: 

var a={};
var b=new Object();
console.log("對象字面量的比較結果:"+(JSON.stringify(a)=="{}"))
console.log("構造函數(shù)的比較結果:"+(JSON.stringify(b)=="{}"))

總結

到此這篇關于JS判斷空對象方法的文章就介紹到這了,更多相關JS判斷空對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 一起來學習TypeScript的類型

    一起來學習TypeScript的類型

    這篇文章主要為大家詳細介紹了TypeScript的類型,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • 一個簡易時鐘效果js實現(xiàn)代碼

    一個簡易時鐘效果js實現(xiàn)代碼

    這篇文章主要為大家詳細介紹了一個簡易時鐘效果js實現(xiàn)代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • 微信小程序開發(fā)之實現(xiàn)自定義Toast彈框

    微信小程序開發(fā)之實現(xiàn)自定義Toast彈框

    Toast相信對于利用微信小程序開發(fā)的朋友們來說都不陌生,有時候官方的樣式并不能滿足業(yè)務要求,怎么辦呢,當然有解決辦法了。有一個插件可以直接幫我們完成WeToast,這篇文章主要給大家介紹了微信小程序開發(fā)之實現(xiàn)自定義Toast彈框的相關資料,需要的朋友可以參考下。
    2017-06-06
  • JavaScript中普通屬性和排序屬性詳解

    JavaScript中普通屬性和排序屬性詳解

    JavaScript屬性是對象中的特性,用于描述對象的狀態(tài),每個JavaScript對象都有一組屬性,可以通過點號(.)或方括號([])訪問和操作這些屬性,本文將給大家講講JavaScript中你所不知道的普通屬性和排序屬性,需要的朋友可以參考下
    2023-09-09
  • 微信小程序實現(xiàn)一張或多張圖片上傳(云開發(fā))

    微信小程序實現(xiàn)一張或多張圖片上傳(云開發(fā))

    這篇文章主要介紹了微信小程序實現(xiàn)一張或多張圖片上傳,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • JS實現(xiàn)搜索關鍵詞的智能提示功能

    JS實現(xiàn)搜索關鍵詞的智能提示功能

    最近在百度搜索的時候,當你輸入一個字或者詞的時候,他會給你們彈出一個下拉框出來,里面是和你相關的搜索提示,效果非常人性化,基于js怎么實現(xiàn)搜索關鍵詞智能提示功能,下面小編通過實例代碼給大家介紹下,需要的的朋友參考下吧
    2017-07-07
  • JavaScript控制兩個列表框listbox左右交換數(shù)據(jù)的方法

    JavaScript控制兩個列表框listbox左右交換數(shù)據(jù)的方法

    這篇文章主要介紹了JavaScript控制兩個列表框listbox左右交換數(shù)據(jù)的方法,實例分析了javascript操作列表框listbox的技巧,非常具有實用價值,需要的朋友可以參考下
    2015-03-03
  • javascript線性漸變一

    javascript線性漸變一

    javascript在處理圖像的能力其實是不弱的,可惜瀏覽器大戰(zhàn)連累了它,這還不算,Adobe 收購Macromedia更讓SVG處于怠工狀態(tài)。
    2009-10-10
  • antd upload控件的data參數(shù)使用

    antd upload控件的data參數(shù)使用

    這篇文章主要介紹了antd upload控件的data參數(shù)使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • 一文詳解如何有效的處理Promise并發(fā)

    一文詳解如何有效的處理Promise并發(fā)

    這篇文章主要為大家介紹如何有效的處理Promise并發(fā)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04

最新評論