JSON基础详解

JSON

1. JSON 解决什么问题?

前端页面是 JS,后端是 Java/Python/PHP。两门语言不能直接交换对象。

  • JS 有对象{name:"张三"};后端有自己的对象,不能直接传给浏览器。
  • JSON 就是跨语言通用文本格式。 把数据转成一段字符串文本,网络传输只传文本;两端各自把文本转回自己语言能识别的数据。

一句话总结:JSON = 不同语言之间传递数据的通用翻译文本

2. JSON 使用场景

  1. AJAX 请求:后端返回数据,基本都是 JSON 格式(接口返回列表、用户信息、商品数据,就像咱刚才的组织架构树数据,后端可以返回 JSON)
  2. localStorage 本地存储:只能存字符串,JS 对象存本地,必须转 JSON 字符串
  3. 配置文件:项目里package.json就是 JSON
  4. 接口 Mock、ApiPost 调试,大部分接口返回 JSON

3. JSON 语法规则(重点,新手最容易踩坑)

JSON 本质就是一段字符串,长得像 JS 对象,但有严格限制! ✅ JSON 要求:

  1. 属性名(key)必须用双引号 ",不能单引号,不能不写引号
  2. 字符串值,也必须双引号
  3. 只能写这几种数据:对象{}、数组[]、数字、字符串、true/false、null ❌ JSON不能:
  • 写注释(//、/* */都不行!很多新手踩坑)

  • 写undefined、函数

  • key 用单引号、不带引号

    // ✅合法JSON
    {
    "name": "技术部",
    "children": [
    {"name":"前端组"}
    ]
    }

    // ❌这是JS对象,不是JSON!
    let obj = {
    name:"技术部", // key没有双引号
    msg:'单引号字符串' // 单引号,JSON不认
    }

4. JS 里操作 JSON 的两个核心 API(就 2 个!)

JSON 字符串 ↔ JS 对象

  1. JSON.parse( json字符串 ):解析。把 JSON 文本 → JS 对象(前端拿到后端返回数据,用这个)

  2. JSON.stringify( js对象 ):序列化。把 JS 对象 → JSON 字符串(传给后端,或者存 localStorage)

    // 示例
    // 1. 一段JSON字符串(网络拿到的就是这种文本)
    let jsonStr = { "name": "张三", "age": 20 }

    // 2. JSON字符串转JS对象,前端直接读取属性
    let userObj = JSON.parse(jsonStr)
    console.log(userObj.name)

    // 3. JS对象转JSON字符串
    let person = {name:"李四",age:22}
    let str = JSON.stringify(person)
    console.log(str)

类比理解: JSON 字符串 = 纸质写的单据(只能看,不能直接操作) JS 对象 = JS 内存里的对象,可以随便读取修改 parse:把纸上文字录入电脑变成对象 stringify:把电脑对象打印成纸质单据文本

相关推荐
恋猫de小郭12 分钟前
Flutter THLC 的 WebView 滚动终于从 70 FPS 提升到 120 FPS
android·前端·flutter
严肃小白兔1 小时前
TanStack Router 更新构建工具链:Node.js 兼容性、路由分割与前端工程实践
前端·node.js·状态模式
IT_陈寒1 小时前
Vue这个奇葩的响应式问题让我加班到凌晨
前端·人工智能·后端
风骏时光牛马1 小时前
功能可用性自动化测试验证
前端
LucianaiB11 小时前
【元宝搜索开发者征文大赛】AI时代,学得慢就不用学?用元宝搜索打造一个教程保质期,确保每一个教程符合你的现状
前端·人工智能·ai编程
excel11 小时前
JavaScript 对象池:减少高频对象创建与 GC 压力
前端
陈随易13 小时前
纯 Go 写的 JS 引擎,跑分超过了 C 语言的 QuickJS
前端·后端·程序员
子兮曰15 小时前
Chrome 权限元素实战:144 与 151 的渐进增强写法
前端·javascript·chrome
IT_陈寒15 小时前
Redis连接池泄漏那次,我差点把生产环境搞崩了
前端·人工智能·后端
强尼银手15 小时前
我花一天做了个格斗游戏原型,判定全对,然后被「美术」劝退了
前端·javascript