关于 JavaScript中的JSON你还记得多少 忘记了再看一遍吧

序言

JavaScript Object Notation，简称JSON，是一种轻量级的数据交换格式，广泛应用于各种编程语言之间的数据交互。JSON源于JavaScript的对象字面量表示法，但它已经演变成一种独立于编程语言的通用数据格式，因此在不同语言之间可以轻松地进行解析和生成。

JSON的基本结构

JSON的基本单位是对象和数组。

对象是一个无序的键值对集合，由花括号 {} 包围。键和值之间使用冒号 : 分隔，键值对之间使用逗号 , 分隔。例如：

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

数组由方括号 [] 包围，其中的元素之间同样使用逗号 , 分隔。数组可以包含各种类型的值，包括字符串、数字、布尔值、对象和其他数组。

["apple", "orange", "banana"]

JSON中的值可以是字符串、数字、布尔值、对象、数组，以及特殊值 null。

{
  "name": "Alice",
  "age": 25,
  "isStudent": true,
  "grades": [90, 85, 92],
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  },
  "isActive": null
}

JSON的语法规则

• 键和字符串值必须使用双引号。
• 字符串必须使用双引号。
• 数字、布尔值和null不需要引号。

这些规则使得JSON的结构清晰，易于阅读和解析。

JSON的方法

在JavaScript中，我们可以使用两个主要的JSON方法进行数据的序列化和反序列化。

JSON.parse()：从字符串到对象的转化

JSON.parse() 方法用于将JSON字符串解析为JavaScript对象。这个过程称为解析或反序列化。下面是一个简单的例子：

var jsonString = '{"name": "John", "age": 30}';
var jsonObject = JSON.parse(jsonString);
console.log(jsonObject);

在这个例子中，jsonString 是一个包含姓名和年龄信息的JSON字符串，JSON.parse() 将其转换为JavaScript对象 jsonObject。解析后，我们可以直接访问对象的属性：

console.log(jsonObject.name); // 输出: John
console.log(jsonObject.age);  // 输出: 30

解析时的可选参数：reviver

JSON.parse() 还接受一个可选的 reviver 参数，允许我们在解析过程中对结果进行修改。reviver 是一个函数，接收两个参数：属性键和属性值。我们可以根据需要修改属性值，或者在特定条件下丢弃某些属性。

var jsonString = '{"name": "John", "age": 30}';
var reviver = function(key, value) {
  if (key === "age") {
    return value + 5;
  }
  return value;
};
var jsonObject = JSON.parse(jsonString, reviver);
console.log(jsonObject.age);  // 输出: 35

在这个例子中，reviver 函数检查属性键是否为 "age"，如果是，则将其值加上 5。这种灵活性使得在解析JSON数据时能够执行更复杂的操作。

JSON.stringify()：从对象到字符串的转化

JSON.stringify() 方法用于将JavaScript对象转换为JSON字符串。这个过程称为序列化。下面是一个简单的例子：

var person = { name: "John", age: 30 };
var jsonString = JSON.stringify(person);
console.log(jsonString);

在这个例子中，person 是一个包含姓名和年龄信息的JavaScript对象，JSON.stringify() 将其转换为JSON字符串 jsonString。

序列化时的可选参数：replacer 和 space

JSON.stringify() 提供了两个可选参数，replacer 和 space，用于控制序列化的过程。

• replacer： 可以是一个函数或数组，用于转换结果。如果是函数 ，该函数将被逐个调用，接收属性键和属性值，返回新的属性值。如果是数组，只有数组中列出的属性会被包含在最终的JSON字符串中。

    var person = { name: "John", age: 30, gender: "male" };
    var replacer = function(key, value) {
      if (key !== "gender") {
        return value;
      }
    };
    var jsonString = JSON.stringify(person, replacer);
    console.log(jsonString);

• space： 用于美化输出的空格数或字符串。

   var person = { name: "John", age: 30 };
   var jsonString = JSON.stringify(person, null, 2); // 使用2个空格缩进
   console.log(jsonString);

这些参数使得我们能够更灵活地控制序列化的结果，适应不同的需求。

结语

JSON在现代Web开发中扮演着重要的角色，而JavaScript中的 JSON.parse() 和 JSON.stringify() 方法为处理JSON数据提供了简单而强大的工具。通过深入了解这两个方法及其可选参数，我们能够更好地理解和利用JSON在数据交换中的优势，使得前端和后端之间的数据传递更加高效和可靠。

如果这篇文章感觉对你有用的话，给作者一点鼓励点个赞吧♥

这个专栏在持续更新更多有用的干货中，关注➕收藏 Coding不迷茫

所有文章的源码，给作者的开源git仓库点个收藏吧: gitee.com/cheng-bingw...

更多干货内容：HTML5中的 Transition 与 Animation: 创造流畅的用户体验