JS标准库系列（七）—— JSON对象

一、JSON格式

---

• JSON格式（JavaScript Object Notation）是一种用于数据交换的文本格式，2001年由 道格拉斯 克罗克福德（Douglas Crockford）提出，目的是取代繁琐笨重XML格式。

• 相比XML格式，JSON格式有两个显著优点：书写简单，一目了然；符合JS原生语法，JS引擎可直接解析，不用另外添加解析代码。所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ES5，成为了标准的一部分。

• 每个JSON代表一个值，要么是简单类型的值，要么是复合类型的值，但是只能是一个值，不能是两个或更多的值。这就是说，每个JSON文档只能包含一个值。

• JSON对值得类型和格式规定（牢记）：

• 复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。

• 简单类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。

• 字符串必须使用双引号表示，不能使用单引号。

• 对象的键名必须放在双引号里面。

• 数组或对象最后一个成员的后面，不能加逗号。

• ES5新增了JSON对象，用来处理JSON格式的数据，它有两个方法：JSON.stringify()和JSON.parse()。

二、JSON.stringify()，[将JS值序列化为JS字符串，该字符串内容要符合JSON格式]

---

用于将一个JS值序列化为一个字符串，这个JS字符串内容应该符合JSON格式，并且可以被JSON.parse()还原。

2.1、修改MDN上对这个概念的翻译：

原翻译并不是很直观，容易让初学者产生误解。

修订MDN上的内容

2.2、示例：

JSON.stringify('abc') // ""abc""  JS字符串里面的"abc"是符合JSON格式的字符串
JSON.stringify(1) // "1"  JS字符串里面的1是符合JSON格式的数值
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"
JSON.stringify([1, "false", false]) // '[1,"false",false]'
JSON.stringify({ name: "张三" }) // '{"name":"张三"}'

上面代码将各种类型的值，转成JSON字符串。需要注意的是，对于原始类型的字符串，转换结果会带双引号，即字符串abc会被转成"abc"，这是因为将来还原的时候，双引号可以让JS引擎知道，abc是一个字符串，而不是一个变量名。

如果原始对象中，有一个成员是undefined、函数或XML对象，这个成员会被省略。如果数组的成员是undefined、函数或XML对象，则这些值被转成null。

JSON.stringify({
  f: function(){},
  a: [ function(){}, undefined ]
});
// "{"a": [null,null]}"

上面代码中，原始对象的f属性是一个函数，JSON.stringify方法返回的字符串会将这个属性省略。而a属性是一个空数组，成员分别是函数和undefined，它们都被转成了null。

正则对象会被转成空对象。

JSON.stringify(/foo/) // "{}"

JSON.stringify方法会忽略对象的不可遍历属性。

var obj = {};
Object.defineProperties(obj, {
  'foo': {
    value: 1,
    enumerable: true
  },
  'bar': {
    value: 2,
    enumerable: false
  }
});

JSON.stringify(obj); // {"foo":1}

上面代码中，bar是obj对象的不可遍历属性，JSON.stringify方法会忽略这个属性。

2.3、第二个参数

2.3.1、JSON.stringify方法可以接受一个数组，作为第二个参数，指定需要转成字符串的属性。

var obj = { 
    prop1: 'value1', 
    prop2: 'value2', 
    prop3: 'value3'
};
var selectedProperties = ['prop1', 'prop2'];
JSON.stringify(obj, selectedProperties);

上面代码中，JSON.stringify方法得第二个参数指定，只转prop1和prop2两个属性。

指定要被序列化的属性名

如果要序列化的是一个数组，那第二个参数就无效：

JSON.stringify(["a", "b"], ['0']);
JSON.stringify({a: "huahua", b: 23}, ['0']);

只能对属性有效

2.3.2、第二个参数还可以是一个函数，用来更改JSON.stringify的默认行为。

function f(key, value) { 
    if (typeof value === "number") { 
        value = 2 * value; 
    } 
    return value;
}
JSON.stringify({ a: 1, b: 2 }, f);
// '{"a": 2,"b": 4}'

上面代码中的f函数，接受两个参数，分别是被转换的对象的键名和键值。如果键值是数值，就将它乘以2，否则就原样返回。

2.4、第三个参数

• 默认情况下该方法输出的字符串不包含任何空格字符或缩进，所以有了第三个可选的参数。

• 这个参数用于增加返回的JSON语法的字符串的可读性。如果是数字，表示每个属性前面添加的空格（最多不超过10个）；如果是字符串（不超过10个字符），则该字符串会添加在每行前面。

JSON.stringify({ p1: 1, p2: 2 }, null, 2);
/*
"{ 
  "p1": 1, 
  "p2": 2
}"
*/
JSON.stringify({ p1:1, p2:2 }, null, '|-');
/*
"{
|-"p1": 1,
|-"p2": 2
}"
*/

2.5、toJSON方法

如果JSON.stringify的参数对象有自定义的toJSON方法，那么JSON.stringify会使用这个方法的返回值作为参数，而忽略原对象的其他属性。

三、JSON.parse()，[将字符串变成值]

---

将一个符合JSON语法的字符串（注意理解，不是JSON字符串）解析成一个对应类型的值或对象。

3.1、MDN中对这个方法的翻译做了修改，如下：

• 原来的翻译：

  
  原来的翻译

• 修改后的翻译：

  
  修改后的翻译

3.2、示例：

JSON.parse('{}'); // {}
JSON.parse('true'); // true
JSON.parse(' "foo" '); // "foo"  注意理解，"foo"是一个JSON字符串，'"foo"'是符合JSON语法的字符串
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null'); // null

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

JSON.parse("'String'") // illegal single quotes
// SyntaxError: Unexpected token ILLEGAL

上面代码中，双引号字符串中是一个单引号字符串，因为单引号字符串不符合JSON格式，所以报错。

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

（本系列完结）