秒懂 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"}  

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


相关推荐
d***93518 小时前
springboot3.X 无法解析parameter参数问题
android·前端·后端
n***840719 小时前
十七:Spring Boot依赖 (2)-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
likuolei1 天前
XSL-FO 软件
java·开发语言·前端·数据库
正一品程序员1 天前
vue项目引入GoogleMap API进行网格区域圈选
前端·javascript·vue.js
j***89461 天前
spring-boot-starter和spring-boot-starter-web的关联
前端
star_11121 天前
Jenkins+nginx部署前端vue项目
前端·vue.js·jenkins
im_AMBER1 天前
Canvas架构手记 05 鼠标事件监听 | 原生事件封装 | ctx 结构化对象
前端·笔记·学习·架构
JIngJaneIL1 天前
农产品电商|基于SprinBoot+vue的农产品电商系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·农产品电商系统
Tongfront1 天前
前端通用submit方法
开发语言·前端·javascript·react
可爱又迷人的反派角色“yang”1 天前
LVS+Keepalived群集
linux·运维·服务器·前端·nginx·lvs