综合练习：把配置表变成可用数据

这是什么：本章把前 5 章串成一条流水线：拿到一段 JSON 文本 → 安全解析 → 校验字段 → 遍历渲染 → 修改数据 → 打包存回。练习目标：模拟「商店后台改价」的完整小闭环。

为什么用：单个知识点都会了，连起来才叫会用。这个「解析 → 用 → 存」的流程，就是日后所有接口开发的原型。

如何用：代码里模拟了「从文件/接口读来的字符串」，全程在前端在线运行场或控制台就能跑，不需要任何后端。

任务设定

商店老板给你一段商品配置 JSON（想象它是刚从服务器读回来的文本），要做三件事：

解析并校验，坏了给默认值
打印每件商品的「名字 × 折后价」
给指定商品改价，再把最新数据存回 localStorage

完整代码

// ① 模拟从服务器/文件读到的 JSON 文本（注意它是字符串，有坑：末行多了个尾逗号）
let raw = `{
  "shop": "青蛙商店",
  "goods": [
    { "name": "荷叶伞", "price": 30, "discount": 0.8 },
    { "name": "泳镜", "price": 25, "discount": 0.9 },
    { "name": "捉虫网", "price": 40, "discount": 1.0 }
  ]
}`

// ② 安全解析：parse 失败就兜底，程序不崩（第 5 章）
function safeParse(text, fallback) {
  try {
    return JSON.parse(text)
  } catch (e) {
    console.warn('配置解析失败：', e.message)
    return fallback
  }
}
let config = safeParse(raw, { shop: '默认商店', goods: [] })

// ③ 校验字段：配置里必须有商品列表才继续（第 4 章的 ?. 与第 5 章的校验思路）
if (!config.goods?.length) {
  console.warn('配置里没有商品，走默认流程')
} else {
  // ④ 遍历渲染：打出「名字 × 折后价」（第 4 章 for...of）
  console.log(`欢迎光临 ${config.shop}，今日商品：`)
  for (let item of config.goods) {
    let final = item.price * item.discount
    console.log(`- ${item.name}：原价 ${item.price} 元，折后 ${final} 元`)
  }

  // ⑤ 修改数据：捉虫网打 8 折（对象直接改属性）
  let net = config.goods.find(item => item.name === '捉虫网')
  if (net) {
    net.discount = 0.8
    console.log(`改价成功：${net.name} 现在折后 ${net.price * net.discount} 元`)
  }

  // ⑥ 打包存回：对象 → JSON 文本，带缩进方便人看（第 3 章）
  localStorage.setItem('shop-config', JSON.stringify(config, null, 2))
  console.log('最新配置已存入 localStorage')
}

你会看到：

欢迎光临 青蛙商店，今日商品：
- 荷叶伞：原价 30 元，折后 24 元
- 泳镜：原价 25 元，折后 22.5 元
- 捉虫网：原价 40 元，折后 40 元
改价成功：捉虫网 现在折后 32 元
最新配置已存入 localStorage

逐段中文精讲

第 ① 段（原始数据）：用反引号模板字符串包一段 JSON——注意它是文本，不是对象。真实的 JSON 都是这么「从外面」进来的。
第 ② 段（安全解析）：safeParse 是第 5 章的标准写法，try/catch + 兜底值。这里 raw 其实是合法的，但真实世界里谁也不敢保证。
第 ③ 段（字段校验）：config.goods?.length 防止 goods 不存在；没有数据就 warn 一声走默认流程，不硬着头皮往下跑。
第 ④ 段（遍历渲染）：for...of 逐个商品算折后价。final 只在循环里用，所以声明在循环体内。
第 ⑤ 段（修改数据）：find 按名字找到那个商品对象——注意找到的是对象本身，改 net.discount 就是改 config 里的数据。
第 ⑥ 段（存回）：stringify(config, null, 2) 带缩进打包存进 localStorage。下次打开页面，用 safeParse(localStorage.getItem('shop-config'), 默认配置) 取回即可。

动手改

把 raw 末行的尾逗号删掉——等等，它本来就是合法的；先故意加一个尾逗号，看 safeParse 怎么兜底
新增一件商品写进代码里，重新跑一遍看清单变化
把「存回」改成先取出旧配置、合并新数据再存（提示：safeParse(localStorage.getItem('shop-config'), null) || config）

学完这章去哪

你已经能让 JSON「读得懂、改得动、存得回」了。但数据现在都是写死在代码里的——真实的 JSON 是从服务器请求回来的。

下一站：AJAX 教程，用 fetch 把 JSON 真正「请求」回来，打通前后端最后一公里 🐸