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


Posted in Javascript onJanuary 25, 2021

一、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);//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格式,即键值都必须使用双引号包裹:

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

Javascript 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
基本DOM节点操作
Jan 17 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 #Vue.js
ReactRouter的实现方法
Jan 25 #Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 #Javascript
vue 计算属性和侦听器的使用小结
Jan 25 #Vue.js
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 #Javascript
vue keep-alive的简单总结
Jan 25 #Vue.js
JS实现简易日历效果
Jan 25 #Javascript
You might like
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
jQuery实现日历效果
2020/09/11 jQuery
Python max内置函数详细介绍
2016/11/17 Python
python logging模块的使用总结
2019/07/09 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Python selenium自动化测试模型图解
2020/04/15 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
护士演讲稿范文
2014/01/05 职场文书
先进事迹报告会感言
2014/01/24 职场文书
花店创业计划书范文
2014/02/07 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
老乡聚会通知
2015/04/23 职场文书
新郎结婚感言
2015/07/31 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
2021年最新用于图像处理的Python库总结
2021/06/15 Python
PyMongo 查询数据的实现
2021/06/28 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫