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

 更新时间:2021年01月25日 10:40:32   作者:Adelamm  
这篇文章主要介绍了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);//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()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JSON 客户端和服务器端的格式转换

    JSON 客户端和服务器端的格式转换

    JSON是JavaScript Object Notation的缩写。JSON是个轻量级的用于服务器端和客户端交换数据的数据格式。它经常会用在ajax应用上,是因为它是基于ajax对象的格式定义出来的。
    2009-08-08
  • json跟xml的对比分析

    json跟xml的对比分析

    JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负。
    2008-06-06
  • JSON.parse 数据不完整的解决方法

    JSON.parse 数据不完整的解决方法

    本文主要介绍了JSON.parse 数据不完整的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 任意Json转成无序列表的方法示例

    任意Json转成无序列表的方法示例

    这篇文章主要给大家介绍了任意Json如何转成无序列表,文中给出了详细的示例代码,相信对大家的理解和学习具有一定的参考借鉴价值,有需要的朋友们下面跟着小编来一起学习学习吧。
    2016-12-12
  • IE8 原生JSON支持

    IE8 原生JSON支持

    你可能已经从这篇文章的标题中猜到了,Internet Explorer 8(目前是Beta2)提供了原生JSON的解析和序列化。
    2009-04-04
  • 改进版通过Json对象实现深复制的方法

    改进版通过Json对象实现深复制的方法

    改进版通过Json对象实现深复制的方法,需要的朋友可以参考下
    2012-10-10
  • json的定义、标准格式及json字符串检验

    json的定义、标准格式及json字符串检验

    今天分享和总结一些json的基本定义、格式、字符串的格式,以及在做测试的时候使用json时做一些简单的校验
    2014-05-05
  • XML的代替者----JSON

    XML的代替者----JSON

    XML的代替者----JSON...
    2007-07-07
  • 解读JSON的三种格式

    解读JSON的三种格式

    这篇文章主要介绍了解读JSON的三种格式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 使用Json比用string返回数据更友好,也更面向对象一些

    使用Json比用string返回数据更友好,也更面向对象一些

    在面向对象的程序来讲,它的可能性,编写代码不易出错率也很重要,所以,建议在返回复杂字条符时,使用C#提供的Json,而不需要自己去拼写JS返回的Json格式。
    2011-09-09

最新评论