JSON.parse和JSON.stringify的巧用

JSON.stringify()是将一个JavaScript值(对象或者数组)转换为一个json字符串,如果指定了 replacer 是一个函数,则可以选择性地替换值,或者如果指定了 replacer 是一个数组,则可选择性地仅包含数组指定的属性。

语法:

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

value:要进行转换的JSON对象;
replacer|可选:如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;如果该参数为 null 或者未提供,则对象所有的属性都会被序列化;
space|可选:指定缩进用的空白字符串,用于美化输出

注意:
1、转换值如果有 toJSON() 方法,该方法定义什么值将被序列化
2、非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
3、布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
4、undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成null(出现在数组中时)。函数、undefined 被单独转换时,会返回 undefined。
5、对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误。
6、以 symbol 为属性键的属性都会被完全忽略掉,即便replacer参数中强制指定包含了它们
7、Date 日期调用了 toJSON() 将其转换为了 string 字符串(同Date.toISOString()),因此会被当做字符串处理。
8、NaN 和 Infinity 格式的数值及 null 都会被当做 null。
JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'

JSON.stringify([undefined, Object, Symbol("")]);          
// '[null,null,null]'

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

const user = { id: 229, name: "John", email: "john@awesome.com" };
 function replacer(key, value) {
      console.log(typeof value);
      if (key === "email") {
        return undefined;
      }
      return value;
}
 const userStr = JSON.stringify(user, replacer); // "{"id":229,"name":"John"}"
JSON.parse()用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换

语法:

JSON.parse(text\[, reviver\])

text:要被转换的JSON字符串;
reviver|可选:转换器, 如果传入该参数(函数),可以用来修改解析生成的原始值,调用时机在 parse 函数返回之前。

const user = {
    name: "John",
    email: "john@awesome.com",
    plan: "Pro"
};

const userStr = JSON.stringify(user);
JSON.parse(userStr, (key, value) => {
    if (typeof value === "string") {
          return value.toUpperCase();
    }
  return value;
});

技巧

1、判断两个引用数据类型是否相等

var arr1=[1,2];
var arr2=[1,2];
console.log(arr1===arr2);//false
console.log(JSON.stringify(arr1)===JSON.stringify(arr2));//true

2、实现引用类型数据深拷贝

var arr1=[1,2];
var arr2=arr1;
arr2[1]=0;
console.log(arr1);//[1,0]

正常情况下拷贝数组会互相影响,使用JSON.stringify()后

var arr1=[1,2];
var arr3=JSON.stringify(arr1);
arr3=JSON.parse(arr3);
arr3[1]=0;
console.log(arr1);//[1,2]

3、引用类型数据存储

var account={
  uid:123,
  name:"jack"
};
window.localStorage.setItem("account",JSON.stringify(account));

4、debug处理
有时候在客户端内无法打印oject数据查看异常,无法定位问题,比如:

var account={
  uid:123,
  name:"jack"
};
alert(account);//[object,object]
alert(JSON.stringify(account));//{"uid":123,"name":"jack"}

本文转载自:https://segmentfault.com/a/1190000021516825

Image placeholder
前端答疑
未设置
  72人点赞

没有讨论,发表一下自己的看法吧

推荐文章
JSON.parse和JSON.stringify的巧用

JSON.parse和JSON.stringify是对json数据的转换,在js中使用的频率还是非常高的,比如localStorage,cookie中对复合型数据的存储,与服务器进行数据交互的格式转换

js和jquery的区别是什么?

JavaScript和jQuery的区别:一、本质上的区别:js是网页脚本语言,而jQuery是基于js语言封装出来的一个前端框架。也就是说js是一种语言,而jQuery是基于该语言的一种框架。二、用

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

vue和jquery之间有什么区别?

首先我们来了解一下jquery和vue是什么?Vue是什么?Vue.js是一个前端JavaScript框架,用于构建用户界面。它是开源的。当使用其他JavaScript库时,它还可以用作集成工具。它本

react和jquery的区别是什么?

首先我们要注意的是,虽然我们这里把React和JQuery拿到一个台面上来说,但是这两者是有本质区别的。React是一个UI库,但是JQuery更多的知识一个工具库或者说是插件库,我们之所以把这两者谈

巧用自动化测试组合拳保证产品质量

一、背景 我们的测试工作经历了以下四个阶段。第一阶段,产品需求评审完成,开发团队实现功能开发,然后草草提测,不写单元测试。测试人员进行人工测试,没有工具或系统做辅助,测试用例编写是在excel或脑图中

php常用字符串查找函数strstr()与strpos()实例分析

这篇文章主要介绍了php常用字符串查找函数strstr()与strpos(),结合具体实例形式分析了php字符串查找函数strstr()与strpos()的具体功能、用法、区别及相关操作注意事项,需要

jquery和js的区别是什么?

jquery和js的区别是什么?一、首先来看一下jQuery和js的概念jquery是一个快速、简洁的JavaScript库,极大的简化了javascript编程。js是一种脚本语言,常用于网页客户端

jquery和js之间有什么区别?

js是一种脚本语言,常用于网页客户端编程,使网页在客户端浏览器中,实现更多地动态功能,表现出更加丰富的视觉效果。jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍

react-native中IOS的webview和js层通信 - UIWebview

前言在9012的最后一篇写到了在rn中安卓的webview的通信原理,而作为0202年的第一篇,继续讨论上年rn中webview通信剩下的部分。背景:对于webview,了解过的人都知道在ios端会存

html和jsp的区别及优缺点

html和jsp的区别:●最简单的区别就是,HTML能直接打开,jsp只能发布到Tomact等服务器上才能打开●定义上HTML页面是静态页面可以直接运行,JSP页面是动态页它运行时需要转换成servl

css和js后加问号和数字有什么用?

css和js后加问号和数字有什么用?当浏览器请求一个网站的时候,会加载各种各样的资源,比如:HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容,浏览器会将他们保存在本地的文件中,下次访问相

基于Redis实现Spring Cloud Gateway的动态管理

引言:SpringCloudGateway是当前使用非常广泛的一种API网关。它本身能力并不能完全满足企业对网关的期望,人们希望它可以提供更多的服务治理能力。但SpringCloudGateway并不

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

vue和react是什么?

vue是什么?有什么用?Vue.js是一款流行的JavaScript前端框架,一个用于创建用户界面的开源JavaScript框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图

vue和react的区别是什么?

vue和react的区别1、监听数据变化的实现原理不同Vue通过getter/setter以及一些函数的劫持,能精确知道数据变化。React默认是通过比较引用的方式(diff)进行的,如果不优化可能导

vue和react的主要区别是什么?

Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计,其核心库只关注视图层,并且非常容易学习,也易与其它库或已有项目整合。另一方面,Vue完全有能力驱动采用

vue和react分别有什么优点?

Vue.js是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。vue的优点轻量级框架性能高效双向数

vue和react相似和区别是什么?

vue和react的相似之处使用虚拟dom提供了响应式和组件化的视图组件关注核心库,伴随于此,有配套的路由和负责处理全局状态管理的库都支持服务器端的渲染都支持native方案,React的reactn

jquery和javascript有关系吗?

jquery和javascript有关系吗?有关系,具体的关系是:jquery是基于JavaScript编写的,jquery全部都是JavaScript代码组成。jquery和javascript的关

jquery和jquery ui的区别?

jquery和jqueryui的区别?区别有:1、jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 2、jQueryUI则是在jQuery的基础上,利用jQuery的扩展性,

秘籍在手,训练不愁!特斯拉AI负责人Karpathy的超全神经网络训练套路

大数据文摘出品编译:周素云、宋欣仪、熊琰、ZoeY、顾晨波训练神经网络到底有诀窍和套路吗?AndrejKarpathy认为,还的确有。这位特斯拉的人工智能研究负责人、李飞飞的斯坦福高徒刚刚难得更新了博

jquery的$什么意思?

jquery的$什么意思?在jQuery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法。(相关课程推荐:jQu

jquery的作用是什么?

jquery的作用是什么?下面就是jQuery的具体作用:1、取得页面中的元素。如果不使用JavaScript库,遍历DOM(DocumentObjectModel,文档对象模型)树,以及查找HTML

ajax与jquery的区别是什么?

jQuery是javascript的一个框架,也就是有人做好了很多功能,你直接拿来用就好了。比如实现Ajax。纯javascript,你可能需要些好多函数,来新建对象,捕捉事件,处理异常等。但用jQu