剖析 JSON.parse 和 JSON.stringify 的用法，深入理解 JavaScript 的数据解析与序列化之道

2024-01-15 05:26:18

1. JSON.parse：将 JSON 字符串解析为 JavaScript 对象

JSON.parse() 函数将 JSON 字符串解析为 JavaScript 对象。它接受一个 JSON 字符串作为参数，并返回一个由该字符串表示的对象。

const jsonStr = '{"name": "John Doe", "age": 30}';
const obj = JSON.parse(jsonStr);

console.log(obj); // { name: 'John Doe', age: 30 }

JSON.parse() 函数支持解析各种 JSON 数据类型，包括字符串、数字、布尔值、数组和对象。但是，它不能解析函数、日期或正则表达式等复杂数据类型。

需要注意的是，JSON.parse() 函数只解析有效的 JSON 字符串。如果字符串包含语法错误或无效字符，函数将抛出 SyntaxError 异常。

2. JSON.stringify：将 JavaScript 对象序列化为 JSON 字符串

JSON.stringify() 函数将 JavaScript 对象序列化为 JSON 字符串。它接受一个对象作为参数，并返回一个表示该对象的 JSON 字符串。

const obj = { name: 'John Doe', age: 30 };
const jsonStr = JSON.stringify(obj);

console.log(jsonStr); // "{\"name\": \"John Doe\", \"age\": 30}"

JSON.stringify() 函数支持序列化各种 JavaScript 数据类型，包括字符串、数字、布尔值、数组和对象。它还支持序列化日期对象和正则表达式，但不能序列化函数。

需要注意的是，JSON.stringify() 函数不会序列化对象的属性和方法，只序列化对象的数据值。

3. JSON.parse() 和 JSON.stringify() 的常见错误

在使用 JSON.parse() 和 JSON.stringify() 函数时，可能会遇到一些常见错误。

1. 语法错误

JSON.parse() 函数只解析有效的 JSON 字符串。如果字符串包含语法错误或无效字符，函数将抛出 SyntaxError 异常。

要避免此错误，请确保 JSON 字符串是有效的。可以使用 JSON.parse() 函数的第二个参数来指定要解析的字符串的起始位置和结束位置。

const jsonStr = '{"name": "John Doe", "age": 30}';
const obj = JSON.parse(jsonStr, 1, jsonStr.length - 1);

console.log(obj); // { name: 'John Doe', age: 30 }

2. 循环引用

JSON.stringify() 函数不能序列化包含循环引用的对象。如果对象中有一个属性指向该对象本身，那么 JSON.stringify() 函数将抛出 TypeError 异常。

要避免此错误，可以使用 JSON.stringify() 函数的第二个参数来指定要序列化的属性的名称。

const obj = { name: 'John Doe', age: 30, self: obj };
const jsonStr = JSON.stringify(obj, ['name', 'age']);

console.log(jsonStr); // "{\"name\": \"John Doe\", \"age\": 30}"

3. 函数序列化

JSON.stringify() 函数不能序列化函数。如果对象中包含函数，那么 JSON.stringify() 函数将忽略该函数。

要避免此错误，可以使用 JSON.stringify() 函数的第三个参数来指定一个函数，该函数将用于序列化对象中的函数。

const obj = { name: 'John Doe', age: 30, greet: function() { console.log('Hello, world!') } };
const jsonStr = JSON.stringify(obj, null, function(key, value) {
  if (typeof value === 'function') {
    return value.toString();
  }
  return value;
});

console.log(jsonStr); // "{\"name\": \"John Doe\", \"age\": 30, \"greet\": \"function() { console.log('Hello, world!') }\""