JavaScript JSON-代码号

彻底搞懂 JSON：前端开发中数据交换的核心技术

为什么每个前端开发者都必须掌握 JSON？

我在2018年第一次接触AJAX异步请求时，遇到一个让我困惑的问题：明明从服务器拿到数据了，为什么直接访问属性却得到undefined？后来才明白，服务器返回的是一串文本，而不是可以直接使用的JavaScript对象。这个经历让我深刻意识到——不理解JSON，就没办法真正做好前端开发。

JSON（JavaScript Object Notation）虽然只是文本，但它却是浏览器和服务器之间沟通的桥梁。你调用的每个API接口，保存到本地的每个配置，几乎都离不开JSON的身影。

JSON 的核心语法规则

JSON的语法看起来和JavaScript对象很像，但有严格限制：

// JSON 格式严格要求键名必须用双引号
{
  "name": "代码号学习编程",
  "age": 5,
  "skills": ["JavaScript", "Vue", "React"],
  "isActive": true,
  "address": null
}

我自己踩过的一个坑：在.json配置文件中写了注释，结果解析报错。JSON不支持注释，这是和普通JS文件的重要区别。

两个核心方法深度解析

JSON.parse() — 把文本变回对象

这个方法在接收API响应时特别常用：

// 从服务器获取的JSON字符串
const responseFromServer = '{"username":"code_user","points":1280,"vip":true}';

// 转换为可操作的JavaScript对象
const userData = JSON.parse(responseFromServer);

console.log(userData.username); // "code_user"
console.log(`用户积分: ${userData.points}`); // 用户积分: 1280

reviver参数的高级用法
这个方法有个不太常见的第二个参数，可以修改解析过程中的值：

const jsonStr = '{"date":"2026-03-15","count":"100"}';

const obj = JSON.parse(jsonStr, (key, value) => {
  if (key === 'date') return new Date(value); // 把日期字符串转成Date对象
  if (key === 'count') return Number(value);   // 把字符串数字转成数值
  return value;
});

console.log(obj.date.getFullYear()); // 可以正常调用Date对象的方法了

JSON.stringify() — 把对象转成文本

发送数据到服务器或者存到localStorage时必须用这个方法：

const userProfile = {
  name: "李华",
  age: 28,
  preferences: {
    theme: "dark",
    notifications: true
  },
  login: function() { console.log("登录"); } // 函数会被忽略
};

// 转换成JSON字符串准备发送
const jsonToSend = JSON.stringify(userProfile);
localStorage.setItem('userProfile', jsonToSend);
// 存储结果: {"name":"李华","age":28,"preferences":{"theme":"dark","notifications":true}}

特别提醒：undefined、函数、Symbol值在转换时会被省略或变成null。这是我之前想存储对象方法失败的原因。

实用场景示例

场景1：localStorage 存储复杂数据

// 存储购物车数据
const cartItems = [
  { id: 101, name: "《JavaScript高级程序设计》", price: 89, count: 2 },
  { id: 102, name: "机械键盘", price: 299, count: 1 }
];

// 保存时必须先转成字符串
localStorage.setItem('shoppingCart', JSON.stringify(cartItems));

// 读取时再解析回来
const savedCart = JSON.parse(localStorage.getItem('shoppingCart') || '[]');
console.log(`购物车共${savedCart.length}件商品`);

场景2：处理API返回的嵌套数据

// 模拟API返回的复杂JSON
const apiResponse = `{
  "status": "success",
  "data": {
    "users": [
      {"id": 1, "name": "张三", "posts": 15},
      {"id": 2, "name": "李四", "posts": 8}
    ],
    "total": 2
  }
}`;

const result = JSON.parse(apiResponse);
result.data.users.forEach(user => {
  console.log(`${user.name}发布了${user.posts}篇文章`);
});

场景3：深拷贝对象的快捷方式

const originalObject = {
  name: "配置对象",
  settings: {
    volume: 70,
    muted: false
  }
};

// 使用JSON方法实现深拷贝（注意：会丢失函数和undefined）
const clonedObject = JSON.parse(JSON.stringify(originalObject));

clonedObject.settings.volume = 50;
console.log(originalObject.settings.volume); // 70，原对象不受影响

必须记住的限制

我刚开始用JSON时犯过的错误，希望你能避开：

键名必须双引号：{name: "张三"}这种写法在JSON里是错的，必须写成{"name": "张三"}
不能有尾随逗号：数组或对象的之后一个元素后面不能加逗号
值只能是有限类型：字符串、数字、对象、数组、布尔值、null

// 下面这些写法都会报错
const invalidJSON1 = "{name: 'code'}"; // 键名没有双引号
const invalidJSON2 = '{"age": undefined}'; // undefined不允许
const invalidJSON3 = '{"func": function(){}}'; // 函数不允许

个人经验分享

在项目中，我建议养成两个习惯：

习惯1：始终用try-catch包裹JSON.parse()

function safeJSONParse(str) {
  try {
    return JSON.parse(str);
  } catch (e) {
    console.error('JSON解析失败:', e.message);
    return null; // 返回默认值避免程序崩溃
  }
}

习惯2：格式化输出便于调试

const data = {name: "代码号学习编程", version: "2.0"};
console.log(JSON.stringify(data, null, 2)); 
// 添加第三个参数2，打印出带缩进的结构

课程知识要点

JSON是一种基于文本的数据交换格式，和JavaScript对象写法相似但有严格语法限制
所有键名必须用双引号包裹，字符串值也必须用双引号
JSON.parse()用于将JSON字符串解析为JavaScript对象，可用reviver参数二次处理
JSON.stringify()用于将JavaScript值转换为JSON字符串，可用replacer参数筛选属性
函数、undefined、Symbol在转换时会被忽略或转为null
localStorage只能存储字符串，存储对象前必须用JSON.stringify()转换
从localStorage读取数据后必须用JSON.parse()解析才能使用
JSON不支持注释、尾随逗号、函数等特性
跨语言特性让JSON成为Web API事实上的数据格式标准

为什么选择JSON而不是他格式？

之前有同学问，为什么不用XML？我在工作中对比过：同样数据量，JSON比XML省一半以上的字符，解析速度也更快。而且JSON直接映射为JavaScript对象，省去了XML的DOM解析步骤。虽然YAML可读性更好，但在Web传输效率上JSON依然占优。

掌握了JSON，你就掌握了前端和后端沟通的通用语言。无论是在Node.js的配置文件package.json，还是在浏览器和服务器之间的API交互，JSON无处不在。希望这篇文章能帮你真正理解JSON，避免我当年踩过的坑。

本文标签：

JavaScript JSON