JavaScript判断对象是否为空对象的几种常见方法

 更新时间:2023年06月12日 11:46:20   作者:小二·  
经典面试题,研发时也经常遇见的一个问题,如何判断一个对象是空对象,这篇文章主要给大家介绍了关于JavaScript判断对象是否为空对象的几种常见方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
var data = {};
var b = $.isEmptyObject(data); //true

判断是否为空对象在实际开发中很常见,今天就让我们来整理一下有哪些方法吧。

1、空对象对应的字符串为 "{}"

var data = {};
var b = JSON.stringify(data) == "{}";
console.log(b); // true

2、for in

var obj = {};
var b = function () {
  for (var key in obj) {
    return false;
  }
  return true;
};
console.log(b()); //true

3、jquery 的 isEmptyObject()方法

这个方法是对第二个方法的封装。

var data = {};
var b = $.isEmptyObject(data);
console.log(b); //true

4、Object.getOwnPropertyNames()

Object 对象的 getOwnPropertyNames 方法,获取到对象中的属性名,存到一个数组中,返回数组对象,我们可以通过判断数组的 length 来判断此对象是否为空。

var data = {};
var arr = Object.getOwnPropertyNames(data);
console.log(arr.length == 0); // true

5、ES6 的 Object.keys()

此方法也是返回对象中属性名组成的数组。

var data = {};
var arr = Object.keys(data);
console.log(arr.length == 0); // true

JSON.stringify()扩展

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

语法:

JSON.stringify(value[, replacer[, space]])

参数说明:

  • value:必需,要转换的 JavaScript 值(通常为对象或数组)。
  • replacer: 可选。用于转换结果的函数或数组。 如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。 如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""。如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
  • space:可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 也可以使用非数字,如:\t。
  • 返回值:返回包含 JSON 文本的字符串。

JSON.stringify()特性挺多的,具体如下:

1、第一大特性

对于 undefined、任意的函数以及 symbol 三个特殊的值分别作为对象属性的值、数组元素、单独的值时 JSON.stringify() 将返回不同的结果。 来看这道题:

const data = {
  a: "aaa",
  b: undefined,
  c: Symbol("dd"),
  fn: function () {
    return true;
  },
};
JSON.stringify(data); // 输出:?
// "{"a":"aaa"}"

这是因为 undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 将跳过(忽略)对它们进行序列化。

假设 undefined、任意的函数以及 symbol 值作为数组元素会是怎样呢?

JSON.stringify([
  "aaa",
  undefined,
  function aa() {
    return true;
  },
  Symbol("dd"),
]); // 输出:?
// "["aaa",null,null,null]"

这是因为 undefined、任意的函数以及 symbol 作为数组元素值时,JSON.stringify() 会将它们序列化为 null。

还有,undefined、任意的函数以及 symbol 被 JSON.stringify() 作为单独的值进行序列化时都会返回 undefined。

JSON.stringify(function a() {
  console.log("a");
});
// undefined
JSON.stringify(undefined);
// undefined
JSON.stringify(Symbol("dd"));
// undefined

小结

  • undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 对跳过(忽略)它们进行序列化。
  • undefined、任意的函数以及 symbol 作为数组元素值时,JSON.stringify() 将会将它们序列化为 null。
  • undefined、任意的函数以及 symbol 被 JSON.stringify() 作为单独的值进行序列化时,都会返回 undefined。

2、第二大特性

非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。因为 JSON.stringify() 序列化时会忽略一些特殊的值,所以不能保证序列化后的字符串还是以特定的顺序出现(数组除外)。

const data = {
  a: "aaa",
  b: undefined,
  c: Symbol("dd"),
  fn: function () {
    return true;
  },
  d: "ddd",
};
JSON.stringify(data); // 输出:?
// "{"a":"aaa","d":"ddd"}"
JSON.stringify([
  "aaa",
  undefined,
  function aa() {
    return true;
  },
  Symbol("dd"),
  "eee",
]); // 输出:?
// "["aaa",null,null,null,"eee"]"

3、第三大特性

转换值如果有 toJSON() 函数,该函数返回什么值,序列化结果就是什么值,并且忽略其他属性的值。

JSON.stringify({
    say: "hello JSON.stringify",
    toJSON: function() {
      return "today i learn";
    }
  })
// "today i learn"

4、第四大特性

JSON.stringify() 将会正常序列化 Date 的值。

JSON.stringify({ now: new Date() });
// "{"now":"2019-12-08T07:42:11.973Z"}"

5、第五大特性

NaN 和 Infinity 格式的数值及 null 都会被当做 null。

JSON.stringify(NaN)
// "null"
JSON.stringify(null)
// "null"
JSON.stringify(Infinity)
// "null"

6、第六大特性

布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。

JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
// "[1,"false",false]"

7、第七大特性

其他类型的对象,包括 Map/Set/WeakMap/WeakSet,仅会序列化可枚举的属性。

// 不可枚举的属性默认会被忽略:
JSON.stringify( 
    Object.create(
        null, 
        { 
            x: { value: 'json', enumerable: false }, 
            y: { value: 'stringify', enumerable: true } 
        }
    )
);
// "{"y":"stringify"}"

8、第八大特性

深拷贝最粗暴的方式是JSON.parse(JSON.stringify()),这个方式实现深拷贝会因为序列化的诸多特性从而导致诸多的坑点:比如现在我们要说的循环引用问题。

// 对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误。 
const obj = {
  name: "loopObj"
};
const loopObj = {
  obj
};
// 对象之间形成循环引用,形成闭环
obj.loopObj = loopObj;
// 封装一个深拷贝的函数
function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}
// 执行深拷贝,抛出错误
deepClone(obj)
/**
 VM44:9 Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'loopObj' -> object with constructor 'Object'
    --- property 'obj' closes the circle
    at JSON.stringify (<anonymous>)
    at deepClone (<anonymous>:9:26)
    at <anonymous>:11:13
 */

总结

到此这篇关于JavaScript判断对象是否为空对象的几种常见方法的文章就介绍到这了,更多相关js判断对象为空对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js loading加载效果实现代码

    js loading加载效果实现代码

    js loading加载效果实现代码,这个是在asp.net下的输出j代码,实现页面加载效果。
    2009-11-11
  • uniapp实现滚动触底加载项目实战

    uniapp实现滚动触底加载项目实战

    这篇文章主要为大家介绍了uniapp实现滚动触底加载项目实战方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • js预载入和JavaScript Image()对象使用介绍

    js预载入和JavaScript Image()对象使用介绍

    为了解决在canvas使用drawImage()时,遇到img对象来不及加载的问题; 我最终在html文档加载中,使用了下面"数组加载图像的办法”解决,如果有其他方法,请给予指点!
    2011-08-08
  • JS对象与json字符串相互转换实现方法示例

    JS对象与json字符串相互转换实现方法示例

    这篇文章主要介绍了JS对象与json字符串相互转换实现方法,结合实例形式分析了js对象与json字符串相互转换的相关操作技巧与注意事项,需要的朋友可以参考下
    2018-06-06
  • 防止按钮在短时间内被多次点击的方法

    防止按钮在短时间内被多次点击的方法

    一个按钮可以在短时间内多次点击,那么有可能会被用户恶意点击,下面有个不错的方法可以有效制止,希望对大家有所帮助
    2014-03-03
  • 详解uni-app中的样式

    详解uni-app中的样式

    这篇文章主要为大家介绍了uni-app中的样式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 详解微信小程序-扫一扫 wx.scanCode() 扫码大变身

    详解微信小程序-扫一扫 wx.scanCode() 扫码大变身

    这篇文章主要介绍了微信小程序-扫一扫wx.scanCode() 扫码大变身,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript实现日期格式化的方法汇总

    JavaScript实现日期格式化的方法汇总

    日期是许多JavaScript应用程序的基本组成部分,无论是在网页上显示当前日期还是处理用户输入以安排事件,本文将探讨在 JavaScript 中格式化日期的各种技术,希望对大家有所帮助
    2023-06-06
  • TypeScript 安装使用及基本数据类型

    TypeScript 安装使用及基本数据类型

    这篇文章主要介绍了TypeScript 安装使用及基本数据类型,本文分步骤给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • JS实现简单的tab切换选项卡效果

    JS实现简单的tab切换选项卡效果

    这篇文章主要介绍了JS实现简单的tab切换选项卡效果,涉及javascript结合鼠标事件对页面元素属性动态操作的相关技巧,需要的朋友可以参考下
    2016-09-09

最新评论