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

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


相关推荐
inksci23 分钟前
Vue 3 中通过 this. 调用 setup 暴露的函数
前端·javascript·vue.js
未来之窗软件服务1 小时前
monaco-editor 微软开源本地WEB-IDE-自定义自己的开发工具
开发语言·前端·javascript·编辑器·仙盟创梦ide
白白糖1 小时前
二、HTML
前端·html
子燕若水1 小时前
continue dev 的配置
java·服务器·前端
学习HCIA的小白1 小时前
关于浏览器对于HTML实体编码,urlencode,Unicode解析
前端·html
向明天乄2 小时前
Vue3 后台管理系统模板
前端·vue.js
香蕉可乐荷包蛋2 小时前
vue 常见ui库对比(element、ant、antV等)
javascript·vue.js·ui
彩旗工作室2 小时前
Web应用开发指南
前端
孙俊熙3 小时前
react中封装一个预览.doc和.docx文件的组件
前端·react.js·前端框架
wuhen_n3 小时前
CSS元素动画篇:基于当前位置的变换动画(四)
前端·css·html·css3·html5