前端判斷對(duì)象為空的6種方法舉例

更新時(shí)間：2024年05月20日 11:57:51 作者：じòぴé南冸じょうげん

在前端中可以使用多種方法來判斷一個(gè)對(duì)象是否為空,這篇文章主要給大家介紹了關(guān)于前端判斷對(duì)象為空的6種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

當(dāng)前端需要判斷一個(gè)對(duì)象是否為空時(shí)，有多種方法可以實(shí)現(xiàn)。

下面列出了六種常見的方法，并提供了相應(yīng)的例子和解釋：

1.使用Object.keys()方法：

主要是獲取對(duì)象的鍵名，將對(duì)象的屬性轉(zhuǎn)換成數(shù)組，通過是否存在鍵名（數(shù)組的長(zhǎng)度是否為0）而判斷是否為空

function isEmptyObject(obj) {
  return Object.keys(obj).length === 0;
}

const obj1 = {};
console.log(isEmptyObject(obj1)); // true

const obj2 = { name: 'juny long', age: 18};
console.log(isEmptyObject(obj2)); // false

2.使用for…in循環(huán)：

使用for…in循環(huán)遍歷對(duì)象屬性，并使用obj.hasOwnProperty()檢查屬性是否屬于對(duì)象本身，如果存在任何屬性，則返回false，否則返回true。

function isEmptyObject(obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key))
      return false;
  }
  return true;
}

const obj1 = {};
console.log(isEmptyObject(obj1)); // true

const obj2 = { name: 'juny long', age: 18};
console.log(isEmptyObject(obj2)); // false

3.使用JSON.stringify()方法：

JSON.stringify() 是將一個(gè)JavaScript對(duì)象或值轉(zhuǎn)換為JSON格式字符串，如果最終只得到一個(gè){}，就說明他是一個(gè)空對(duì)象

function isEmptyObject(obj) {
  return JSON.stringify(obj) === '{}';
}

const obj1 = {};
console.log(isEmptyObject(obj1)); // true

const obj2 = { name: 'juny long', age: 18 };
console.log(isEmptyObject(obj2)); // false

JSON.parse 和 JSON.stringify

在ES5中，增加了一個(gè)JSON對(duì)象，專門用來處理JSON格式的數(shù)據(jù)。
JSON是一個(gè)對(duì)象，但只有兩個(gè)方法：parse 和 stringify，不能作為構(gòu)造函數(shù)，也無屬性

1.JSON.stringify() 語法為：

（返回指定數(shù)據(jù)的JSON格式字符串）
JSON.stringify(value[, replacer [, space]])
value：將要序列化成一個(gè)JSON字符串的JavaScript對(duì)象或值。
replacer 可選，用于處理將要序列化的值。
space 可選，指定縮進(jìn)用的空白字符串，用于美化輸出。

2.JSON.parse() 語法為：

（用來解析JSON字符串得到對(duì)應(yīng)的JavaScript值或?qū)ο螅?/p>
JSON.parse(text[, reviver])
text：要被解析成的字符串。
如果傳入數(shù)字則會(huì)轉(zhuǎn)換成十進(jìn)制數(shù)字輸出。
如果傳入布爾值則直接輸出。
如果傳入null則輸出null。
不支持其他類型的值，否則報(bào)錯(cuò)。
reviver：可選，轉(zhuǎn)換器, 可以用來修改解析生成的原始值。
返回值： JavaScript對(duì)象/值, 對(duì)應(yīng)給定JSON文本的對(duì)象/值。

在解析JSON字符串的時(shí)候，需要注意到JSON格式的一些規(guī)范，不然就容易報(bào)錯(cuò)。

4.ES6的Object.getOwnPropertyNames()方法：

這種方法通過Object.getOwnPropertyNames()方法獲取對(duì)象的所有屬性，然后判斷屬性數(shù)組的長(zhǎng)度是否為0來確定對(duì)象是否為空。

和上面講到的Object.keys()相似哦，下面將會(huì)簡(jiǎn)單講到其區(qū)別

function isEmptyObject(obj) {
  return Object.getOwnPropertyNames(obj).length === 0;
}

const obj1 = {};
console.log(isEmptyObject(obj1)); // true

const obj2 = { name: 'juny long', age: 18 };
console.log(isEmptyObject(obj2)); // false

Object.getOwnPropertyNames()與Object.keys()的區(qū)別：

相同點(diǎn)：

功能是一樣的，一般是用來獲取一個(gè)JSON對(duì)象中所有屬性

差異點(diǎn)：

Object.getOwnPropertyNames：返回的是對(duì)象所有自己的屬性，

Object.keys(obj)：返回的是所有可枚舉屬性，也就是屬性下的enumerable: false

5.第三方庫

5.1使用lodash庫的isEmpty()方法：

檢查 value 是否為一個(gè)空對(duì)象，集合，映射或者set。判斷的依據(jù)是除非是有枚舉屬性的對(duì)象，length 大于 0 的 arguments object, array, string 或類jquery選擇器。

對(duì)象如果被認(rèn)為為空，那么他們沒有自己的可枚舉屬性的對(duì)象。

這種方法使用lodash庫中的isEmpty()方法，直接判斷對(duì)象是否為空。

返回值：

(boolean): 如果 value 為空，那么返回 true，否則返回 false。

const _ = require('lodash');

const obj1 = {};
console.log(_.isEmpty(obj1)); // true

const obj2 = { name: 'juny long', age: 18 };
console.log(_.isEmpty(obj2)); // false

5.2.使用underscore庫的isEmpty()方法：

這種方法使用underscore庫中的isEmpty()方法，直接判斷，和lodash庫的擦不多。

const _ = require('underscore');

const obj1 = {};
console.log(_.isEmpty(obj1)); // true

const obj2 = { name: 'juny long', age: 18 };
console.log(_.isEmpty(obj2)); // false