用JS判斷對象是否為空的幾種常用方法
JSON.stringify
JSON.stringify 方法、大家都用過，我相信很多人也用它來判斷一個js對象是否是空對象。
該方法可以序列化對象并將其轉換為相應的JSON字符串格式。
比如：
const obj = {};
console.log(JSON.stringify(obj) === '{}') // true
注意:
如果存在未定義屬性值，或函數，Symbol值，在序列化過程中，它們將被忽略或轉換為空
請看代碼:
const obj = {
a: undefined,
b: function() {},
c: Symbol()
}
console.log(JSON.stringify(obj) === '{}') // true
所以，不是很推薦使用該方法。
hasOwnProperty檢測
第二種方法呢、就是for in循環(huán)，使用hasOwnProperty判斷對象是否有屬性。
為什么需要使用hasOwnProperty,由于在執(zhí)行對象遍歷時，也會遍歷對象原型上的屬性。
請看代碼:
const obj = {}
Object.prototype.a = 1
function isEmptyObj(obj) {
let flag = true
for (let o in obj) {
if (obj.hasOwnProperty(o)) {
flag = false
break
}
}
return flag
}
console.log(isEmptyObj(obj)) // true
但是，這種方法，也有一個問題,for in不能遍歷非枚舉屬性。具體可以看下面這個方法的演示。
Object.keys
第三種方法，也是一個常用的方法，也就是Object.keys。大家也肯定用過，但是它也是有問題的。
先看一段代碼:
const obj = {}
Object.prototype.a = 1
console.log(Object.keys(obj).length === 0) // true
看似沒啥問題，但是Object.keys只能遍歷可枚舉的屬性，但不能遍歷非枚舉的屬性。
我們使用Object.defineProperty將enumerable屬性設置為false進行測試。
示例如下：
const obj = {}
Object.defineProperty(obj, 'a', {
value: 1,
enumerable: false
})
console.log(obj.a) // 1
console.log(Object.keys(obj).length === 0) // true
所以，與前面的for in類似，也不推薦使用。
Object.getOwnPropertyNames
既然，都無法獲取非枚舉屬性，那有沒有方法可以獲取呢？
自然是有的。
我們可以使用Object.getOwnPropertyNames獲取由對象本身所有屬性名稱（包括非枚舉屬性）組成的數組。
const obj = {}
Object.defineProperty(obj, 'a', {
value: 1,
enumerable: false
})
console.log(Object.getOwnPropertyNames(obj)) // [ 'a' ]
但是這個方法也有一個缺點。
Object.getOwnPropertyNames無法獲取作為名稱屬性的Symbol值。
請看下面的代碼:
const a = Symbol()
const obj = {
[a]: 1
}
console.log(obj) // { [Symbol()]: 1 }
console.log(Object.getOwnPropertyNames(obj).length === 0) // true
console.log(JSON.stringify(obj) === '{}') // true
console.log(Object.keys(obj).length === 0) // true
所以，也不推薦。
Object.getOwnPropertyNames 和 Object.getOwnPropertySymbols
既然Object.getOwnPropertyNames唯一已知的缺點是無法獲取以Symbol為名的屬性。
那我們是不是可以進一步使用Object.getOwnPropertySymbols來獲取以Symbol為名的屬性的方式來結合一起使用。
小提示：
Object.getOwnPropertySymbols只能獲取以Symbol為名的屬性
兩者的結合是否是完美的解決方案？讓我們做一個簡單的測試：
const a = Symbol()
const obj1 = {
[a]: 1
}
const obj2 = {b: 2}
const obj3 = {}
Object.defineProperty(obj3, 'a', {
value: 1,
enumerable: false
})
const obj4 = {}
function getLength(obj) {
return Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)).length
}
console.log(getLength(obj1) === 0) // false
console.log(getLength(obj2) === 0) // false
console.log(getLength(obj3) === 0) // false
console.log(getLength(obj4) === 0) // true
經過測試，上述方法確實可以解決問題，但比較麻煩。有沒有更好的方法呢？答案是肯定的。
Reflect.ownKeys
最后、再來介紹一個更簡單，更靠譜的方法。那就是使用Reflect.ownKeys;
Reflect.ownKeys 該方法返回一個由目標對象自身屬性組成的數組。其返回值等同于Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target));
如代碼所示:
const a = Symbol()
const obj1 = {
[a]: 1
}
const obj2 = {b: 2}
const obj3 = {}
Object.defineProperty(obj3, 'a', {
value: 1,
enumerable: false
})
const obj4 = {}
console.log(Reflect.ownKeys(obj1).length === 0) // false
console.log(Reflect.ownKeys(obj2).length === 0) // false
console.log(Reflect.ownKeys(obj3).length === 0) // false
console.log(Reflect.ownKeys(obj4).length === 0) // true
你學會了嗎？學會的話、點個贊吧。
到此這篇關于用JS判斷對象是否為空的幾種常用方法的文章就介紹到這了,更多相關JS判斷對象是否為空內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
下面小編就為大家?guī)硪黄猨s 模仿錨點定位的實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了前端使用fetch接收流式數據處理的相關資料,文中描述了一個流式數據處理的demo,需要后端服務配合進行接口調試,需要的朋友可以參考下2025-02-02
html2pdf.js是基于html2canvas和jsPDF的輕量級庫,可以在客戶端實現網頁到PDF的轉換,這篇文章主要介紹了如何使用html2pdf.js生成pdf文件的相關資料,需要的朋友可以參考下2025-04-04
最近開始練習js的基本操作,常常因為一些小疏忽導致頁面效果無法實現,下面這篇文章主要給大家介紹了關于利用JavaScript實現簡單全選和不全選的思路和方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了js跨瀏覽器的事件偵聽器和事件對象的使用方法,需要的朋友可以參考下2015-12-12
這篇文章介紹了javascript中直接寫php代碼的方法，有需要的朋友可以參考一下2013-07-07
這篇文章我們來看看如何利用原生的JavaScript實現統(tǒng)計文本的行數，代碼實現起來很簡單，有需要的可以參考借鑒。2016-08-08
Bootstrap 粘頁腳，說得具體一點就是“將固定高度的頁腳緊貼頁面底部”，本文給大家分享具有實現代碼，感興趣的朋友參考下吧2016-03-03
登錄功能是許多小程序必備的一個功能，通過登錄系統(tǒng)，我們可以記錄用戶在我們的小程序里一些行為，在后臺我們也可以模糊地確認用戶。下面這篇文章主要給大家介紹了關于小程序登錄鑒權的相關資料，需要的朋友可以參考下。2018-04-04
這篇文章主要介紹了javascript改變this指向的方法匯總的相關資料,需要的朋友可以參考下2022-09-09