前端开发：在JavaScript 中JSON.stringify()和JSON.parse() 的使用总结

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

前言

在前端开发过程中，对于JSON的处理使用的场景是比较多的，也是比较常见的需求。JSON 是用于存储和传输数据的格式，JSON 通常用于服务端向网页传递数据，而且它是一种轻量级的数据交换格式。尤其是在JS开发相关的时候，将JSON 数据转换为 JavaScript 对象是非常常见的处理方式。那么本文就来分享一下前端对于JSON处理的常用方法JSON.stringify()和JSON.parse() 的使用总结。

功能介绍

1、JSON.stringify()

JSON.stringify() 方法用于将 JavaScript对象转换为 JSON 字符串，也就是从一个对象中解析出来字符串。

2、JSON.parse()

JSON.parse() 方法用于将数据转换为 JavaScript 对象，也就是从一个字符串中解析出来对象。

简单来讲，JSON.stringify()和JSON.parse()的作用是相对的、互斥的，例如用JSON.stringify()将对象a变成了字符串b，那么就可以 直接用JSON.parse()将字符串b还原成对象a。

语法及参数

1、JSON.stringify()

语法： JSON.stringify(value[, replacer[, space]])

参数：

• value:必传参数， 想要转换的 JavaScript 值（一般为对象或数组）。
• replacer: 可选参数，用于转换结果的函数或数组。
space: 可选参数，文本添加缩进、空格和换行符。space 也可以使用非数字，如：\t。

返回值：
返回的是包含 JSON 文本的字符串。

2、JSON.parse()

语法：JSON.parse(text[, reviver])

参数：

• text:必传参数， 想要转换的标准有效的JSON 字符串。
• reviver: 可选参数，一个转换结果的函数，将为对象的每个成员调用此函数。

返回值：返回的是JavaScript 对象。

实例

1、JSON.stringify()的使用

对象转字符串

var str = {"name":"sanzhanggui", "age":"30","gender":"male","phone":"15290331111"};
basic_str = JSON.stringify(str);
console.log(basic_str); //输出字符串
复制代码

2、JSON.parse()的使用

字符串转数组

var jdList = [];
var str1 = '[{\"createBy\":70446,\"createDate\":1622092153440,\"updateBy\":70446,\"updateDate\":1622092153440,\"remarks\":null,\"id\":4037,\"templateId\":61,\"fieldId\":132,\"fieldName\":\"JD\",\"fieldType\":\"1\",\"fieldLength\":999,\"fieldSetup\":null,\"isRequired\":\"1\",\"isVisible\":\"1\",\"isFixed\":\"1\",\"reason\":null,\"lineAccounted\":null,\"value\":\"444\",\"options\":null,\"sortNum\":8,\"status\":\"1\",\"clearable\":true,\"templates\":\"col-sm-6\"},{\"createBy\":70446,\"createDate\":1622092153440,\"updateBy\":70446,\"updateDate\":1622092153440,\"remarks\":null,\"id\":4039,\"templateId\":61,\"fieldId\":129,\"fieldName\":\"需求时间\",\"fieldType\":\"5\",\"fieldLength\":1,\"fieldSetup\":null,\"isRequired\":\"1\",\"isVisible\":\"1\",\"isFixed\":\"1\",\"reason\":null,\"lineAccounted\":null,\"value\":\"2021-06-22T16:00:00.000Z\",\"options\":null,\"sortNum\":10,\"status\":\"1\",\"templates\":\"col-sm-6\"}]';

jdList = JSON.parse(str1);
console.log(jdList); //输出数组的两条数据
复制代码

字符串转对象

var jdData = {};
var str2 = '{\"createBy\":70446,\"createDate\":1622092153440,\"updateBy\":70446,\"updateDate\":1622092153440,\"remarks\":null,\"id\":4037,\"templateId\":61,\"fieldId\":132,\"fieldName\":\"JD\",\"fieldType\":\"1\",\"fieldLength\":999,\"fieldSetup\":null,\"isRequired\":\"1\",\"isVisible\":\"1\",\"isFixed\":\"1\",\"reason\":null,\"lineAccounted\":null,\"value\":\"444\",\"options\":null,\"sortNum\":8,\"status\":\"1\",\"clearable\":true,\"templates\":\"col-sm-6\"}';

jdData = JSON.parse(str2);
console.log(jdList); //输出对象
复制代码

应用场景

JSON.stringify()的使用

1、假如后台Java对应的RequestMapping参数列表中的参数为一个对象，前台有多个传输，那就需要通过JSON.stringify()进行处理，否则会出现参数解析异常报错。
2、判断数组是否包含某对象，或者判断对象是否相等。

//判断数组是否包含某对象
var data = [ {name:'123'}, {name:'abc'}, {name:'@#$'}];
var value = {name:'abc'};
JSON.stringify(data).indexOf(JSON.stringify(value)) !== -1;   //true
复制代码

//判断两个数组或者对象是否相等
var  a = [a,b,c],
var  b = [a,b,c];
JSON.stringify(a) === JSON.stringify(b);     //true
复制代码

3、通过让localStorage/sessionStorage可以存储对象格式的数据。localStorage/sessionStorage默认的情况下只能存储字符串类型的数据，但是在实际开发的时候需要存储的数据多为对象类型，那么就可以利用json.stringify()将对象转为字符串再进行缓存存储，在取缓存数据的时候，通过json.parse()配合使用把数据转回成对象就可以。

//缓存数据
function setStorage(key, value){
    window.localStorage.setItem(key,JSON.stringify(value));
};
//取出缓存数据
function getStorage(key){
    let value = JSON.parse(window.localStorage.getItem(key));
    return value;
};
复制代码

4、实现对象的深拷贝。在开发过程中，若怕影响到原始数据，通常操作是深拷贝出一份原始数据做任意的操作，其实可以通过使用JSON.stringify()与JSON.parse()来实现深拷贝。

//深拷贝
function deepCopy(data) {
    let _data = JSON.stringify(data),
        dataCopy = JSON.parse(_data);
    return dataCopy;
};
复制代码

5、JSON.stringify()与toString()的使用对比，虽然二者都可将目标值转为字符串，但本质上还是有区别的，比如

let array = [1,2,3];
JSON.stringify(array);  // '[1,2,3]'
array.toString();  // 1,2,3
复制代码

接着，JSON.stringify()的受体更多的是对象，但toString()虽可把数组转为字符串，但并不能对{name:’@#$’}这类的对象实现想要的操作效果，toString()的受体更多的是数字。

JSON.parse()的使用：

1、假如前台向后台请求，然后后台返回一大堆的字符串数据，此时前台页面渲染需要将后台返回一大堆的字符串数据以对象的形式渲染出来，这时候就需要使用JSON.parse()进行处理。

2、注意事项：在使用JSON.parse()的时候需要注意一下，由于此方法是把JSON字符串转换成对象，所以该字符串必须符合JSON格式，即键值都必须使用双引号包裹才行，不然会引起报错。

以上就是本章的全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！