【May Be DNK】JSON.parse() and JSON.stringify()的两个实用技巧

结论

一、数据深拷贝

使用方法：JSON.parse(JSON.stringify(param))

let o = {a: 1, b: 2}
let o1 = JSON.parse(JSON.stringify(o))
let o2 = o

console.log(o === o2) // true
console.log(o === o1) // false

二、数据过滤

对一个对象中的数据进行处理，譬如过滤掉对象中值为null/undefined的键，我们通常会用Object.keys()逐个遍历key。

现在，我们可以这样做：

let o = {
    a: 1,
    b: null,
    c: 'hello'
}

let replacer = (k, v) => {if (v) return v})

let s = JSON.stringify(o, replacer)
let res = JSON.parse(s)

> res
< {a: 1, c: "hello"}

// 或者
s = JSON.stringify(o)
res = JSON.parse(s, replacer)

> res
< {a: 1, c: "hello"}

详细介绍

JSON，全称是JavaScript Object Notation（JavaScript 对象表示法），是一种轻量、可读性高的数据结构。

和XML类似，它主要用于服务器和web应用之间的数据传输。

键值对(Keys and Values)

构成JSON的两个重要部分是键和值。它们一起组成一个键值对：
Key：一个键通常被一对双引号包裹住。
Value： 有效值是string, number, array, object, null, false, true中的一种（无undefined）。
Key/Value Pair：键值对遵循特定的语法，行如key: value，键值对以逗号分隔。

JavaScript 中的JSON对象有两个方法：parse、stringify，用来处理JSON格式的数据。

1.JSON.stringify(value[, replacer[, space]])

JSON.stringify() 将一个 JavaScript 对象转化成一个 JSON 字符串。

stringify 函数有两个可选参数：replacer and space.

// converting a simple javascript object to JSON object
let my_details =  {
    "name"  : "John",
    "age "  : "31" ,
    "photo" : "🤪"
}

let my_details_in_json = JSON.stringify(my_details);

// "{"name":"John","age ":"31","photo":"🤪"}" --> my_details_in_json

当然，你也可以转化数组：

let  my_details = ['John ', 31, '🤪'];  

const myJSONdetails = JSON.stringify(my_details);  

// "["John ",31,"🤪"]" --> myJSONdetails

replacer参数可以选择函数或者数组。

作为函数——>Replacer有两个参数：被字符串化的 key和value.

// in this example we will convert small letters to capital letters

function replacer(key, value) {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    return value;
}

let my_details =   {
    "name"  : "john",
    "age "  : "31" ,
    "photo" : "🤪"
 }

JSON.stringify(my_details, replacer);

> "{"name"  : "JOHN", "age "  : "31" , "photo" : "🤪"}"

作为数组——>Replacer中的值与结果中的key值一一对应，多余的key/value将被剔除。

let replacer = ["name" , "age" ];

let my_details =  {
    "name"  : "john",
    "age"  : "31" ,
    "photo" : "🤪"
};

JSON.stringify(my_details, replacer);

> "{"name": "john", "age": "31"}"

**space **参数结果字符串中的间距，它的值类型为字符串/数字。不常用。

2. JSON.parse(JSONObject,[,reviver] )

此方法用于解析JSON字符串数据为一个JavaScript对象。

// converting a simple javascript object to JSON object

let my_details =  {
    "name"  : "John",
    "age "  : "31" ,
    "photo" : "🤪"
 }

let my_details_in_json = JSON.stringify(my_details);

// "{"name":"John","age ":"31","photo":"🤪"}" --> my_details_in_json

let parsedData = JSON.parse(my_details_in_json);

output 
           "age "  :"31",
           "name"  :"John",
           "photo" :"🤪"

JSON.parse() 可以使用一个函数 (reviver) 作为第二个参数，改变返回对象中的值。

JSON.parse(my_details_in_json , function (key, value) { 
    if (typeof value === ‘string’) { 
        return value.toUpperCase(); 
    } 
    return value; 
 });

参考：

https://www.json.org/

https://medium.com/mindorks/json-parse-and-json-stringify-in-javascript-4de609c19d46

.