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

港控/mmm° 2022-12-19 00:47 113阅读 0赞

一、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]

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

原文网址:https://www.cnblogs.com/echolun/p/9631836.html

发表评论

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

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

相关阅读

    相关 void

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