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中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
代码整洁之道(重构)
Oct 25 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
php常用数学函数汇总
2014/11/21 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
关于PHP开发的9条建议
2015/07/27 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
js运动应用实例解析
2015/12/28 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
django框架ModelForm组件用法详解
2019/12/11 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
个人自我剖析材料
2014/09/30 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
微信搭讪开场白
2015/05/28 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python