06. 对象与 JSON：配置、深拷贝、接口数据

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

按钮主题色显示库存

三、知识点提醒

对象常用于产品、用户、配置、接口数据。
展开运算符 `...` 非常适合合并配置。
`JSON.stringify(data, null, 2)` 可以格式化显示 JSON。

四、练习建议

增加 `currency` 下拉选项。
把配置保存到 localStorage。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/06-object-json.js，下面同步展示，方便学习和复制。

// 页面 06：对象、JSON、配置合并
const defaultConfig = {
  theme: 'blue',
  showStock: true,
  pageSize: 6,
  currency: 'AUD'
};

const themeSelect = document.querySelector('#p6-theme');
const stockSelect = document.querySelector('#p6-stock');
const applyBtn = document.querySelector('#p6-apply');
const jsonOutput = document.querySelector('#p6-output');

function createUserConfig() {
  return {
    theme: themeSelect.value,
    showStock: stockSelect.value === 'yes'
  };
}

function mergeConfig(defaults, userConfig) {
  return {
    ...defaults,
    ...userConfig,
    updatedAt: new Date().toISOString()
  };
}

applyBtn.addEventListener('click', () => {
  const userConfig = createUserConfig();
  const finalConfig = mergeConfig(defaultConfig, userConfig);
  const json = JSON.stringify(finalConfig, null, 2);

  // 模拟保存后再读取
  const parsedConfig = JSON.parse(json);
  const { theme, showStock, pageSize } = parsedConfig;

  jsonOutput.textContent = `主题：${theme}\n显示库存：${showStock}\n每页数量：${pageSize}\n\n完整 JSON：\n${json}`;
});