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

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


相关推荐
该换个名儿了2 分钟前
Vue3中,我的Watch为什么总监听不到数据?
前端·javascript·vue.js
坚持学习前端日记4 分钟前
桌面端与移动端JS桥技术对比及跨平台实现
开发语言·javascript·harmonyos
Crystal3286 分钟前
移动web开发常见问题
前端·css·面试
ahhdfjfdf10 分钟前
前端实现带滚动区域的 DOM 长截图导出
前端·javascript·react.js
周星星日记15 分钟前
vue3中使用defineModel
前端·vue.js
八哥程序员18 分钟前
javascript 为什么会有闭包这么个烧脑的东西
前端·javascript
JavaEdge在掘金25 分钟前
上线卡半夜、出 bug 只能硬扛?前端自动化部署 + 秒级回滚方案来了
前端
方也_arkling29 分钟前
【八股】JS中的事件循环
开发语言·前端·javascript·ecmascript
坚持学习前端日记34 分钟前
原生Android开发与JS桥开发对比分析
android·开发语言·javascript
颜酱1 小时前
从经典问题入手,吃透动态规划核心(DP五部曲实战)
前端·javascript·算法