用JS判斷對(duì)象是否為空的幾種常用方法

更新時(shí)間：2024年01月03日 08:33:08 作者：前端后腿哥

如何判斷對(duì)象是否為空是我們?cè)陂_發(fā)過程中經(jīng)常遇到的問題,今天我們將討論幾種常用的方法,以及如何在不同的場(chǎng)景中使用它們,接下來、一起看看吧,對(duì)你肯定有幫助

JSON.stringify

JSON.stringify 方法、大家都用過，我相信很多人也用它來判斷一個(gè)js對(duì)象是否是空對(duì)象。

該方法可以序列化對(duì)象并將其轉(zhuǎn)換為相應(yīng)的JSON字符串格式。

比如：

const obj = {};
console.log(JSON.stringify(obj) === '{}')  // true

注意:

如果存在未定義屬性值，或函數(shù)，Symbol值，在序列化過程中，它們將被忽略或轉(zhuǎn)換為空

請(qǐng)看代碼:

const obj = {
  a: undefined,
  b: function() {},
  c: Symbol()
}
console.log(JSON.stringify(obj) === '{}')  // true

所以，不是很推薦使用該方法。

hasOwnProperty檢測(cè)

第二種方法呢、就是for in循環(huán)，使用hasOwnProperty判斷對(duì)象是否有屬性。

為什么需要使用hasOwnProperty,由于在執(zhí)行對(duì)象遍歷時(shí)，也會(huì)遍歷對(duì)象原型上的屬性。

請(qǐng)看代碼:

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

但是，這種方法，也有一個(gè)問題,for in不能遍歷非枚舉屬性。具體可以看下面這個(gè)方法的演示。

Object.keys

第三種方法，也是一個(gè)常用的方法，也就是Object.keys。大家也肯定用過，但是它也是有問題的。

先看一段代碼:

const obj = {}
Object.prototype.a = 1
console.log(Object.keys(obj).length === 0)  // true

看似沒啥問題，但是Object.keys只能遍歷可枚舉的屬性，但不能遍歷非枚舉的屬性。

我們使用Object.defineProperty將enumerable屬性設(shè)置為false進(jìn)行測(cè)試。

示例如下：

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獲取由對(duì)象本身所有屬性名稱（包括非枚舉屬性）組成的數(shù)組。

const obj = {}
Object.defineProperty(obj, 'a', {
  value: 1,
  enumerable: false
})
console.log(Object.getOwnPropertyNames(obj))  // [ 'a' ]

但是這個(gè)方法也有一個(gè)缺點(diǎn)。

Object.getOwnPropertyNames無法獲取作為名稱屬性的Symbol值。

請(qǐng)看下面的代碼:

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唯一已知的缺點(diǎn)是無法獲取以Symbol為名的屬性。

那我們是不是可以進(jìn)一步使用Object.getOwnPropertySymbols來獲取以Symbol為名的屬性的方式來結(jié)合一起使用。

小提示：

Object.getOwnPropertySymbols 只能獲取以Symbol為名的屬性

兩者的結(jié)合是否是完美的解決方案？讓我們做一個(gè)簡(jiǎn)單的測(cè)試：

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

經(jīng)過測(cè)試，上述方法確實(shí)可以解決問題，但比較麻煩。有沒有更好的方法呢？答案是肯定的。

Reflect.ownKeys

最后、再來介紹一個(gè)更簡(jiǎn)單，更靠譜的方法。那就是使用Reflect.ownKeys;

Reflect.ownKeys 該方法返回一個(gè)由目標(biāo)對(duì)象自身屬性組成的數(shù)組。其返回值等同于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

你學(xué)會(huì)了嗎？學(xué)會(huì)的話、點(diǎn)個(gè)贊吧。

到此這篇關(guān)于用JS判斷對(duì)象是否為空的幾種常用方法的文章就介紹到這了,更多相關(guān)JS判斷對(duì)象是否為空內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: