gpt4 book ai didi

json.stringify()与json.parse()的区别以及用处

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 31 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章json.stringify()与json.parse()的区别以及用处由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

1、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)); // 报错

2、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()的区别以及用处的文章就介绍到这了,更多相关json.stringify()与json.parse()内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。

原文链接:https://juejin.cn/post/6920883049957687303 。

最后此篇关于json.stringify()与json.parse()的区别以及用处的文章就讲到这里了,如果你想了解更多关于json.stringify()与json.parse()的区别以及用处的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com