首页前端开发JavaScriptjson.stringify()与json.parse()的区别以及用处

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

时间2024-01-31 16:59:02发布访客分类JavaScript浏览603
导读:收集整理的这篇文章主要介绍了json.stringify( 与json.parse( 的区别以及用处,觉得挺不错的,现在分享给大家,也给大家做个参考。 一、JSON.stringify(...
收集整理的这篇文章主要介绍了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。

let arr = [1,2,3];
    JSON.stringify(arr);
    //'[1,2,3]'tyPEof JSON.stringify(arr);
    //stringlet string = '[1,2,3]';
    console.LOG(JSON.parse(string))//[1,2,3]console.log(typeof JSON.parse(string))//object

在使用JSON.parse()需要注意一点,由于此方法是将JSON字符串转换成对象,所以你的字符串必须符合JSON格式,即键值都必须使用双引号包裹:

let a = '["1","2"]';
    let b = "['1','2']";
    console.log(JSON.parse(a));
    // Array [1,2]console.log(JSON.parse(b));
    // 报错

二、JSON.stringify()妙用

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

//判断数组是否包含某对象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()转回对象即可。

//存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()来实现深拷贝是很不错的选择。

//深拷贝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()内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

您可能感兴趣的文章:
  • 详解关于JSON.parse()和JSON.stringify()的性能小测试
  • JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
  • JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
  • JSON中key动态设置及JSON.parse和JSON.stringify()的区别
  • 浅谈JSON.stringify()和JOSN.parse()方法的不同
  • 关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
  • 谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
  • 浅谈JSON.parse()和JSON.stringify()
  • JSON.parse()和JSON.stringify()使用介绍
  • 详解JSON.parse和JSON.stringify用法

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: 如何在Vue项目中添加接口监听遮罩下一篇:使用vue3重构拼图游戏的实现示例猜你在找的JavaScript相关文章 html font标签如何设置字体大小?html font标签属性用法介绍2022-05-16vue3+TypeScript+vue-router的使用方法2022-04-16vue3获取当前路由地址2022-04-16如何利用React实现图片识别App2022-04-16JavaScript展开运算符和剩余运算符的区别详解2022-04-16微信小程序中使用vant框架的具体步骤2022-04-16Vue elementUI表单嵌套表格并对每行进行校验详解2022-04-16如何利用Typescript封装本地存储2022-04-16微信小程序中wxs文件的一些妙用分享2022-04-16JavaScript的Set数据结构详解2022-04-16 其他相关热搜词更多phpjavapython程序员loadpost-format-gallery

若转载请注明出处: json.stringify()与json.parse()的区别以及用处
本文地址: https://pptw.com/jishu/594231.html
Javascript中的奇葩知识,你知道吗? c语言puts函数用法是什么?

游客 回复需填写必要信息