JS之JSON.stringfy和JSON.parse

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

JSON.stringify

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

语法
javascript 复制代码
JSON.stringify(value[, replacer[, space]])
  • value:要转换成 JSON 字符串的 JavaScript 值。
  • replacer(可选):一个函数或数组,用于选择性地替换值或过滤属性。
  • space(可选):用于控制缩进和空格的字符串或数字,使生成的 JSON 字符串更易读。
示例
javascript 复制代码
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 数据时非常有用。

语法
javascript 复制代码
JSON.parse(text[, reviver])
  • text:要解析的 JSON 字符串。
  • reviver(可选):一个函数,用于在返回最终结果之前对解析出的对象进行修改。
示例
javascript 复制代码
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' ] }

注意事项

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

    javascript 复制代码
    const obj = {};
    obj.self = obj;
    console.log(JSON.stringify(obj)); // 抛出 TypeError: Converting circular structure to JSON
  2. 非标准类型JSON.stringify 不能处理一些非标准的 JavaScript 类型,如 undefined、函数和 Symbol。这些值会被忽略或转换为 null

  3. 日期类型 :日期对象会被转换为 ISO 格式的字符串。如果你希望以其他格式处理日期,可以使用 replacer 函数。

  4. reviver 函数reviver 函数在解析过程中逐个键值对调用,可以用来修改解析后的对象。

总结

  • JSON.stringify 将 JavaScript 对象转换为 JSON 字符串。
  • JSON.parse 将 JSON 字符串解析为 JavaScript 对象。
  • 可以通过 replacerreviver 函数来定制转换和解析过程。
  • 注意处理循环引用和非标准类型的特殊情况。
相关推荐
csbysj202012 分钟前
Java 条件语句
开发语言
We་ct24 分钟前
React 性能优化精讲
前端·javascript·react.js·性能优化·前端框架·html·浏览器
Ulyanov1 小时前
《现代 Python 桌面应用架构实战:PySide6 + QML 从入门到工程化》 开发环境搭建与工具链极简主义 —— 拒绝臃肿,构建工业级基座
开发语言·python·qt·ui·架构·系统仿真
逻辑驱动的ken1 小时前
Java高频面试场景题19
java·开发语言·面试·职场和发展·求职招聘
初心未改HD1 小时前
Go语言net/http与Web开发:构建高性能HTTP服务
开发语言·golang
渣渣盟1 小时前
Spark 性能调优实战:从开发到生产落地
javascript·ajax·spark
叼烟扛炮2 小时前
C++第一讲:C++ 入门基础
开发语言·c++·函数重载·引用·内联函数·nullptr
Ulyanov2 小时前
《现代 Python 桌面应用架构实战:PySide6 + QML 从入门到工程化》:QML 声明式语法与霓虹按钮 —— 当 Python 遇见现代美学
开发语言·python·ui·qml·系统仿真·雷达电子对抗仿真
弹不出的5h3ll2 小时前
Ghost Bits:高位截断如何让 Java WAF 形同虚设
java·开发语言
码界筑梦坊2 小时前
113-基于Python的国际超市电商销售数据可视化分析系统
开发语言·python·信息可视化·毕业设计·fastapi