前端判断对象为空的6种方法举例

 更新时间:2024年05月20日 11:57:51   作者:じòぴé南冸じょうげん  
在前端中可以使用多种方法来判断一个对象是否为空,这篇文章主要给大家介绍了关于前端判断对象为空的6种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

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

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

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格式的数据。
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()相似哦,下面将会简单讲到其区别

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 object, array, string 或类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种方法的文章就介绍到这了,更多相关前端判断对象为空内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 学习JS中的DOM节点以及操作

    学习JS中的DOM节点以及操作

    本篇文章给大家整理了关于JS中DOM节点的相关知识点以及代码实例,有兴趣的朋友可以跟着学习下。
    2018-04-04
  • 基于BootStrap multiselect.js实现的下拉框联动效果

    基于BootStrap multiselect.js实现的下拉框联动效果

    当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择。在网上找了半天找到了解决方案,具体实现代码大家参考下本文吧
    2017-07-07
  • 细说webpack6 Babel的使用详解

    细说webpack6 Babel的使用详解

    这篇文章主要介绍了细说webpack6 Babel的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • js实现复选框的全选和取消全选效果

    js实现复选框的全选和取消全选效果

    在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,本文将简单介绍一下JS如何实现此功能
    2017-01-01
  • 老生常谈Javascript中的原型和this指针

    老生常谈Javascript中的原型和this指针

    下面小编就为大家带来一篇老生常谈Javascript中的原型和this指针。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-10-10
  • 微信小程序自动化部署的全过程

    微信小程序自动化部署的全过程

    由于微信小程序需要在微信小程序助手上发布,比较麻烦,可以配置CI 自动化的发布,下面这篇文章主要给大家介绍了关于微信小程序自动化部署的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 一款好用的移动端滚动插件BetterScroll

    一款好用的移动端滚动插件BetterScroll

    BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件,用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景,感兴趣的一起来了解一下
    2021-09-09
  • javascript 实现 秒杀,团购 倒计时展示的记录 分享

    javascript 实现 秒杀,团购 倒计时展示的记录 分享

    这篇文章介绍了javascript 实现 秒杀,团购 倒计时展示的记录方法,有需要的朋友可以参考一下
    2013-07-07
  • js网页中随意拖动的小方块实现代码

    js网页中随意拖动的小方块实现代码

    用CSS和JS制作的在网页中可以随意拖动的小方块。
    2008-08-08
  • Asp.Net之JS生成分页条的方法

    Asp.Net之JS生成分页条的方法

    下面小编就为大家带来一篇Asp.Net之JS生成分页条的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论