JS之JSON.stringfy和JSON.parse

JSON.stringify 和 JSON.parse 是 JavaScript 中用于处理 JSON 数据的两个非常重要的方法。它们分别用于将 JavaScript 对象转换为 JSON 字符串，以及将 JSON 字符串解析为 JavaScript 对象。

`JSON.stringify`

JSON.stringify 方法用于将一个 JavaScript 值（通常是对象或数组）转换为 JSON 字符串。这在需要将数据发送到服务器或存储在本地时非常有用。

语法

JSON.stringify(value[, replacer[, space]])

value：要转换成 JSON 字符串的 JavaScript 值。
replacer（可选）：一个函数或数组，用于选择性地替换值或过滤属性。
space（可选）：用于控制缩进和空格的字符串或数字，使生成的 JSON 字符串更易读。

示例

const obj = {name: "Alice",age: 25,hobbies: ["reading", "swimming"]
};// 基本用法
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: {"name":"Alice","age":25,"hobbies":["reading","swimming"]}// 使用 replacer 函数
const jsonStringWithReplacer = JSON.stringify(obj, (key, value) => {if (key === "age") {return undefined; // 过滤掉 age 属性}return value;
});
console.log(jsonStringWithReplacer); // 输出: {"name":"Alice","hobbies":["reading","swimming"]}// 使用 space 参数
const prettyJsonString = JSON.stringify(obj, null, 2);
console.log(prettyJsonString);
/* 输出:
{"name": "Alice","age": 25,"hobbies": ["reading","swimming"]
}
*/

`JSON.parse`

JSON.parse 方法用于将 JSON 字符串解析为 JavaScript 对象。这在从服务器接收 JSON 数据或从本地存储读取 JSON 数据时非常有用。

语法

JSON.parse(text[, reviver])

text：要解析的 JSON 字符串。
reviver（可选）：一个函数，用于在返回最终结果之前对解析出的对象进行修改。

示例

const jsonString = '{"name":"Alice","age":25,"hobbies":["reading","swimming"]}';// 基本用法
const obj = JSON.parse(jsonString);
console.log(obj); // 输出: { name: 'Alice', age: 25, hobbies: [ 'reading', 'swimming' ] }// 使用 reviver 函数
const objWithReviver = JSON.parse(jsonString, (key, value) => {if (key === "age") {return value * 2; // 修改 age 属性}return value;
});
console.log(objWithReviver); // 输出: { name: 'Alice', age: 50, hobbies: [ 'reading', 'swimming' ] }

注意事项

循环引用：如果对象中存在循环引用，JSON.stringify 会抛出错误。例如：

const obj = {};
obj.self = obj;
console.log(JSON.stringify(obj)); // 抛出 TypeError: Converting circular structure to JSON

非标准类型：JSON.stringify 不能处理一些非标准的 JavaScript 类型，如 undefined、函数和 Symbol。这些值会被忽略或转换为 null。
日期类型：日期对象会被转换为 ISO 格式的字符串。如果你希望以其他格式处理日期，可以使用 replacer 函数。
reviver 函数：reviver 函数在解析过程中逐个键值对调用，可以用来修改解析后的对象。