JSON

2019-08-15  本文已影响0人  了凡和纤风

本章内容：理解JSON语法、解析JSON、序列化JSON。

曾经有一段时间，XML是互联网上传输结构化数据的事实和标准。Web服务的第一次浪潮很大程度上都是建立在 XML 之上，突出的特点是服务器与服务器间的通信。然而，一直有不乏质疑XML的声音。不少人认为XML过于烦琐、冗长。
2006年，Douglas Crockford 把 JSON（JavaScript Object Notation，JavaScript表示法）作为 IETFRFC 4627提交给 IETF，而 JSON 的应用早在 2001年就已经开始了。
关于JSON，最重要的是要理解它是一种数据格式。

一、语法

JSON的语法可以表示一下三种类型的值：

1.1、简单值

最简单的JSON 数据形式就是 简单值。

5
"Hello World!"

上面分别是表示 数值 5 和 字符串的JSON格式，需要注意的是，在JSON 中，字符串必须使用 双引号。
在实际应用中，JSON更多地用来表示更复杂的数据结构，而简单值只是整个数据结构中的一部分。

1.2、对象

JSON 表示对象的方式如下：

{
  "name": "Lee",
  "age": 16
}

属性的值可以是简单值，也可以是复杂类型值，因此可以像下面这样在对象中嵌入对象。

{
  "name": "Lee",
  "age": 16,
  "friends": {
    "name": "Rose",
    "age": "15"
  }
}

1.3、数组

JSON中的第二种复杂数据类型是数组。JSON 数组采用的就是JavaScript中的数组字面量形式
例如：

[25, "hi", true]

JSON 数组也没用变量和分号。把数组和对象结合起来，可以构成更复杂的数据结构集合。
例如：

[
  {
    "name": "清河",
    "age": 19,
    "friends": [
      { "name": "星河" }      
    [
  },
  {
    "name": "风铃",
    "age": 16,
    "friends": [
      { "name": "玉秀" }      
    [
]

二、解析与序列化

与 XML 数据结构要解析成 DOM 文档而且从中提取数据极为麻烦相比，JSON 可以解析为 JavaScript 对象的优势及其明显
假设以上数据结构保存在变量 users 中：

users[0].friends[0].name

2.1、JSON 对象

早期的 JSON 解析器基本上就是使用 JavaScript的 eval() 函数。ECMAScript 5 对解析JSON的 行为进行规范，定义了全局对象JSON。

JSON 对象有两个方法： stringify() 和 parse()，在最简单的情况下。这两个方法分别用于把 JavaScript 对象序列化为 JSON 字符串和 把 JSON 字符串解析为原生 JavaScript 值。

var people = {
"name": "xxx",
"age": 12
}

var jsonText = JSON.stringify(people) // 序列化
console.log(jsonText) // {"name":"xxx","age":12}
console.log(typeof jsonText) // string

var peopleCopy = JSON.parse(jsonText)
console.log(peopleCopy) // {name: "xxx", age: 12}
console.log(typeof peopleCopy) // object

2.2、序列化选项

JSON.stringify() 除了要序列化的 JavaScript 对象外，还可以接受另外两个参数，这两个参数用于指定以不同的方式序列化 JavaScript 对象。

2.2.1、过滤结果

如果过滤器参数是数组，那么JSON.stringify() 的结果中将只包含数组中列出的属性。

var book = {
  "title": "Perofessional JavaScript",
  "price": 99.00,
  "edition": 3
}
var jsonText = JSON.stringify(book, ["title", "price"])
console.log(jsonText) // {"title":"Perofessional JavaScript","price":99}

如果第二个参数是函数，行为会稍微不同。传入的函数接收两个参数，属性（键）名和属性值。根据属性（键）名可以知道应该如何处理要序列化的对象中的属性。属性名只能是字符串，而在值并非键值对结果的值时，键名可以是空字符串。
为了改变序列化对象的结果，函数返回的值就是相应的键的值。不过需要注意，如果函数返回来 undefined，那么相应的属性会被忽略。
例如：

  var book = {
  "title": "Perofessional JavaScript",
  "price": 99.00,
  "edition": 3
}
var jsonText = JSON.stringify(book, function(key, value) {
  switch(key) {
    case "title":
      return value.toUpperCase()
    case "price":
      return 100
    case "edition":
      return undefined
    default:
      return value
  }
})
console.log(jsonText) // {"title":"PEROFESSIONAL JAVASCRIPT","price":100}
2.2.2、字符串缩进

JSON.stringify() 方法的第三个 参数用于控制结果中的缩进和空白符。如果这个参数是一个数值，那它表示的是每个级别缩进的空格数。
例如：要在每个级别缩进4个 空格

var book = {
  "title": "Perofessional JavaScript",
  "price": 99.00,
  "edition": 3
}

var jsonText = JSON.stringify(book, null, 4)

console.log(jsonText)
/*
{
    "title": "Perofessional JavaScript",
    "price": 99,
    "edition": 3
}
*/

如果缩进的参数是一个字符串而非数值，则这个字符串将在 JSON 字符串中被用作缩进字符

var jsonText = JSON.stringify(book, null, '-----')
console.log(jsonText)
/*
{
-----"title": "Perofessional JavaScript",
-----"price": 99,
-----"edition": 3
}
*/

缩进的字符串最长不能超过10个字符长。如果字符串长度超过了 10个，结果中将只能出现前10个字符。

2.2.3、toJSON() 方法

有时候，JSON.stringify() 还是不能满足对某些对象进行自定义序列化的需求。在这些情况下，可以给对象定义 toJSON() 方法，返回其自身的 JSON 数据格式。
可以为任何对象添加 toJSON() 方法，比如：

var book = {
  "title": "Perofessional JavaScript",
  "price": 99.00,
  "edition": 3,
  toJSON: function() {
    return this.title
  }
}

var jsonText = JSON.stringify(book) // "Perofessional JavaScript"

toJSON() 可以作为函数过滤器的补充，因此理解序列化的内部十分重要。假设把一个对象传入 JSON.stringify()，序列化该对象的属性如下：

  1. 如果存在 toJSON() 方法而且能够通过它取得有效的值，则调用该方法。否则，返回对象本身。
  2. 如果提供了第二个参数，应用这个函数过滤器。传入函数过滤器的值是第（1）步返回的值
  3. 对第（2）步返回的每个值进行相应的序列化
  4. 如果提供了第三个参数，执行相应的格式化

无论是考虑定义 toJSON() 方法，还是考虑使用函数过滤器，亦或需要同时使用两者，理解这个顺序都是至关重要的。

2.3、解析选项

JSON.parse() 方法也可以接受另一个参数，该参数是一个函数，将在美国键值对上调用。这个函数被称为还原函数（reviver） 接受两个参数：一个键、一个值，而且都需要返回一个值。
如果还原函数返回 undefined，则表示要从结果中删除相应的键；如果返回其它值，则将改值插入到结果中。在将日期字符串转换为 Date 对象是，经常要用到还原函数，例如：

var book = {
  "title": "Perofessional JavaScript",
  "price": 99.00,
  edition: 3,
  releaseDate: new Date(2019, 8, 15)
}
var jsonText = JSON.stringify(book)
console.log(jsonText)
/*
{"title":"Perofessional JavaScript","price":99,"edition":3,"releaseDate":"2019-09-14T16:00:00.000Z"}
*/

var bookCopy = JSON.parse(jsonText, function(key, value) {
  if (key == "releaseDate") {
    return new Date(value)
  } else {
    return value
  }
})
console.log(bookCopy)
/*
{title: "Perofessional JavaScript", price: 99, edition: 3, releaseDate: Sun Sep 15 2019 00:00:00 GMT+0800 (香港标准时间)}
*/
console.log(bookCopy.releaseDate.getFullYear()) // 2019

经过解析后又在 bookCopy 中还原为一个 Date 对象。

三、小结

JSON是一个轻量级的数据格式，可以简化表示复杂数据结构的工作量。JSON使用 JavaScript 语法的子集表示对象、数组、字符串、数值、布尔值 和 null。即使 XML 也能表示同意复杂的数据结果，但是JSON 没有那么烦琐，而且在JavaScript中使用更便利。

ECMAScript 5定义了一个原生的 JSON 对象，可以用来将对象序列化为 JSON 字符串或者将 JSON 数据解析为 JavaScript 对象。JSON.stringify() 和 JSON.parse() 方法分别用来实现上诉两项功能。这两个方法都有一些选项，通过他们可以改变过滤的方式，或者改变序列化的过程。

原生的JSON对象也得到了很多浏览器的支持，比如：IE8+、Firefox3.5+、Safari4+、Opera10.5+、Chrome。

上一篇下一篇

猜你喜欢

热点阅读