秒懂 JSON:JavaScript JSON 方法详解,让你轻松驾驭数据交互!

一、JSON的核心方法:数据转换的"双刃剑"

  1. JSON.parse():字符串→对象的魔法

    JSON.parse() 方法接受一个 JSON 字符串作为参数,并返回一个对应的 JavaScript 对象。 语法:

javascript 复制代码
JSON.parse(text[, reviver])
  • text (必需): 要解析为 JavaScript 对象的 JSON 字符串。
  • reviver (可选): 一个函数,用于转换结果。该函数接收两个参数:键和值。它应该返回要添加到 JavaScript 对象中的值。
javascript 复制代码
 const jsonString = '{"name":"John Doe","age":30,"city":"New York"}';

 const person = JSON.parse(jsonString);
 console.log(person); // 输出: {name: "John Doe", age: 30, city: "New York"}
 console.log(person.name); // 输出: John Doe

 // 使用 reviver 函数
 const personWithReviver = JSON.parse(jsonString, (key, value) => {
   if (key === "age") {
     return value + 5; // 将 age 增加 5
   }
   return value;
 });
 console.log(personWithReviver); // 输出: {name: "John Doe", age: 35, city: "New York"}

关键点 :自动处理嵌套结构,但需警惕格式错误(如单引号、尾逗号)导致的SyntaxError

安全解析 :用try-catch包裹避免崩溃:
javascript try { JSON.parse(invalidJson); } catch (e) { console.error("JSON格式错误!", e); }

  1. JSON.stringify():对象→字符串的奥秘
    语法:

    javascript 复制代码
    JSON.stringify(value[, replacer[, space]])
    • value (必需): 要转换为 JSON 字符串的 JavaScript 对象。

    • replacer (可选): 一个函数或数组,用于转换结果。

      • 函数: 该函数接收两个参数:键和值。它应该返回要添加到 JSON 字符串中的值。如果返回 undefined,则该键值对将被排除。
      • 数组: 一个字符串数组,指定要包含在 JSON 字符串中的键。
    • space (可选): 一个字符串或数字,用于在 JSON 字符串中添加空格以提高可读性。

      • 数字: 表示要使用的空格数。
      • 字符串: 表示要使用的空格字符串(最多 10 个字符)。
    javascript 复制代码
    const user = { name: "小明", skills: ["JS", "Python"] };  
    const jsonStr = JSON.stringify(user);  
    // 输出:{"name":"小明","skills":["JS","Python"]}  

    进阶格式化:添加缩进提升可读性(适合日志/调试):

    javascript 复制代码
    JSON.stringify(user, null, 4); // 4空格缩进  

    数据过滤 :通过replacer参数隐藏敏感字段(如密码):

    javascript 复制代码
    JSON.stringify(user, (k, v) => k === 'password' ? undefined : v);  

二、高阶技巧:解锁JSON的"隐藏技能"

  1. 深度克隆对象:打破引用的枷锁

    javascript 复制代码
    const original = { a: 1, nested: { b: 2 } };  
    const clone = JSON.parse(JSON.stringify(original));  
    clone.nested.b = 99;  
    console.log(original.nested.b); // 仍为2  

    局限性 :无法复制函数、undefined及循环引用对象。

  2. 自定义序列化:用toJSON()掌控输出

    为自定义类定义序列化逻辑:

    javascript 复制代码
    class User {  
      constructor(name) { this.name = name; }  
      toJSON() { return { name: this.name.toUpperCase() }; }  
    }  
    console.log(JSON.stringify(new User("john"))); // {"name":"JOHN"}  

    应用场景:简化复杂对象(如日期格式、加密数据)。


相关推荐
IT_陈寒2 小时前
SpringBoot这个自动配置坑我跳了三次
前端·人工智能·后端
kyriewen2 小时前
我用 AI 一周写完了整个项目,上线第一天就崩了——这是我踩过最贵的 5 个坑
前端·javascript·ai编程
Larcher3 小时前
AI Loop:让AI像人一样自主完成任务的核心机制
javascript·人工智能·设计模式
默_笙3 小时前
🃏 JS 只有 8 种数据类型,但我花了 2 天才搞懂 null 和 undefined 的区别
javascript
牧艺3 小时前
从零到协同:构建类飞书在线文档系统的五个技术重难点
前端·人工智能
jump_jump4 小时前
流式 HTML:从 htmx 片段装配到浏览器原生增量渲染
javascript·性能优化·前端工程化
红尘散仙4 小时前
想写一个像样的终端 App?试试把 React 的开发体验搬进 Rust TUI
前端·rust
袋鼠云数栈UED团队4 小时前
一套 Spec-First 的 AI 编程工作流
前端·人工智能
袋鼠云数栈前端4 小时前
一套 Spec-First 的 AI 编程工作流
前端·ai+
angerdream4 小时前
Android手把手编写儿童手机远程监控App之vue3 路由守卫
前端