JSON.stringify()的妙用

1、将JS值转换为JSON字符串

const person = {
    name : "Julian",
    age : "18"
}
console.log(JSON.stringify(person));     // "{"name":"Julian","age":"18"}"

2、存储localStorage对象：存储用户创建的一个对象，并且即使在浏览器被关闭后仍能恢复该对象

// 创建一个示例数据
var session = {
    screens : [],
    state : true
};
session.screens.push({"name":"screenA", "width":450, "height":250});
session.screens.push({"name":"screenB", "width":650, "height":350});
session.screens.push({"name":"screenC", "width":750, "height":120});
session.screens.push({"name":"screenD", "width":250, "height":60});
session.screens.push({"name":"screenE", "width":390, "height":120});
session.screens.push({"name":"screenF", "width":1240, "height":650});

// 使用 JSON.stringify 转换为 JSON 字符串，然后使用 localStorage 保存在 session 名称里
localStorage.setItem('session', JSON.stringify(session));
// 使用 JSON.parse 转换为 JSON 对象
var restoredSession = JSON.parse(localStorage.getItem('session'));
console.log(restoredSession);

localStorage存取值.png

3、数组去重

function unique(arr){
    let unique = {};
    arr.forEach(function(item){
        unique[JSON.stringify(item)] = item;//键名不会重复
    })
    arr = Object.keys(unique).map(function(u){ 
        //Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将unique对象的键名还原成对象数组
        return JSON.parse(u);
    })
    return arr;
}
var uniqeArray = unique([{name: 1,author: 2}, {author: 2,name:1}])
console.log(uniqeArray)

解析：但是像{x:1,y:2}与{y:2,x:1}这种通过上述方法变化后的值是不同的，但实际上它们是重复对象，可以通过下面方法解决,，即先把属性排序一下，再进行下一步操作：

function unique(arr) {
    let unique = {};
    arr.forEach(function(item) {
        //调整属性顺序
        var newData = {};
        Object.keys(item).sort().map(key => {
            newData[key] = item[key]
        })
        unique[JSON.stringify(newData)] = item; //键名不会重复
    })
    arr = Object.keys(unique).map(function(u) {
        //Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将unique对象的键名还原成对象数组
        return JSON.parse(u);
    })
    return arr;
}
var uniqeArray = unique([{name: 1,author: 2}, {author: 2,name:1}])
console.log(uniqeArray)

4、stringify 函数第二个参数的妙用

function unique(arr) {
    let unique = {};
    arr.forEach(function(item) {
        unique[JSON.stringify(item,['name','author'])] = item;
    })
    arr = Object.keys(unique).map(function(u) {
        //Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将unique对象的键名还原成对象数组
        return JSON.parse(u);
    })
    return arr;
}

解析：可以在第二个参数上解决对象属性的顺序问题，给它加上一个数组['name','author']即可

5、实现深拷贝

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]

6、判断数组是否包含某对象，或者判断对象是否相等

//判断数组是否包含某对象
let data = [{
    name:'echo'
},{
    name:'前端开发博客'
},{
    name:'蔡生'
}],
    val = {
    name:'蔡生'
    };
console.log(JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1);//true

//判断两数组/对象是否相等
let a = [1,2,3],
    b = [1,2,3];
console.log(JSON.stringify(a,a.sort()) === JSON.stringify(b,b.sort()));//true