浅析JSON.parse() 和 JSON.stringify()

前端开发博客

发布于 2020-11-04 15:30:59

6510

发布于 2020-11-04 15:30:59

文章被收录于专栏：前端开发博客

JSON对象在所有现代浏览器中都可以使用，它有两个非常有用的方法来处理JSON格式化的内容：解析和字符串化。JSON.parse() 取一个JSON字符串并将其转换为JavaScript对象。JSON.stringify() 取一个JSON对象，并将其转换为JSON字符串。

代码使用

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Skip","age":2,"favoriteFood":"Steak"}"

console.log(JSON.parse(myObjStr));
// Object {name:"Skip",age:2,favoriteFood:"Steak"}

而且虽然这些方法通常用于对象，但也可以用于数组。

const myArr = ['bacon', 'letuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);
console.log(myArrStr);
// "["bacon","letuce","tomatoes"]"
console.log(JSON.parse(myArrStr));
// ["bacon","letuce","tomatoes"]

详细例子

一些时候，你想存储用户创建的一个对象，并且，即使在浏览器被关闭后仍能恢复该对象。下面的例子是 JSON.stringify 适用于这种情形的一个样板：

// 创建一个示例数据
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.stringify 生成的字符串，该字符串以 JSON 格式保存在 localStorage 里
var restoredSession = JSON.parse(localStorage.getItem('session'));
// 现在 restoredSession 包含了保存在 localStorage 里的对象
console.log(restoredSession);

数组去重

有人把这个用在数组对象去重上，下面我举一个例子。

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;
 }

存在的问题:{x:1,y:2}与{y:2,x:1}通过JSON.stringify字符串化值不同，但显然他们是重复的对象。

看起来只要把里面的属性排序一下，然后再进行下一步就可以了，我调整了一下，代码如下：

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;
}

另外一种方法

还有另外一种方法可以判断数组去重。

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        console.log(typeof item + JSON.stringify(item))
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
    })
}

当然上面这个方法同样存在对象属性顺序不一样的会有bug的问题，你需要先遍历一篇再执行。

如果文章对你有帮助，点个在看，谢谢！

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-04-07，如有侵权请联系 cloudcommunity@tencent.com 删除

json