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

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


相关推荐
answerball43 分钟前
🔥 Vue3响应式源码深度解剖:从Proxy魔法到依赖收集,手把手教你造轮子!🚀
前端·响应式设计·响应式编程
Slow菜鸟2 小时前
ES5 vs ES6:JavaScript 演进之路
前端·javascript·es6
小冯的编程学习之路2 小时前
【前端基础】:HTML
前端·css·前端框架·html·postman
Jiaberrr3 小时前
Vue 3 中搭建菜单权限配置界面的详细指南
前端·javascript·vue.js·elementui
科科是我嗷~3 小时前
【uniapp】textarea maxlength字数计算不准确的问题
javascript·uni-app·html
懒大王95273 小时前
uniapp+Vue3 组件之间的传值方法
前端·javascript·uni-app
拉不动的猪4 小时前
刷刷题31(vue实际项目问题)
前端·javascript·面试
zeijiershuai4 小时前
Ajax-入门、axios请求方式、async、await、Vue生命周期
前端·javascript·ajax
恋猫de小郭4 小时前
Flutter 小技巧之通过 MediaQuery 优化 App 性能
android·前端·flutter