【重走JavaScript之高级程序设计】JSON

合集 - 【重走JavaScript之高级程序设计】(17)

1.【重走JavaScript之高级程序设计】 流程语句2022-08-272.【重走JavaScript之高级程序设计】 操作符2022-08-313.【重走JavaScript之高级程序设计】函数Function2022-09-294.【重走JavaScript之高级程序设计】迭代器与生成器2022-09-185.【重走JavaScript之高级程序设计】数组Array2022-09-116.【重走JavaScript之高级程序设计】变量、作用域与内存2022-09-057.【重走JavaScript之高级程序设计】客户端存储2023-12-138.【重走JavaScript之高级程序设计】期约与异步函数2023-12-109.【重走JavaScript之高级程序设计】BOM2023-11-29

10.【重走JavaScript之高级程序设计】JSON2023-11-23

11.【重走JavaScript之高级程序设计】集合和映射2023-11-2112.【重走JavaScript之高级程序设计】Math2023-11-1413.【重走JavaScript之高级程序设计】对象Object2023-11-1414.【重走JavaScript之高级程序设计】字符串String2023-11-1415.【重走JavaScript之高级程序设计】网络请求与远程资源2024-01-1416.【重走JavaScript之高级程序设计】JavaScript Api2024-01-0417.【重走JavaScript之高级程序设计】模块2023-12-17

收起

JSON

理解JSON最关键的一点是要把它当成一种数据格式，而不是编程语言。很多语言都有解析和序列化的JSON的内置能力。

1.语法

JSON语法支持表示三种类型的值。JSON没有变量、函数和对象实例的概念。

• 简单值：字符串、数值、布尔值和null可以在JSON中表示。特殊值undefined 不可以。
  • JSON中的简单值包括：字符串、数值、布尔值和null。其中字符串必须用双引用包裹。
• 对象：第一种复杂数据类型，对象表示有序键/值对。其中每个值可以是简单值，也可以是复杂类型。
  • JSON中对象与JavaScript的区别，对象属性名必须用双引用包裹，并且没有声明。
• 数组：第二种复杂数据类型，数组表示可以通过数组索引访问的值的有序列表。数组的值可以是任意类型，包括简单值、对象，甚至其他数组。
• JSON数组同样没有声明。

2.解析和序列化

2.1 JSON对象

JSON对象有两个方法：stringify()和parse()。两者互为逆操作，搭配使用可以达到深拷贝的效果。

• JSON.stringify(),方法将JavaScript对象序列化成JSON字符串。
• JSON.parse(),方法将JSON字符串解析成JavaScript对象。

2.2 序列化选项

JSON.stringify()方法可以接收两个参数，这两个参数用于指定其他序列化JavaScript对象的方法。

1. 过滤结果
   当参数为数组形式，JSON.stringify()返回的结果只会包含该数组列出的对象属性。

const book = {
  author: "Matt",
  title: "JavaScript权威指南",
  content: "balabala"
};
// 通过第二参数，来过滤结果
const jsonTxt = JSON.stringify(book, ["author", "title"]);
console.log(jsonTxt); // {"author":"Matt","title":"JavaScript权威指南"}

当参数为函数形式，函数接受两个参数，属性名key和属性值value。可以根据着给key决定要对什么属性执行什么操作。这个key始终是字符串，只是在值不属于某个键/值对时会说空字符串。

const book = {
  author: "Matt",
  title: "JavaScript权威指南",
  content: "balabala"
};
const jsonTxt = JSON.stringify(book, (key, value) => {
  switch (key) {
    case "author":
      return value.toUpperCase(); // 当key为author，value转换成大写
    case "title":
      return undefined; // 返回undefined会忽略该属性
    default:
      return value; // 其他属性不做任何处理
  }
});
console.log(jsonTxt); // {"author":"MATT","content":"balabala"}

2. 字符串缩进
   第三个参数控制缩进和空格。

2.3 toJSON()方法

自定义JSON序列化。在需要序列化的对中添加toJSON()方法。

let book = {
  author: "Matt",
  title: "JavaScript权威指南",
  content: "balabala",
  // 不能使用箭头函数，this指向全局
  toJSON() {
    return {
      author: this.author,
      title: this.title
    };
  }
};

let jsonTxt = JSON.stringify(book); // '{"author":"Matt","title":"JavaScript权威指南"}'

2.4 解析选项

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

1. 过滤结果
   当参数为数组形式，JSON.parse()返回的结果只会包含该数组列出的对象属性。

let book = {
  author: "Matt",
  title: "JavaScript权威指南",
  content: "balabala",
  year: 2023,
  releaseDate: new Date(2023, 1, 1)
};

let jsonTxt = JSON.stringify(book);
let bookCopy = JSON.parse(jsonTxt, (key, value) => (key == "releaseDate" ? new Date(value) : value));
console.log(bookCopy.releaseDate.getFullYear()); // 2023