前端判断对象为空的6种方法：Object.keys、JSON.stringify等

前言

在前端开发中，判断一个对象是否为空是常见的需求，有多种实现方式可供选择。

以下列举了六种常见的判断方法，并附带相应的代码示例与详细说明。

1. 使用Object.keys()方法

该方法通过获取对象的所有键名，将属性转换为数组，进而通过判断数组长度是否为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循环

通过for…in循环遍历对象的所有属性，并结合obj.hasOwnProperty()检查属性是否属于对象自身。若存在任何自有属性则返回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()将JavaScript对象或值转换为JSON格式的字符串。若转换后的结果为'{}'，则表明该对象为空。

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标准中引入了JSON对象，专门用于处理JSON格式数据。该对象仅包含两个方法：parse 和 stringify，它不是构造函数，也不具备其他属性。

1. JSON.stringify() 语法如下：

（返回指定数据的JSON格式字符串）
JSON.stringify(value[, replacer [, space]])
value：需要序列化为JSON字符串的JavaScript对象或值。
replacer：可选参数，用于控制序列化过程中值的处理方式。
space：可选参数，指定用于缩进的空白字符串，以美化输出格式。

2. JSON.parse() 语法如下：

（用于解析JSON字符串，返回对应的JavaScript值或对象）
JSON.parse(text[, reviver])
text：需要被解析的字符串。若传入数字则转换为十进制数字输出；若传入布尔值则直接输出；若传入null则输出null。不支持其他类型，否则将报错。
reviver：可选参数，作为转换器可用于修改解析生成的原始值。
返回值：对应给定JSON文本的JavaScript对象或值。

在解析JSON字符串时，需严格遵循JSON格式规范，否则容易引发错误。

4. ES6的Object.getOwnPropertyNames()方法

该方法通过获取对象的所有属性名，判断属性数组的长度是否为0，从而确定对象是否为空。

此方法与前述Object.keys()类似，下文将简要说明两者的区别。

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()的区别：

相同点：

两者功能一致，通常用于获取JSON对象中的所有属性。

差异点：

Object.getOwnPropertyNames：返回的是对象自身所有的属性，

Object.keys(obj)：返回的是所有可枚举属性，即属性下的enumerable: false

5. 第三方库

5.1 使用lodash库的isEmpty()方法

检查 value 是否为一个空对象、集合、映射或Set。判断依据为：除非是具有枚举属性的对象、length大于0的arguments对象、数组、字符串或类jQuery选择器，否则视为空。

若对象被认为为空，则其不包含任何自身的可枚举属性。

该方法直接调用lodash库中的isEmpty()函数来判断对象是否为空。

返回值：

(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

总结

至此，关于前端判断对象为空的六种方法介绍完毕。如需了解更多相关内容，请搜索本站过往文章或继续浏览后续文章，感谢大家的支持！

前端判断对象为空的6种方法详解

前言