json.stringify()与json.parse()的区别以及用处
这篇文章主要介绍了json.stringify()与json.parse()的区别以及用处,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
一、JSON.stringify()和JSON.parse() 区别
我们都用过JSON.stringify()和JSON.parse() ,从名字上就能知道
JSON.stringify()的作用是将JavaScript对象转换为JSON 字符串
JSON.parse()可以将JSON字符串转为一个对象。
通俗易懂版:
JSON.stringify() 将对象a转化成字符串s;
JSON.parse() 将字符串s转化成对象a;
简单点说,它们的作用是相对的,我用JSON.stringify()将对象a变成了字符串c,那么我就可以用JSON.parse()将字符串c还原成对象a。
1 2 3 4 5 6 7 | let arr = [1,2,3]; JSON.stringify(arr); //'[1,2,3]' typeof JSON.stringify(arr); //string let string = '[1,2,3]' ; console.log(JSON.parse(string)) //[1,2,3] console.log( typeof JSON.parse(string)) //object |
在使用JSON.parse()需要注意一点,由于此方法是将JSON字符串转换成对象,所以你的字符串必须符合JSON格式,即键值都必须使用双引号包裹:
1 2 3 4 | let a = '["1","2"]' ; let b = "['1','2']" ; console.log(JSON.parse(a)); // Array [1,2] console.log(JSON.parse(b)); // 报错 |
二、JSON.stringify()妙用
1.判断数组是否包含某对象,或者判断对象是否相等。
1 2 3 4 5 6 7 8 9 10 11 12 13 | //判断数组是否包含某对象 let data = [ {name: '掘金' }, {name: 'css学习' }, {name: 'js学习' }, ], 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 |
2.让localStorage/sessionStorage可以存储对象。
localStorage/sessionStorage默认只能存储字符串,而实际开发中,我们往往需要存储的数据多为对象类型,那么这里我们就可以在存储时利用json.stringify()将对象转为字符串,而在取缓存时,只需配合json.parse()转回对象即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //存 function setLocalStorage(key,val){ window.localStorage.setItem(key,JSON.stringify(val)); }; //取 function getLocalStorage(key){ let val = JSON.parse(window.localStorage.getItem(key)); window.localStorage.removeItem(key) return val; }; //测试 let data = [ {name: '掘金' }, {name: 'css学习' }, {name: 'js学习' }, ]; setLocalStorage( 'STORAGEDATE' ,data); let a = getLocalStorage( 'STORAGEDATE' ); |
3.实现对象深拷贝
实际开发中,如果怕影响原数据,我们常深拷贝出一份数据做任意操作,其实使用JSON.stringify()与JSON.parse()来实现深拷贝是很不错的选择。
1 2 3 4 5 6 7 8 9 10 11 | //深拷贝 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] |
到此这篇关于json.stringify()与json.parse()的区别以及用处的文章就介绍到这了