json.stringify()的妙用,json.stringify()与json.parse()的区别

叁歲伎倆 2024-04-18 13:00 77阅读 0赞

json.stringify()的妙用,json.stringify()与json.parse()的区别

一、JSON.stringify()与JSON.parse()的区别

最近做项目,发现JSON.stringify()使用场景真的挺多,我们都知道JSON.stringify()的作用是将 JavaScript 值转换为 JSON 字符串,JSON.parse()可以将JSON字符串转为一个对象。

简单点说,它们的作用是相对的,我用JSON.stringify()将对象a变成了字符串c,那么我就可以用JSON.parse()将字符串c还原成对象a。

复制代码

  1. let arr = [1,2,3];
  2. JSON.stringify(arr);//'[1,2,3]'
  3. typeof JSON.stringify(arr);//string
  4. let string = '[1,2,3]';
  5. console.log(JSON.parse(string))//[1,2,3]
  6. console.log(typeof JSON.parse(string))//object

复制代码

那么借用此变化,我们能用来做什么呢?

二、JSON.stringify()的几种妙用

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

复制代码

  1. //判断数组是否包含某对象
  2. let data = [
  3. {name:'echo'},
  4. {name:'听风是风'},
  5. {name:'天子笑'},
  6. ],
  7. val = {name:'天子笑'};
  8. JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true
  9. //判断两数组/对象是否相等
  10. let a = [1,2,3],
  11. b = [1,2,3];
  12. JSON.stringify(a) === JSON.stringify(b);//true

复制代码

2.让localStorage/sessionStorage可以存储对象。

localStorage/sessionStorage默认只能存储字符串,而实际开发中,我们往往需要存储的数据多为对象类型,那么这里我们就可以在存储时利用json.stringify()将对象转为字符串,而在取缓存时,只需配合json.parse()转回对象即可。

复制代码

  1. //存
  2. function setLocalStorage(key,val){
  3. window.localStorage.setItem(key,JSON.stringify(val));
  4. };
  5. //取
  6. function getLocalStorage(key){
  7. let val = JSON.parse(window.localStorage.getItem(key));
  8. return val;
  9. };
  10. //测试
  11. setLocalStorage('demo',[1,2,3]);
  12. let a = getLocalStorage('demo');//[1,2,3]

复制代码

format_png

3.实现对象深拷贝

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

复制代码

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

复制代码

三、JSON.stringify()与toString()的区别

这两者虽然都可以将目标值转为字符串,但本质上还是有区别的,比如

  1. let arr = [1,2,3];
  2. JSON.stringify(arr);//'[1,2,3]'
  3. arr.toString();//1,2,3

其次,JSON.stringify()的受众更多是对象,而toString()虽然可以将数组转为字符串,但并不能对{name:’天子笑’}这类对象实现你想要的操作,它的受众更多是数字。

那么大概整理这么多了,后面工作中遇到再添加吧。

发表评论

表情:
评论列表 (有 0 条评论,77人围观)

还没有评论,来说两句吧...

相关阅读

    相关 void

    任何表达式都会产生一个值,但是在算数表达式中,如果对计算的值没有进行接收或进行任何其他操作,那么在强制警告的时候编译就会出现警告,此时需要将表达式转为void,表示显示的将该值