一篇文章带你了解 JSON.stringfy和JSON.parse 的用法

        相信大家对于 JSON.stringify 和 JSON.parse 一定不陌生，我们在使用本地储存的时候经常使用（存：localstorage.setItem(“key”,JSON.stringify( obj ) 取： JSON.parse(localstorage.getItem(“key”))，下面让我们看看这个方法的其他参数用法。

目录

• 1.JSON.stringify 方法的第一个参数——将对象转换为JSON字符串；(常用)
• 2.JSON.stringify 方法的第二个参数——修改默认字符串；
• 3.JSON.stringify 方法的第三个参数——增加JSON字符串可读性；
• 4.JSON.parse 方法的第一个参数——将 JSON 字符串转换为 JSON 对象；(常用)
• 5.JSON.parse 方法的第二个参数——与JSON.stringify相似；

---

1.JSON.stringify 方法将某个对象转换成 JSON 字符串形式

const stu = {
    name: 'zcxiaobao',
    age: 18
}
console.log(JSON.stringify(stu));
//"{"name":"zcxiaobao","age":18}"
1
2
3
4
5
6

注意：

• undefined 值、函数或者XML值会被忽略;
• 如果你的数组当中含有 undefined 值，函数或 XML 值，该数组中的这些值将会被当成 null ;
• 常用于本地储存 localstorage.setItem(“key”,JSON.stringify( obj )，如果直接存入会变成 [object,object]。

JSON.stringify({
    doStuff: function() { },
    doThings: [ function() {}, undefined ]
});
// 输出结果:  "{"doThings":[null,null]}"
1
2
3
4
5

2.JSON.stringify 方法的第二个参数

(1) JSON.stringify方法还可以接受一个数组参数，指定需要转成字符串的属性。

JSON.stringify({ a:1, b:2 }, ['a'])
// '{"a":1}'  只将属性 a 转换为字符串
1
2

(2) JSON.stringify 方法还可以接受一个函数作为参数，用来更改默认的字符串化的行为。

function f(key, value) {
  if (typeof value === "number") {
    value = 2 * value;
  }
  return value;
}

JSON.stringify({ a:1, b:2 ,c:'name'}, f)
// "{"a":2,"b":4,"c":"name"}"
1
2
3
4
5
6
7
8
9

3.JSON.stringify 方法的第三个参数

JSON.stringify还可以接受第三个参数，用于增加返回的JSON字符串的可读性。

• 如果是数字，表示每个属性前面添加的空格（最多不超过10个）；
• 如果是字符串（不超过10个字符），则该字符串会添加在每行前面；

var person = {
    name: "Jim Cowart",
    location: {
        city: {
            name: "Chattanooga",
            population: 167674
        },
        state: {
            name: "Tennessee",
            abbreviation: "TN",
            population: 6403000
        }
    },
    company: "appendTo"
};
//如果你希望缩进量为2 个空格，
// 你可以这么干：
console.log(JSON.stringify(person, null, 2));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4.JSON.parse 方法将 JSON 字符串转换为 JSON 对象

如果传入的字符串不是有效的JSON格式，JSON.parse方法将报错。

const stu = {
    name: 'zcxiaobao',
    age: 18
}
let new_stu = JSON.stringify(stu)
//"{"name": "zcxiaobao","age": 18}"
let old_stu = JSON.parse(new_stu)
//{
//  "name": "zcxiaobao",
//  "age": 18
//} 
1
2
3
4
5
6
7
8
9
10
11

5.JSON.parse()的第二个参数

JSON.parse方法可以接受一个处理函数，用法与JSON.stringify方法类似。

function f(key, value) {
  if ( key === ""){
      return value;
  }
  if ( key === "a" ) {
    return value + 10;
  }
}

var o = JSON.parse('{"a":1,"b":2}', f);
o.a // 11
o.b // undefined
1
2
3
4
5
6
7
8
9
10
11
12

---

欢迎大家积极讨论……