JavaScript高级程序设计第四版学习--第二十三章

---

title: JavaScript高级程序设计第四版学习–第二十三章
date: 2021-5-30 21:07:15
author: Xilong88
tags: JavaScript

本章内容：
理解JSON语法
解析JSON
JSON序列化
可能出现的面试题：
1.JSON和XML的优缺点？
2.JSON怎么处理undefined
3.JSON基本使用方法

知识点：
JSON语法支持表示3种类型的值。

简单值 ：字符串、数值、布尔值和null 可以在JSON中出现，就像
在JavaScript中一样。特殊值undefined 不可以。
对象 ：第一种复杂数据类型，对象表示有序键/值对。每个值可以
是简单值，也可以是复杂类型。
数组 ：第二种复杂数据类型，数组表示可以通过数值索引访问的
值的有序列表。数组的值可以是任意类型，包括简单值、对象，甚
至其他数组。

JSON字符串必须使用双引号（单引号会导致语法错误）。

let person = {
  name: "Nicholas",
  age: 29
};

{
  "name": "Nicholas",
  "age": 29
}

[
  {
    "title": "Professional JavaScript",
    "authors": [
      "Nicholas C. Zakas",
      "Matt Frisbie"
    ],
    "edition": 4,
    "year": 2017
  },
  {
    "title": "Professional JavaScript",
    "authors": [
      "Nicholas C. Zakas"
    ],
    "edition": 3,
    "year": 2011
  },
  {
    "title": "Professional JavaScript",
    "authors": [
      "Nicholas C. Zakas"
    ],
    "edition": 2,
    "year": 2009
  },
  {
    "title": "Professional Ajax",
    "authors": [
      "Nicholas C. Zakas",
      "Jeremy McPeak",
      "Joe Fawcett"
    ],
    "edition": 2,

    "year": 2008
  },
  {
    "title": "Professional Ajax",
    "authors": [
      "Nicholas C. Zakas",
      "Jeremy McPeak",
      "Joe Fawcett"
    ],
    "edition": 1,
    "year": 2007
  },
  {
    "title": "Professional JavaScript",
    "authors": [
      "Nicholas C. Zakas"
    ],
    "edition": 1,
    "year": 2006
  }
]

2.JSON对象

JSON对象有两个方法：stringify() 和parse()

let book = {
  title: "Professional JavaScript",
  authors: [
    "Nicholas C. Zakas",
    "Matt Frisbie"
  ],
  edition: 4,
  year: 2017
};
let jsonText = JSON.stringify(book);

3.序列化选项

JSON.stringify() 方法除了要序列化的对象，还可以接收两个参数。

如果第二个参数是一个数组，那么JSON.stringify() 返回的结果
只会包含该数组中列出的对象属性。比如下面的例子：
let book = {
  title: "Professional JavaScript",
  authors: [
    "Nicholas C. Zakas",
    "Matt Frisbie"
  ],
  edition: 4,
  year: 2017
};
let jsonText = JSON.stringify(book, ["title", "edition"]);

{"title":"Professional JavaScript","edition":4}

如果第二个参数是一个函数提供的函数接收两
个参数：属性名（key ）和属性值（value ）。可以根据这个key决定要对相应属性执行什么操作。

返回undefined 会导致属性被忽略

let book = {
  title: "Professional JavaScript",
  authors: [
    "Nicholas C. Zakas",
    "Matt Frisbie"
  ],
  edition: 4,
  year: 2017
};
let jsonText = JSON.stringify(book, (key, value) => {
  switch(key) {
    case "authors":
      return value.join(",")
    case "year":
      return 5000;
    case "edition":
      return undefined;
    default:
      return value;
  }
});

{"title":"Professional JavaScript","authors":"Nicholas C. Zakas,Matt
Frisbie","year":5000}

JSON.stringify() 方法的第三个参数控制缩进和空格。在这个参数是数值时，表示每一级缩进的空格数。例如，每级缩进4个空格，可以这样：

let book = {
  title: "Professional JavaScript",
  authors: [
    "Nicholas C. Zakas",
    "Matt Frisbie"
  ],
  edition: 4,
  year: 2017
};
let jsonText = JSON.stringify(book, null, 4);

{

    "title": "Professional JavaScript",
    "authors": [
        "Nicholas C. Zakas",
        "Matt Frisbie"
    ],
    "edition": 4,
    "year": 2017
}

除了缩进，JSON.stringify() 方法还为方便阅读插入了换行符。这个行为对于所有有效的缩进参数都会发生。（只缩进不换行也没什么用。）最大缩进值为10，大于10的值会自动设置为10。

let jsonText = JSON.stringify(book, null, "--" );

{
--"title": "Professional JavaScript",
--"authors": [
----"Nicholas C. Zakas",
----"Matt Frisbie"
--],
--"edition": 4,
--"year": 2017
}

4.toJSON() 方法

此时，可以在要序列化的对象中添加toJSON() 方法，序列化时会基于这个方法返回适当的JSON表示。事实上，原生Date 对象就有一个toJSON() 方法，能够自动将JavaScript的Date 对象转换为ISO 8601日期字符串（本质上与在Date 对象上调用toISOString() 方法一样）。

下面的对象为自定义序列化而添加了一个

toJSON() 方法：
let book = {
  title: "Professional JavaScript",
  authors: [
    "Nicholas C. Zakas",
    "Matt Frisbie"
  ],
  edition: 4,
  year: 2017,
  toJSON: function() {
    return this.title;
  }
};
let jsonText = JSON.stringify(book);

toJSON() 方法可以与过滤函数一起使用，因此理解不同序列化流程的顺序非常重要。在把对象传给JSON.stringify() 时会执行如下步骤。

(1) 如果可以获取实际的值，则调用toJSON() 方法获取实际的值，
否则使用默认的序列化。
(2) 如果提供了第二个参数，则应用过滤。传入过滤函数的值就是第(1)步返回的值。
(3) 第(2)步返回的每个值都会相应地进行序列化。
(4) 如果提供了第三个参数，则相应地进行缩进。
理解这个顺序有助于决定是创建toJSON() 方法，还是使用过滤函数，抑或是两者都用。

5.解析选项

JSON.parse() 方法也可以接收一个额外的参数，这个函数会针对每个键/值对都调用一次。

为区别于传给JSON.stringify() 的起过滤作用的替代函数 （replacer），这个函数被称为还原函数 （reviver）。实际上它们的格式完全一样，即还原函数也接收两个参数，属性名（key ）和属性值（value ），另外也需要返回值。

如果还原函数返回undefined ，则结果中就会删除相应的键。

let book = {
  title: "Professional JavaScript",
  authors: [
    "Nicholas C. Zakas",
    "Matt Frisbie"
  ],
  edition: 4,
  year: 2017,
  releaseDate: new Date(2017, 11, 1)
};
let jsonText = JSON.stringify(book);
let bookCopy = JSON.parse(jsonText,
    (key, value) => key == "releaseDate" ? new Date(value) : value);
alert(bookCopy.releaseDate.getFullYear());