JSON.stringify() 的妙用

更新日期: 2022-08-31阅读: 707标签: json

描述

JSON.stringify()的作用就是把 JavaScript 对象或数组或其他简单值转换为字符串。它还可以用于对象的深拷贝;对 JSON 字符串进行格式化(缩进);在转换之前对值进行替换操作。

特殊类型的处理

JSON.stringify()遇到函数、日期等类型的值会进行特殊处理。为了让输出结果好看一些,在函数的第三个参数,指明字符串化后的结果缩进 2 个空格:

let jsonStr = JSON.stringify(
  {
    func: function () {},
    date: new Date(),
    unde: undefined,
    null: null,
    nan: NaN,
    infi: Infinity,
    infi0: -Infinity,
    regp: new RegExp(/Android|iPad/)
  },
  null,
  2
);

console.log(jsonStr);

输出结果如下所示:

{
  "date": "2022-08-31T13:34:25.223Z",
  "null": null,
  "nan": null,
  "infi": null,
  "infi0": null,
  "regp": {}
}

JSON.stringify()对以下类型的值进行特殊处理:

  1. 函数:函数直接被忽略,不输出到字符串中。
  2. Date:原本 new 一个日期的结果时 "Wed Aug 31 2022 21:38:37 GMT+0800 (中国标准时间)",在被字符串化之后变成了如上格式。
  3. undefined:undefined 直接被忽略,不输出。
  4. null:null 就是 null 本身。
  5. NaN:Nan 类型被转化成 null。
  6. Infinity 和 -Infinity:都被转化成 null。
  7. RegExp:RegExp 直接输出一个空对象 {}。

运用场景

对象深拷贝

通过=无法真正拷贝一个对象,而是引用对象的内存地址,详细请看JavaScript - 对象引用和复制

JSON.stringify()和JSON.parse()一起搭配使用就可以深拷贝一个对象:

let obj = { age: 10, name: "XiaoMing" };
let copy = JSON.parse(JSON.stringify(obj));

obj.age = 12;
copy.age = 14;

console.log(obj.age, copy.age); // => 12, 14

修改原对象obj的 age 属性之后不影响深拷贝之后的对象copy的属性。

存储对象到 LocalStorage

window.localStorage.setItem(key, value)的两个参数都只接受字符串类型的值,如果强行把对象、数组存储到本地存储里面。

所以,这时候就不得不把对象、数组进行字符化,也就是用JSON.stringify():

let obj = { age: 10, name: "XiaoMing" };
window.localStorage.setItem("obj", JSON.stringify(obj));

然后就能正常显示出对象了,如果从本地存储中拿这个值,不要忘记用JSON.parse()解析字符串。

第二个参数

第二个参数可以传递一个函数也可以传递一个数组,每一种类型都有不同的作用。传递函数我们可以对原对象做一个过滤处理或者其他的操作,传递数组就是输出结果只保留数组里面给的那几个 key 以及对应的值。

传递函数

函数接收两个值,key 和 value。key 不可以被改变,value 可以改变,且在改变之后必须要把 value 返回出去,否则无法执行下一步,导致最终只输出一个空。

let obj = { age: 10, name: "XiaoMing" };
let json = JSON.stringify(obj, (key, value) => {
  if (key === "age") {
    value = 20;
  }
  return value;
});
console.log(json);

传递数组

对于输出结果,我们要进行一些取舍,就可以传递一个数组,指定只输出哪些 key 和 value:

let obj = { age: 10, name: "XiaoMing" };
let json = JSON.stringify(obj, ["age"]);
console.log(json);

那如果希望字符化后的对象只保留除了一些 key 以外的所有其他 key 和 value 呢?我写了一个exclude函数,只针对于对象,去除不需要的对象字段,其余都保留输出:

function exclude(obj, exc) {
  for (let i in exc) {
    delete obj[exc[i]];
  }
  return Object.keys(obj);
}

let obj = { age: 10, name: "XiaoMing", school: "希望小学", address: "北京市朝阳区xxx号" };

let json = JSON.stringify(obj, exclude(obj, ["age", "address"]));

第三个参数

默认打印输出的 JSON 字符串是一行,没有任何缩进的,第三个参数就是缩进多少个空格。

JSON.stringify(obj, exclude(obj, ["age", "address"]), 2);

缩进 2 个字符的结果:

{
  "name": "XiaoMing",
  "school": "希望小学"
}

链接: https://www.fly63.com/article/detial/12062

web数据格式中关于:XML/HTML/JSON学习总汇

这篇文章讲解关于XML/HTML/JSON的学习,大家都知道服务器端可以返回的数据格式,主要就是:XML、HTML、JSON,当我们做数据抓取,ajax请求的时候都需要熟悉它们的使用。

解决IE8下JSON.stringify()自动将中文转译成unicode的方法

在IE8下JSON.stringify()自动将中文转译为unicode编码,原本选择的中文字符,传到后台变为了unicode编码,即u****的形式。查找资料后发现,与标准的JSON.stringify()不同,IE8内置的JSON.stringify()会自动将编码从utf-8转为unicode编码,导致出现这种类似于乱码的情况。

js实现json格式化,以及json校验工具的简单实现

这篇文章主要讲解:json结构及形式、json字符串转化为json对象【通过eval( ) 方法,new Function形式,使用全局的JSON对象】、json校验格式化工具简单实现

解析Json字符串的三种方法

在很多时候,我们的需要将类似 json 格式的字符串数据转为json,下面将介绍日常中使用的三种解析json字符串的方法

解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容

将字符串和json对象的相互转换,我们通常使用JSON.parse()与JSON.stringify()。解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容呢:利用eval方式解析、new Function形式、自定义兼容json的方法、head头添加mate等

什么是数据交互格式?xml和json优缺点

就是客户端和服务端进行信息传输的格式(xml和json),双方约定用什么格式进行传输,然后解析得到自己想要的值,xml扩展标记语言,属于重量级(第一占宽带、第二解析难),json属于轻量级的数据交互格式(不占宽带,解析很简单)

js 将json字符串转换为json对象的方法解析

将json字符串转换为json对象的方法。在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键

聊聊JSON Schema

json现在已经成为比较通用灵活的数据交换格式,尤其是在web方面,总是少不了它的身影,js原生就支持它。网页中与服务器中和服务器交换信息也基本上式基于json的。在现在的开发中,特别是在前后端分离的开发中,后端提供接口,前端通过接口拿取数据;

百度JSON LD结构化数据代码分享

百度JSON LD结构化数据代码分享,搞外贸网站,企业网站这么就,对谷歌的 schema 结构化数据比较熟悉,但是对百度的结构化数据就了解太少了

什么是JWT(JSON WEB TOKEN)

Json web token(JWT)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准(RFC 7519),该token被设计为紧凑且安全的,特别适用于分布式站点的单点登陆(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!