关于JSON.stringify()与JSON.parse()

Posted superfeeling

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于JSON.stringify()与JSON.parse()相关的知识,希望对你有一定的参考价值。

一、JSON.stringify()与JSON.parse()的区别

  JSON.stringify()的作用是将js值转换成JSON字符串,而JSON.parse()是将JSON字符串转换成一个对象。也就是说,如果我们用JSON.stringify()将一个对象变成了字符串,那么使用JSON.parse()将字符串还原成对象。

let obj = {
name:"song",
age:10
};
let changeObj =JSON.stringify(obj);
console.log(changeObj); //"{"name":"song","age":10}"
console.log(typeof changeObj);//string

let orig =JSON.parse(changeObj);
console.log(orig);//{name:"song",age:10}
console.log(typeof orig);//object

二、JSON.stringify()和JSON.parse()的几种用法

(一)在localStorage/sessionStorage里存储对象/数组/对象数组

     localStorage/sessionStorage默认只能存储字符串,如果要存储对象类型的数据,在存入的时候利用JSON.stringify()将对象转换成字符串,然后在取出来的时候,利用JSON.parse()转会回对象。

1 //存数据
2 localStorage.setItem("cart",JSON.stringify(n));
3 
4 //取数据
5 JSON.parse(window.localStorage.getItem("cart"));

(二)vue路由传参(对象)

   有时候如果对象里面只是一两个属性,可以直接利用字面量的方式定义对象,但如果需要传递的对象中有很多属性,那么一个一个的写显然是很不可取的。所以就可以利用JSON.stringify()和JSON.parse()来转换。

this.$router.push({ 
    name: "DataDetail", 
    query: {    
        tabsVal: JSON.stringify(val),  
        Name: this.$route.query.name 
        }
});​

(三)实现对象/数组的深拷贝

   其实这样将数据直接转换成字符串然后进行拷贝,完成后在转换回去,倒是一种很不错的方案。

var obj2 = {
    name:"L",
    age:12,
    value:"IU"
}
obj1=JSON.parse(JSON.stringify(obj2));

(四)判断数组/对象是否相等、或则判断是否包含某内容

  用来判断数组/对象是否相等用这种方法确实很容易,将要比较的两者都先转成字符串,然后直接全等于判断即可。

以上是关于关于JSON.stringify()与JSON.parse()的主要内容,如果未能解决你的问题,请参考以下文章

JSON中的坑

关于vue中JSON.parse(JSON.stringify(...))使用深拷贝问题

json.stringify()与json.parse()的区别以及JSON.stringify()与toString()的区别

JSON.parse()与JSON.stringify()与qs.stringify的区别

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

JSON.stringify()与JSON.parse()区别