您现在的位置是:首页 > 技术教程 正文

前端判断对象为空(6种)

admin 阅读: 2024-03-27
后台-插件-广告管理-内容页头部广告(手机)

当前端需要判断一个对象是否为空时,有多种方法可以实现。

下面列出了六种常见的方法,并提供了相应的例子和解释:

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

主要是获取对象的键名,将对象的属性转换成数组,通过是否存在键名数组的长度是否为0)而判断是否为空

  1. function isEmptyObject(obj) {
  2. return Object.keys(obj).length === 0;
  3. }
  4. const obj1 = {};
  5. console.log(isEmptyObject(obj1)); // true
  6. const obj2 = { name: 'juny long', age: 18};
  7. console.log(isEmptyObject(obj2)); // false

 2.使用for…in循环:

使用for…in循环遍历对象属性,并使用obj.hasOwnProperty()检查属性是否属于对象本身,如果存在任何属性,则返回false,否则返回true。

  1. function isEmptyObject(obj) {
  2. for (let key in obj) {
  3. if (obj.hasOwnProperty(key))
  4. return false;
  5. }
  6. return true;
  7. }
  8. const obj1 = {};
  9. console.log(isEmptyObject(obj1)); // true
  10. const obj2 = { name: 'juny long', age: 18};
  11. console.log(isEmptyObject(obj2)); // false

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

JSON.stringify() 是将一个JavaScript对象或值转换为JSON格式字符串,如果最终只得到一个{},就说明他是一个空对象

  1. function isEmptyObject(obj) {
  2. return JSON.stringify(obj) === '{}';
  3. }
  4. const obj1 = {};
  5. console.log(isEmptyObject(obj1)); // true
  6. const obj2 = { name: 'juny long', age: 18 };
  7. console.log(isEmptyObject(obj2)); // false

 JSON.parse 和 JSON.stringify

在ES5中,增加了一个JSON对象,专门用来处理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: 可选,转换器, 可以用来修改解析生成的原始值。
  • 返回值 JavaScript对象/值, 对应给定JSON文本的对象/值。

解析JSON字符串的时候,需要注意JSON格式的一些规范,不然就容易报错

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

这种方法通过Object.getOwnPropertyNames()方法获取对象的所有属性,然后判断属性数组的长度是否为0来确定对象是否为空。

和上面讲到的Object.keys()相似哦,下面将会简单讲到其区别

  1. function isEmptyObject(obj) {
  2. return Object.getOwnPropertyNames(obj).length === 0;
  3. }
  4. const obj1 = {};
  5. console.log(isEmptyObject(obj1)); // true
  6. const obj2 = { name: 'juny long', age: 18 };
  7. 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 object, array, string 或类jquery选择器。
对象如果被认为为空,那么他们没有自己的可枚举属性的对象

这种方法使用lodash库中的isEmpty()方法,直接判断对象是否为空。

返回值:

(boolean): 如果 value 为空,那么返回 true,否则返回 false。

  1. const _ = require('lodash');
  2. const obj1 = {};
  3. console.log(_.isEmpty(obj1)); // true
  4. const obj2 = { name: 'juny long', age: 18 };
  5. console.log(_.isEmpty(obj2)); // false

5.2.使用underscore库的isEmpty()方法:

这种方法使用underscore库中的isEmpty()方法,直接判断,和lodash库的擦不多。

  1. const _ = require('underscore');
  2. const obj1 = {};
  3. console.log(_.isEmpty(obj1)); // true
  4. const obj2 = { name: 'juny long', age: 18 };
  5. console.log(_.isEmpty(obj2)); // false

以上就是判断对象是否为空的6个方法,希望对大家有帮助!

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索
排行榜