JSON 在 JavaScript 中的使用

JSON 与 JavaScript

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它与 JavaScript 对象字面量语法非常相似。在 JavaScript 中，我们可以轻松地处理 JSON 数据。

{"{}"}

JSON.parse()

将 JSON 字符串转换为 JavaScript 对象

" "

JSON.stringify()

将 JavaScript 对象转换为 JSON 字符串

↔

数据操作

访问和修改 JSON 数据

🌐

实际应用

AJAX、本地存储等场景

JSON.parse() - 解析 JSON 字符串

JSON.parse() 方法用于将一个 JSON 字符串转换为 JavaScript 对象。

// JSON 字符串
const jsonString = '{"name": "张三", "age": 30, "isStudent": false}';

// 解析为 JavaScript 对象
const obj = JSON.parse(jsonString);

// 访问对象属性
console.log(obj.name); // "张三"
console.log(obj.age); // 30
console.log(obj.isStudent); // false

使用 reviver 函数

reviver 函数可以在解析过程中对结果进行转换。

const jsonString = '{"name": "张三", "age": 30, "birthDate": "1990-05-15"}';

const obj = JSON.parse(jsonString, function(key, value) {
  // 将日期字符串转换为 Date 对象
  if (key === 'birthDate') {
    return new Date(value);
  }
  return value;
});

console.log(obj.birthDate); // Date 对象
console.log(obj.birthDate.getFullYear()); // 1990
提示： 始终使用 try-catch 处理 JSON.parse() 可能抛出的异常，特别是处理来自外部源的 JSON 数据时。

JSON.stringify() - 序列化 JavaScript 对象

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

// JavaScript 对象
const obj = {
  name: "张三",
  age: 30,
  isStudent: false,
  hobbies: ["阅读", "游泳"]
};

// 序列化为 JSON 字符串
const jsonString = JSON.stringify(obj);

console.log(jsonString);
// '{"name":"张三","age":30,"isStudent":false,"hobbies":["阅读","游泳"]}'

格式化输出

使用第三个参数可以格式化输出，提高可读性。

const obj = {
  name: "张三",
  age: 30,
  address: {
    city: "北京",
    country: "中国"
  }
};

// 缩进 2 个空格
const formattedJson = JSON.stringify(obj, null, 2);
console.log(formattedJson);
/*
{
  "name": "张三",
  "age": 30,
  "address": {
    "city": "北京",
    "country": "中国"
  }
}
*/

使用 replacer 函数

replacer 函数可以控制哪些属性被包含在结果中。

const obj = {
  name: "张三",
  age: 30,
  password: "secret123",
  isAdmin: true
};

// 使用 replacer 函数过滤属性
const jsonString = JSON.stringify(obj, function(key, value) {
  // 排除密码字段
  if (key === 'password') {
    return undefined;
  }
  return value;
});

console.log(jsonString);
// '{"name":"张三","age":30,"isAdmin":true}'

交互式演示

在下面的演示区域中，您可以尝试 JSON 解析和序列化。

JavaScript 对象

JSON 字符串

JSON 数据操作

解析后的 JSON 数据可以像普通 JavaScript 对象一样进行操作。

// 解析 JSON 字符串
const jsonString = '{"users": [{"id": 1, "name": "张三"}, {"id": 2, "name": "李四"}]}';
const data = JSON.parse(jsonString);

// 访问数据
console.log(data.users[0].name); // "张三"

// 修改数据
data.users[0].name = "张四";

// 添加新数据
data.users.push({id: 3, name: "王五"});

// 序列化回 JSON 字符串
const updatedJson = JSON.stringify(data, null, 2);
console.log(updatedJson);

遍历 JSON 数据

const data = {
  name: "张三",
  age: 30,
  hobbies: ["阅读", "游泳"]
};

// 遍历对象属性
for (let key in data) {
  if (data.hasOwnProperty(key)) {
    console.log(key + ": " + data[key]);
  }
}

// 使用 Object.keys()
Object.keys(data).forEach(key => {
  console.log(`${key}: ${data[key]}`);
});

// 遍历数组
data.hobbies.forEach((hobby, index) => {
  console.log(`爱好 ${index + 1}: ${hobby}`);
});

实际应用场景

1. AJAX 请求

// 使用 fetch API 获取 JSON 数据
fetch('/api/users')
  .then(response => response.json()) // 自动解析 JSON
  .then(data => {
    console.log(data);
    // 处理数据...
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

// 发送 JSON 数据
const userData = {
  name: "张三",
  email: "zhangsan@example.com"
};

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
});

2. 本地存储

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

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

// 从 localStorage 读取
const storedSettings = JSON.parse(localStorage.getItem('userSettings'));

if (storedSettings) {
  console.log("用户设置:", storedSettings);
  // 应用设置...
}

3. 配置文件

// 假设有一个 config.json 文件
/*
{
  "api": {
    "baseUrl": "https://api.example.com",
    "timeout": 5000
  },
  "features": {
    "darkMode": true,
    "notifications": false
  }
}
*/

// 在 JavaScript 中使用配置
fetch('config.json')
  .then(response => response.json())
  .then(config => {
    const apiUrl = config.api.baseUrl;
    const timeout = config.api.timeout;
    // 使用配置...
  });

注意事项

1. 错误处理

始终使用 try-catch 处理 JSON.parse() 可能抛出的异常：

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

2. 数据类型限制

JSON 不支持 JavaScript 中的所有数据类型：

  • 函数 - 序列化时会被忽略
  • undefined - 序列化时会被忽略
  • Symbol - 序列化时会被忽略
  • 循环引用 - 会导致序列化错误

3. 性能优化

对于大型 JSON 数据：

  • 使用流式解析处理大型数据集
  • 只序列化需要的属性，减少数据量
  • 对于频繁操作的对象，缓存序列化结果
上一章: JSON解析与序列化 下一章: JSON在Python中使用