转换：parse 与 stringify

这是什么：转换 = JSON 文本和 JS 对象之间的互转：JSON.parse() 把 JSON 文本拆包成对象，JSON.stringify() 把对象打包成 JSON 文本。

为什么用：JSON 本质是文本，程序里没法直接 data.name 取值；对象又没法直接发给服务器或存进文件。所有「进门 / 出门」都要过这两扇门，这是 JSON 的核心操作。

如何用：两个方法都挂在全局的 JSON 工具上，控制台里就能练，本章顺手把数据存进 localStorage 玩一次。

JSON.parse()：进门，拆包

把 JSON 文本变成 JS 对象：

let text = '{ "name": "呱小吉", "age": 3 }'   // 这是字符串，不是对象
let frog = JSON.parse(text)

console.log(frog.name)     // 呱小吉
console.log(frog.age + 1)  // 4（是数字，能做运算）

「你会看到」：frog.name 直接取到值。转换前 text 只是一串字符，转换后才是能取值、能运算的对象。

字符串 '{ "name": "呱小吉" }'  ──JSON.parse──>  对象 { name: '呱小吉' }

JSON.stringify()：出门，打包

把 JS 对象变回 JSON 文本：

let frog = { name: '呱小吉', age: 3, say: function () {} }

let text = JSON.stringify(frog)
console.log(text)

你会看到：

{"name":"呱小吉","age":3}

注意两点：① 输出是一整行紧凑文本，键带双引号；② say 函数消失了——JSON 里存不了函数和 undefined，stringify 会悄悄丢弃它们，这是特性不是 bug。

格式化输出：缩进参数

stringify 的第三个参数可以指定缩进，让输出带换行和空格，方便人看：

let frog = { name: '呱小吉', skills: ['游泳', '捉虫'] }

console.log(JSON.stringify(frog, null, 2))

你会看到：

{
  "name": "呱小吉",
  "skills": [
    "游泳",
    "捉虫"
  ]
}

2 表示每层缩进 2 个空格。调试时打印数据、写配置文件都用它；发给服务器的数据则用默认的紧凑格式，省流量。

实战：用 localStorage 存取数据

localStorage 只能存字符串——想存对象，出门用 stringify，进门用 parse：

let todos = [{ text: '学 JSON', done: true }, { text: '学 AJAX', done: false }]

// 存：对象 → JSON 字符串
localStorage.setItem('todos', JSON.stringify(todos))

// 取：JSON 字符串 → 对象
let saved = JSON.parse(localStorage.getItem('todos'))
console.log(saved[0].text)   // 学 JSON

「你会看到」：刷新页面后再执行取的那两行，数据还在——这就是待办清单、草稿箱「刷新不丢」的原理。

❓ 常见问题

Q1：JSON.parse 收到的不是合法 JSON，会怎样？

直接抛错，程序当场中断：

SyntaxError: Unexpected token ' in JSON at position 1

所以解析「来路不明」的数据（服务器返回、用户输入）前，要用 try...catch 兜底，第 5 章专门展开。

Q2：JSON.parse(undefined) 报什么错？

SyntaxError: Unexpected token 'u' in JSON at position 0

localStorage.getItem('不存在的键') 会返回 null，而 JSON.parse(null) 返回 null 不报错；但如果你先对它做了什么变成了 undefined，parse 就会炸。稳妥写法：JSON.parse(str || '{}') 给个兜底默认值。

Q3：为什么 typeof JSON.stringify(frog) 是 'string'？

因为它的返回值就是 JSON 文本。别把结果再当对象用——要取值得先 parse 回来。「stringify 出来的是字符串」这一点，翻车现场见得最多。

记忆口诀：parse 拆包进内存，stringify 打包出门去；存取配对用，缩进传个 2。

📝 本章小结

JSON.parse(文本) → JS 对象；JSON.stringify(对象) → JSON 文本
stringify 丢函数和 undefined；第三参数传 2 可格式化输出
localStorage 只存字符串，对象要 stringify 存、parse 取
parse 遇到非法 JSON 直接抛错，需要 try...catch 保护

动手改

在控制台把 { name: '你', hobbies: ['代码', '游戏'] } stringify 成带缩进的格式
给这个对象加一个函数再 stringify，看看它去哪了
把今天日期存进 localStorage，刷新页面后取出来打印

上一章：JSON 语法 · 下一章：嵌套对象与数组 🐸