6个你不知道的JSON.stringify()妙用-技术圈

本文主要介绍 6 个实用 JSON.stringify() 用法

1.用来调试对象

我们先来看看下面这个代码在控制台中输出什么

//Initialize a User objectconst user = {"name" : "蔡生","age" : 26}console.log(user);RESULT// [object Object]

看！console.log()没有输出我们想要的结果。它输出了[object Object]，因为从对象到字符串的默认转换是“[objectObject]”。因此，我们使用 JSON.stringify()先将对象转换为字符串，然后把结果输入 console 控制台，如下所示。

const user = {"name" : "蔡生","age" : 26}console.log(JSON.stringify(user));RESULT// "{ "name" : "蔡生", "age" :26 }"

通常，开发人员使用这个 stringify 函数的方式很简单，像上面那样操作就可以。

2.存储 localStorage 对象

一些时候，你想存储用户创建的一个对象，并且，即使在浏览器被关闭后仍能恢复该对象。下面的例子是 JSON.stringify 适用于这种情形的一个样板：

// 创建一个示例数据var session = {    'screens' : [],    'state' : true};session.screens.push({"name":"screenA", "width":450, "height":250});session.screens.push({"name":"screenB", "width":650, "height":350});session.screens.push({"name":"screenC", "width":750, "height":120});session.screens.push({"name":"screenD", "width":250, "height":60});session.screens.push({"name":"screenE", "width":390, "height":120});session.screens.push({"name":"screenF", "width":1240, "height":650});
// 使用 JSON.stringify 转换为 JSON 字符串// 然后使用 localStorage 保存在 session 名称里localStorage.setItem('session', JSON.stringify(session));
// 然后是如何转换通过 JSON.stringify 生成的字符串，该字符串以 JSON 格式保存在 localStorage 里var restoredSession = JSON.parse(localStorage.getItem('session'));
// 现在 restoredSession 包含了保存在 localStorage 里的对象console.log(restoredSession);

3.数组去重

有人把这个用在数组对象去重上，下面我举一个例子。

function unique(arr){   let unique = {};   arr.forEach(function(item){     unique[JSON.stringify(item)]=item;//键名不会重复   })   arr = Object.keys(unique).map(function(u){    //Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将unique对象的键名还原成对象数组     return JSON.parse(u);   })   return arr; }

存在的问题:{x:1,y:2}与{y:2,x:1}通过 JSON.stringify 字符串化值不同，但显然他们是重复的对象。

看起来只要把里面的属性排序一下，然后再进行下一步就可以了，我调整了一下，代码如下：

function unique(arr) {  let unique = {};  arr.forEach(function(item) {                //调整属性顺序    var newData = {};    Object.keys(item).sort().map(key = >{      newData[key] = item[key]    })    unique[JSON.stringify(newData)] = item; //键名不会重复  })  arr = Object.keys(unique).map(function(u) {    //Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将unique对象的键名还原成对象数组    return JSON.parse(u);  })  return arr;}

4.stringify 函数第二个参数的妙用

还是上面这道题，我们可以在第二个参数上解决对象属性的顺序问题，给它加上一个数组['name','author']，代码改为下面这个就没问题了。

function unique(arr) {  let unique = {};  arr.forEach(function(item) {    unique[JSON.stringify(item,['name','author'])] = item;  })  arr = Object.keys(unique).map(function(u) {    //Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将unique对象的键名还原成对象数组    return JSON.parse(u);  })  return arr;}

正如你所知，第二个参数可以决定筛选出来的内容，当然它还有第三个参数，这里不展开了，有兴趣看 MDN。

5.实现深拷贝

实际开发中，如果怕影响原数据，我们常深拷贝出一份数据做任意操作，其实使用 JSON.stringify()与 JSON.parse()来实现深拷贝是很不错的选择。

//深拷贝function deepClone(data) {    let _data = JSON.stringify(data),        dataClone = JSON.parse(_data);    return dataClone;};//测试let arr = [1,2,3],    _arr = deepClone(arr);arr[0] = 2;console.log(arr,_arr)//[2,2,3]  [1,2,3]

6.判断数组是否包含某对象，或者判断对象是否相等。

//判断数组是否包含某对象let data = [    {name:'echo'},    {name:'前端开发博客'},    {name:'蔡生'},    ],    val = {name:'蔡生'};JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true
//判断两数组/对象是否相等let a = [1,2,3],    b = [1,2,3];JSON.stringify(a) === JSON.stringify(b);//true

最后

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
欢迎加我微信「qianyu443033099」拉你进技术群，长期交流学习...
关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。

点个在看支持我吧，转发就更好了