你有没有遇到过这种情况:用手机App查天气,打开瞬间就看到城市、温度、空气质量,这些信息是怎么从服务器传到你手机上的?背后很可能就是JSON在干活。简单说,JSON数据是一种轻量级的数据交换格式,用来在不同系统之间传递信息。
JSON长什么样
先看个例子,这是描述一个人的基本信息:
{
"name": "张三",
"age": 28,
"city": "北京",
"hobbies": ["跑步", "读书", "摄影"]
}
这就是一段标准的JSON数据。它用花括号包裹对象,里面是“键:值”对,键必须用双引号包围,值可以是字符串、数字、布尔值、数组,甚至嵌套另一个对象。结构清晰,人能看懂,机器也能快速解析。
为什么开发者都喜欢用JSON
以前系统之间传数据常用XML,长得像这样:
<person>
<name>张三</name>
<age>28</age>
<city>北京</city>
</person>
对比一下就能看出,JSON更简洁,少了那些重复的标签,体积小,传输快。而且JavaScript原生支持解析JSON,前端调接口拿到数据后几乎不用处理就能直接用,省事。
实际开发中的常见场景
你在网页上登录,输入账号密码点确定,浏览器会把信息打包成JSON发给服务器:
{
"username": "user123",
"password": "abc123"
}
服务器验证通过后,也会返回一段JSON告诉你登录成功,可能还带用户头像、昵称等信息:
{
"status": "success",
"data": {
"userId": 1001,
"nickname": "小明",
"avatar": "https://example.com/avatar.jpg"
}
}
前端收到后,页面立刻就能把昵称和头像展示出来,整个过程流畅自然。
几个容易踩的坑
写JSON时要注意语法细节。比如字符串的引号必须是双引号,单引号不行;最后一个属性后面不能加逗号;key不能不加引号。下面这几种写法都是错的:
{ name: '张三' } // 错:key没双引号,值用了单引号
{ "age": 28, } // 错:末尾多了一个逗号
{ "list": [1, 2, 3,] } // 同样,数组末尾也不能有逗号
现在大多数编辑器都支持JSON高亮和校验,写完粘进去一看颜色不对就知道哪里出问题了。
怎么在代码里处理JSON
JavaScript里有两个常用方法:JSON.stringify() 把对象转成JSON字符串,JSON.parse() 把JSON字符串还原成对象。
const obj = { name: "李四", age: 25 };
const jsonStr = JSON.stringify(obj);
// 结果:'{"name":"李四","age":25}'
const parsed = JSON.parse(jsonStr);
// 又变回对象 { name: '李四', age: 25 }
前后端分离的项目里,这种转换每天都要做无数次。只要格式正确,数据就能安全流转。