脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JSON.stringify运用

JSON.stringify实例详解以及灵活运用

 更新时间：2022年03月11日 15:05:47   作者：蝴蝶效应  
在向服务器发送数据时一般是字符串,我们可以使用 JSON.stringify()方法将JavaScript对象转换为字符串,下面这篇文章主要给大家介绍了关于JSON.stringify及灵活运用的相关资料,需要的朋友可以参考下

前言

工作中经常使用 JSON.stringify 方法存储 localStorage，深拷贝对象，用的最多的就是第一个参数，甚至不知道它还有第二个和第三个参数，所以详细的整理了一下 JSON.stringify 用法和特性，使我们能够真正的能灵活运用这个方法。

语法

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

参数

replacer 参数

replacer 参数可以是一个函数或者一个数组。作为函数，它有两个参数，键（key）和值（value），它们都会被序列化。

值得注意的是，在开始时, replacer 函数会被传入一个空字符串作为 key 值，value代表着要被 stringify 的这个对象。随后每个对象或数组上的属性会被依次传入。

总的来说 replacer 参数就是用来手动忽略一些不想被序列化的属性，有点类似过滤器的作用

var foo = {
  id: 1,
  name: "sf",
  age: 18,
};
//作为函数，函数没有返回值或者返回值为 undefined 时，忽略这个属性值
JSON.stringify(foo, (key, value) => {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
});
//{"id":1,"age":18}

//作为数组，数组的值代表将被序列化成 JSON 字符串的属性名
JSON.stringify(foo, ['id',"name"]);
//{"id":1,"name":"sf"}

space 参数

space 参数用来控制结果字符串里面的间距。如果是一个数字, 则在字符串化时每一级别会比上一级别缩进多这个数字值的空格（最多10个空格）；如果是一个字符串，则每一级别会比上一级别多缩进该字符串（或该字符串的前10个字符）。实际使用基本都是用来美化输出。

let a = JSON.stringify({ a: 1, b: 2 }, null, 2);
let b = JSON.stringify({ a: 1, b: 2 }, null, "  ");
console.log(a == b); //true

JSON.stringify({ a: 1, b: 2 }, null, "--");
// {
// --"a": 1,
// --"b": 2
// }

特性描述

1. undefined、Symbol值、函数

  • 出现在对象属性值中: undefined、Symbol值、函数，在序列化过程中将会被忽略
  • 出现在数组中: undefined、Symbol值、函数 会被转化为 null
  • 单独转换时: 会返回 undefined
const obj = {
  a: "a",
  b: undefined,
  c: Symbol(),
  d: function () {},
};
JSON.stringify(obj)
// {"a":"a"}
const arry = [undefined, Symbol("c"), function () {}];
JSON.stringify(arry); 
//[null,null,null]
JSON.stringify(undefined); 
// undefined
JSON.stringify(Symbol(111));
// undefined
JSON.stringify(function () {});
// undefined

2. 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中

正如在第一特性所说，JSON.stringify() 序列化时会忽略一些特殊的值，所以不能保证序列化后的字符串还是以特定的顺序出现（数组除外）。

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

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

4. 转换值如果有 toJSON() 方法，该方法定义什么值将被序列化

const obj = {
  a: "aaa",
  toJSON() {
    return "hello world";
  },
};
JSON.stringify(obj);
// "hello world"

5. 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。

const obj = {
  name: "loopObj",
};
const loopObj = {
  obj,
};
// 对象之间形成循环引用，形成闭环
obj.loopObj = loopObj;
JSON.stringify(obj);
//TypeError: Converting circular structure to JSON

6. 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。

. 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。

const obj = {
  a: "aaa",
  [Symbol("foo")]: "foo",
};
JSON.stringify(obj);
// {"a":"aaa"}
JSON.stringify(obj, function (k, v) {
  if (typeof k === "symbol") {
    return "a symbol";
  }
});
// undefined

7. 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。

JSON.stringify({
  date: new Date("2022-02-02"),
})
// {"date":"2022-02-02T00:00:00.000Z"}

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

JSON.stringify([NaN, Infinity, 1 / 0, Number("a")]);
// [null,null,null,null]

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

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

应用

localStorage

localStorage 中的键值对总是以字符串的形式存储，所以当我们需要把一个对象存在 localStorage 中时，只能用 JSON.stringify 将其转化成字符串存储，使用的时候用 JSON.parse 方法去取

const userInfo = { user: "admin" };
localStorage.setItem("userInfo", JSON.stringify(userInfo));
JSON.parse(localStorage.getItem("userInfo"));
// {user: 'admin'}

对象深拷贝

使用 JSON.parse(JSON.stringify) 是实现对象的深拷贝最简单粗暴的方法。但是由于 JSON.stringify 的一些特性，会产生问题，例如：

  • undefined、Symbol、 函数， 对象中会被忽略，数组中会被序列化成 null。
  • NaN、Infinity 和 -Infinity 会被序列化成 null。
  • 循环引用问题，stringify 会报错。

当确定不存在以上情况时，才考虑使用 JSON.parse(JSON.stringify) 进行深拷贝。

属性过滤

当接口返回一大堆数据，我们只想存某几个属性的时候，通过 replacer 函数过滤属性是一个不错的小技巧。

var foo = {
  id: 1,
  name: "sf",
  age: 18,
};
localStorage.setItem("user", JSON.stringify(foo, ["id", "name"]));
localStorage.getItem("user");
//{"id":1,"name":"sf"}

总结

到此这篇关于JSON.stringify实例详解以及灵活运用的文章就介绍到这了,更多相关JSON.stringify运用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 简单实现JS对dom操作封装

    简单实现JS对dom操作封装

    这篇文章主要介绍了简单实现JS对dom操作封装，需要的朋友可以参考下
    2015-12-12
  • ES6学习教程之Map的常用方法总结

    ES6学习教程之Map的常用方法总结

    Map 是 ES6 中新增的一种数据结构，与 Set 一起添加，其实功能都差不多。下面这篇文章主要给大家总结介绍了关于ES6学习教程之Map的常用方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-08-08
  • javascript 静态对象和构造函数的使用和公私问题

    javascript 静态对象和构造函数的使用和公私问题

    静态对象和构造函数的使用区别 平常我们会经常使用JSON形式，或者var obj=function(){}亦或function(){}这么几种对象的构建办法，有时会认为这是等价的办法，然而他们还有不同。
    2010-03-03
  • 微信小程序实现的日期午别医生排班表功能示例

    微信小程序实现的日期午别医生排班表功能示例

    这篇文章主要介绍了微信小程序实现的日期午别医生排班表功能,结合实例形式分析了微信小程序实现基于日期时间、针对上午、下午、凌晨、夜间等时段的排班功能相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 详解微信小程序文件下载--视频和图片

    详解微信小程序文件下载--视频和图片

    这篇文章主要介绍了微信小程序文件下载视频和图片，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 游戏开发中如何使用CocosCreator进行音效处理

    游戏开发中如何使用CocosCreator进行音效处理

    这篇文章主要介绍了游戏开发中如何使用CocosCreator进行音效处理，并对音效组件进行封装，方便以后使用，同学们看完之后，一定要亲手实验一下
    2021-04-04
  • js求数组最大值的八种具体实现方法

    js求数组最大值的八种具体实现方法

    数组如何求最大值,想必很多的朋友都不会吧,下面这篇文章主要给大家介绍了关于使用js求数组最大值的八种方法具体实现的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-09-09
  • JavaScript中常见的数据类型判断方法小结

    JavaScript中常见的数据类型判断方法小结

    在 JS 编程中,正确判断数据类型是必备技能,也是面试常问的内，本文将探讨四种常用的数据类型判断方法，通过了解它们的特点和适用范围,能够更好地处理不同数据类型的情况,避免出现错误和提升代码质量,需要的朋友可以参考下
    2023-06-06
  • js+html5实现页面可刷新的倒计时效果

    js+html5实现页面可刷新的倒计时效果

    这篇文章主要为大家详细介绍了js+html5实现页面可刷新的倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 详解JS几种变量交换方式以及性能分析对比

    详解JS几种变量交换方式以及性能分析对比

    本篇文章主要介绍了JS几种变量交换方式以及性能分析对比，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2016-11-11

最新评论