JavaScript JSON 简明指南 🎯

🔍 什么是 JSON？

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，基于 JavaScript 对象语法，但独立于语言。

🎯 基本语法

JSON 数据结构

// 对象
{
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "hobbies": ["读书", "运动", "音乐"],
  "address": {
    "city": "北京",
    "street": "长安街"
  }
}

// 数组
["苹果", "香蕉", "橙子"]

JSON 值类型

🔧 核心方法

1. JSON.parse() - 字符串转对象

// JSON 字符串 → JavaScript 对象
const jsonString = '{"name":"李四","age":30}';
const obj = JSON.parse(jsonString);

console.log(obj.name); // "李四"
console.log(obj.age);  // 30

2. JSON.stringify() - 对象转字符串

// JavaScript 对象 → JSON 字符串
const person = {
    name: "王五",
    age: 28,
    isEmployed: true
};

const jsonString = JSON.stringify(person);
console.log(jsonString); 
// '{"name":"王五","age":28,"isEmployed":true}'

🎯 实际应用示例

数据存储

// 保存到本地存储
const userSettings = {
    theme: "dark",
    language: "zh-CN",
    notifications: true
};

localStorage.setItem('userSettings', JSON.stringify(userSettings));

// 从本地存储读取
const saved = JSON.parse(localStorage.getItem('userSettings'));
console.log(saved.theme); // "dark"

API 数据交换

// 发送数据到服务器
const postData = {
    title: "我的文章",
    content: "这是内容...",
    tags: ["技术", "编程"]
};

fetch('/api/posts', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(postData)  // 对象转JSON字符串
});

// 接收服务器响应
fetch('/api/users/1')
    .then(response => response.json())  // JSON字符串转对象
    .then(user => console.log(user.name));

配置文件

// 应用配置
const appConfig = {
    "api": {
        "baseURL": "https://api.example.com",
        "timeout": 5000
    },
    "features": {
        "darkMode": true,
        "notifications": false
    }
};

// 保存配置
const configJSON = JSON.stringify(appConfig, null, 2);  // 美化格式
console.log(configJSON);

⚠️ 常见错误和注意事项

1. 引号问题

// ❌ 错误 - 使用单引号
'{'name': '张三'}'

// ✅ 正确 - 使用双引号
'{"name": "张三"}'

2. 日期处理

const data = {
    name: "测试",
    createdAt: new Date()
};

const json = JSON.stringify(data);
// {"name":"测试","createdAt":"2023-10-01T12:00:00.000Z"}

const parsed = JSON.parse(json);
console.log(parsed.createdAt); // 字符串，不是Date对象！
console.log(new Date(parsed.createdAt)); // 需要转换

3. 函数和 undefined

const obj = {
    name: "测试",
    method: function() {},  // 函数会被忽略
    undefinedProp: undefined  // undefined会被忽略
};

console.log(JSON.stringify(obj)); // {"name":"测试"}

🔧 高级用法

自定义序列化（replacer）

const user = {
    name: "张三",
    age: 25,
    password: "secret123",
    lastLogin: new Date()
};

// 只序列化特定属性
const json = JSON.stringify(user, ['name', 'age']);
console.log(json); // {"name":"张三","age":25}

// 自定义处理函数
const customJson = JSON.stringify(user, (key, value) => {
    if (key === 'password') return undefined; // 过滤密码
    if (value instanceof Date) return value.toISOString(); // 处理日期
    return value;
});

美化输出（space参数）

const data = { name: "张三", hobbies: ["运动", "读书"] };

// 缩进2个空格
console.log(JSON.stringify(data, null, 2));
// {
//   "name": "张三",
//   "hobbies": [
//     "运动",
//     "读书"
//   ]
// }

// 使用制表符
console.log(JSON.stringify(data, null, '\t'));

🚀 实用工具函数

安全解析

function safeParse(jsonString, defaultValue = {}) {
    try {
        return JSON.parse(jsonString);
    } catch (error) {
        console.error('JSON解析错误:', error);
        return defaultValue;
    }
}

// 使用示例
const data = safeParse('无效JSON', {});
console.log(data); // {} 而不是报错

深度克隆对象

function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);
console.log(clone); // 完全独立的副本

🌍 浏览器兼容性

• 所有现代浏览器都支持 JSON
• IE8+ 支持 JSON（IE7 需要 polyfill）
• Node.js 内置支持

✅ 最佳实践

1. 始终使用 try-catch 处理 JSON.parse()
2. 验证数据 before 解析
3. 使用缩进 便于调试
4. 过滤敏感数据 如密码、token
5. 处理日期 需要特殊转换

🎯 总结

JSON 是现代 Web 开发中最重要的数据格式！ 🚀