欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-07 18:54:29
...

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());