JSON转JS对象：前端开发中的实用技巧

在日常开发中，经常需要从服务器获取数据，而这些数据大多以 JSON 格式传输。比如调用天气 API 时，返回的是一串字符串形式的 JSON，像这样：{"city": "北京", "temperature": 26}。但要在 JavaScript 中操作这些数据，就得先把它变成真正的 JS 对象。

使用 JSON.parse() 转换

最常用的方法是 JSON.parse()。它能将符合格式的 JSON 字符串解析成对应的 JS 对象。

const jsonString = '{"name": "小明", "age": 30, "city": "上海"}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 输出：小明

这个方法简单直接，适合大多数场景。只要确保传入的是合法的 JSON 字符串，否则会抛出语法错误。

处理异步请求中的转换

实际项目里，JSON 数据通常来自网络请求。例如用 fetch 获取用户列表：

fetch('/api/users')
  .then(response => response.text())
  .then(data => {
    const users = JSON.parse(data);
    console.log(users);
  });

也可以直接用 response.json()，它内部已经完成了字符串到对象的转换：

fetch('/api/users')
  .then(response => response.json())
  .then(users => {
    console.log(users);
  });

注意特殊情况

不是所有看起来像 JSON 的字符串都能成功解析。比如属性名没用双引号包裹，或者用了单引号，都会导致失败。

// 这些写法是错误的
JSON.parse("{name: '张三'}");     // 属性名没引号
JSON.parse('{"name": '李四'}'); // 值用了单引号

正确的 JSON 必须使用双引号包裹键和字符串值。如果后端返回的数据格式不规范，需要先处理字符串再解析。

自定义转换逻辑

有时候不只是简单转换，还想在过程中处理某些字段。比如时间戳自动转日期：

const jsonString = '{"name": "订单1", "time": 1712054400000}';
const order = JSON.parse(jsonString, (key, value) => {
  if (key === 'time') {
    return new Date(value);
  }
  return value;
});
console.log(order.time); // 输出一个 Date 对象

第二个参数是还原函数，可以对每个键值对进行加工，适合需要统一处理数据类型的情况。