JS标准库系列(七)—— JSON对象

一、JSON格式


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

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

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

  • JSON对值得类型和格式规定(牢记):

  • 复合类型的值只能是数组或对象,不能是函数、正则表达式对象、日期对象。
  • 简单类型的值只有四种:字符串、数值(必须以十进制表示)、布尔值和null(不能使用NaN, Infinity, -Infinityundefined)。

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

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

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

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

上面代码中,barobj对象的不可遍历属性,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方法得第二个参数指定,只转prop1prop2两个属性。

指定要被序列化的属性名

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

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方法类似。

(本系列完结)

推荐阅读更多精彩内容

  • 参考基础教程的整理,方便记忆 一、Object对象 (O大写) 所有其他对象都继承自这个对象。Object本身也是...
    Viaphlyn阅读 1,852评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 121,747评论 17 134
  • 一棵树倒了 倒地的声音很大 响声传得好远好远 惊动了周边的所有飞禽走兽 一棵树倒了 树杈上的鸟窝碎了 茅草散落一地...
    瓶水之冰阅读 63评论 1 3