JSON.stringify()和JSON.parse()的使用

参考博文

JSON.stringify()

作用：将js对象转为字符串

引用类型转为基本类型

JSON.parse()

作用：将json类型的字符串转换为对象

基本类型转为引用类型

用处

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

// 判断数组里面是否包含某对象
let obj = [ {name:'echo'},{name:'听风是风'},{name:'天子笑'}]
let val = {name: '听风是风'} 
let val1 = {name: 'echo'}
console.log(JSON.stringify(data).indexOf(JSON.stringify(val))) // 33 如果不等-1，则包含此对象
console.log(JSON.stringify(data).indexOf(JSON.stringify(val1))) // 1

分析：

JSON.stringify(data): 返回一个JSON格式的字符串：[{“name”:“echo”},{“name”:“听风是风”},{“name”:“天子笑”}]

JSON.stringify(val)：返回一个JSON格式的字符串：{“name”:“天子笑”}

JSON.stringify(val1)：{“name”:“echo”}

// 判断对象或数组是否相等
let arr1 = [1,2,3]
let arr2 = [1,2,3]
JSON.stringify(arr1) === JSON.stringify(arr2); //true

【缺点：】

• js 对象在json化的过程中，对象的key是不保证顺序的

• 对象中包含函数，undefined等值，这些属性会丢失

2. 让localStorage/sessionStorage可以存储对象

localStorage/sessionStorage默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用json.stringify()将对象转为字符串，而在取缓存时，只需配合json.parse()转回对象即可。

//存: 这里的val本来是个对象类型的数据
function setLocalStorage(key,val){
    // js对象转为字符串
    window.localStorage.setItem(key,JSON.stringify(val));
};
//取： 取出来的数据是json格式的字符串类型数据
function getLocalStorage(key){
    // json类型的字符串转为对象
    let val = JSON.parse(window.localStorage.getItem(key));
    return val; // js对象
};
//测试
setLocalStorage('demo',[1,2,3]);
let  a = getLocalStorage('demo');//[1,2,3]

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()与toString()的区别

这两者虽然都可以将目标值转为字符串，但本质上还是有区别的，比如:

let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
arr.toString();//1,2,3

JSON.stringify()的受众更多是对象，而toString()虽然可以将数组转为字符串，但并不能对{name:'天子笑'}这类对象实现你想要的操作，它的受众更多是数字。