JSON数据格式：JSON.parse() 与 JSON.stringify()

欢迎来到今天的讲座

大家好！欢迎来到今天的讲座，我们今天要聊的是JavaScript中两个非常重要的方法：JSON.parse() 和 JSON.stringify()。这两个方法在处理JSON（JavaScript Object Notation）数据时起到了至关重要的作用。无论你是前端开发人员，还是后端开发人员，亦或是全栈开发者，掌握这两个方法都能让你在日常工作中更加得心应手。

什么是JSON？

在我们深入探讨这两个方法之前，先简单介绍一下JSON。JSON是一种轻量级的数据交换格式，易于人类阅读和编写，同时也易于机器解析和生成。它基于JavaScript编程语言的一个子集，但被广泛用于各种编程语言中。

JSON的基本结构是由键值对组成的对象，或者是由值组成的数组。例如：

{
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "courses": ["Math", "Science", "History"]
}

这段JSON表示一个对象，包含四个属性：name、age、isStudent 和 courses。其中，courses 是一个数组，包含了三个字符串。

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

问题场景

假设你正在开发一个Web应用，需要从服务器获取一些数据。服务器返回的数据通常是JSON格式的字符串，而你需要将这个字符串转换成JavaScript对象，以便在代码中使用。这就是JSON.parse() 的用武之地。

方法介绍

JSON.parse() 方法用于将一个JSON字符串解析为JavaScript对象。它的基本语法如下：

const jsonString = '{"name": "Alice", "age": 25, "isStudent": false}';
const parsedObject = JSON.parse(jsonString);
console.log(parsedObject); // { name: 'Alice', age: 25, isStudent: false }

在这个例子中，jsonString 是一个JSON格式的字符串，JSON.parse() 将其转换成了一个JavaScript对象 parsedObject。现在你可以像操作普通对象一样操作 parsedObject，例如：

console.log(parsedObject.name); // Alice
console.log(parsedObject.age);  // 25

处理嵌套结构

JSON.parse() 也可以处理更复杂的嵌套结构。例如：

{
  "user": {
    "name": "Bob",
    "address": {
      "street": "123 Main St",
      "city": "New York"
    }
  },
  "orders": [
    { "id": 1, "product": "Laptop" },
    { "id": 2, "product": "Phone" }
  ]
}

解析这段JSON字符串后，你可以轻松访问嵌套的对象和数组：

const complexJsonString = '{"user": {"name": "Bob", "address": {"street": "123 Main St", "city": "New York"}}, "orders": [{"id": 1, "product": "Laptop"}, {"id": 2, "product": "Phone"}]}';
const complexObject = JSON.parse(complexJsonString);

console.log(complexObject.user.name); // Bob
console.log(complexObject.orders[0].product); // Laptop

错误处理

如果你尝试解析一个无效的JSON字符串，JSON.parse() 会抛出一个 SyntaxError。因此，在实际开发中，建议使用 try...catch 语句来捕获可能的错误：

const invalidJsonString = '{"name": "Alice", "age": 25, "isStudent": false'; // 缺少右括号

try {
  const parsedObject = JSON.parse(invalidJsonString);
  console.log(parsedObject);
} catch (error) {
  console.error('Invalid JSON string:', error.message);
}

自定义解析

JSON.parse() 还支持一个可选的第二个参数，称为 reviver 函数。这个函数可以在解析过程中对每个键值对进行修改。例如，假设你有一个日期字段，你想将其转换为 Date 对象：

const jsonStringWithDate = '{"name": "Alice", "birthday": "1990-05-20T00:00:00Z"}';

function reviver(key, value) {
  if (key === 'birthday') {
    return new Date(value);
  }
  return value;
}

const parsedObjectWithDate = JSON.parse(jsonStringWithDate, reviver);
console.log(parsedObjectWithDate.birthday); // 1990-05-20T00:00:00.000Z

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

问题场景

与 JSON.parse() 相反，JSON.stringify() 用于将JavaScript对象转换为JSON字符串。这在你需要将数据发送到服务器或存储在本地时非常有用。

方法介绍

JSON.stringify() 的基本语法如下：

const user = { name: 'Alice', age: 25, isStudent: false };
const jsonString = JSON.stringify(user);
console.log(jsonString); // {"name":"Alice","age":25,"isStudent":false}

在这个例子中，user 是一个JavaScript对象，JSON.stringify() 将其转换成了一个JSON字符串 jsonString。现在你可以将这个字符串发送到服务器或存储在文件中。

格式化输出

默认情况下，JSON.stringify() 生成的字符串是紧凑的，没有多余的空格或换行符。如果你想让输出更加易读，可以传递一个 space 参数。例如：

const prettyJsonString = JSON.stringify(user, null, 2);
console.log(prettyJsonString);
/*
{
  "name": "Alice",
  "age": 25,
  "isStudent": false
}
*/

这里的 null 表示不使用过滤器，2 表示每层缩进两个空格。你可以根据需要调整缩进的大小。

过滤输出

JSON.stringify() 还支持一个可选的第二个参数，称为 replacer 函数或数组。通过这个参数，你可以控制哪些属性应该包含在输出的JSON字符串中。

使用数组过滤

你可以传递一个数组，指定要包含的属性名称：

const jsonStringWithFilter = JSON.stringify(user, ['name', 'age']);
console.log(jsonStringWithFilter); // {"name":"Alice","age":25}

在这个例子中，只有 name 和 age 属性被包含在输出的JSON字符串中，isStudent 被忽略了。

使用函数过滤

你也可以传递一个函数作为 replacer，对每个键值对进行自定义处理。例如，假设你不想序列化某些敏感信息：

function replacer(key, value) {
  if (key === 'password') {
    return undefined; // 排除 password 属性
  }
  return value;
}

const userWithPassword = { name: 'Alice', age: 25, password: 'secret' };
const jsonStringWithoutPassword = JSON.stringify(userWithPassword, replacer);
console.log(jsonStringWithoutPassword); // {"name":"Alice","age":25}

处理循环引用

JavaScript对象可能会包含循环引用，即某个对象的属性指向了它自己或其他已经存在的对象。JSON.stringify() 默认情况下无法处理这种情况，会抛出 TypeError。为了防止这种情况，你可以使用 toJSON() 方法或第三方库（如 flatted）来处理循环引用。

例如，假设你有一个包含循环引用的对象：

const person = { name: 'Alice' };
person.self = person;

try {
  JSON.stringify(person);
} catch (error) {
  console.error('Cycle detected:', error.message);
}

你可以通过定义 toJSON() 方法来解决这个问题：

person.toJSON = function() {
  return { name: this.name };
};

const jsonStringWithoutCycle = JSON.stringify(person);
console.log(jsonStringWithoutCycle); // {"name":"Alice"}

总结

今天我们详细介绍了 JSON.parse() 和 JSON.stringify() 这两个方法，它们在处理JSON数据时非常强大且灵活。JSON.parse() 可以将JSON字符串转换为JavaScript对象，而 JSON.stringify() 则可以将JavaScript对象转换为JSON字符串。通过使用 reviver 和 replacer 函数，你还可以对解析和序列化过程进行自定义控制。

希望今天的讲座对你有所帮助！如果你有任何问题或想法，欢迎在评论区留言。谢谢大家！