JSON.stringify()妙用

JSON对象在所有现代浏览器中都可以使用,它有两个非常有用的方法来处理JSON格式化的内容:解析和字符串化。JSON.parse() 取一个JSON字符串并将其转换为JavaScript对象。JSON.stringify() 取一个JSON对象,并将其转换为JSON字符串。

代码使用

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Skip","age":2,"favoriteFood":"Steak"}"

console.log(JSON.parse(myObjStr));
// Object {name:"Skip",age:2,favoriteFood:"Steak"}

而且虽然这些方法通常用于对象,但也可以用于数组。

const myArr = ['bacon', 'letuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
// "["bacon","letuce","tomatoes"]"

console.log(JSON.parse(myArrStr));
// ["bacon","letuce","tomatoes"]
妙用功能
1.用来调试对象

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

//Initialize a User object
const 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对象
// 创建一个示例数据
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,a.sort()) === JSON.stringify(b,b.sort());//true

 


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流