零基础学 JSON：原理、语法与应用全解析

JSON百科全书：学习JSON看这一篇就够了

1. 什么是JSON？

JSON 是 J avaS cript O bject N otation 的缩写，中文意思是"JavaScript 对象表示法"。它是一种数据交换的文本格式，而不是一种编程语言。

简单理解

想象一下，你有一本记录朋友信息的笔记本：

复制代码

张三：年龄30岁，北京人，喜欢读书
李四：年龄25岁，上海人，喜欢运动

JSON就是把这种记录方式标准化，变成电脑能理解的格式：

json 复制代码

{
  "name": "张三",
  "age": 30,
  "city": "北京",
  "hobby": "读书"
}

JSON和JavaScript的关系

JSON：是一种数据格式，就像你写日记的格式
JavaScript：是一种编程语言，就像你写日记的笔

它们很像，但不完全一样。JSON使用JavaScript的语法来描述数据，但JSON本身不是JavaScript。

2. 为什么需要JSON？

举个生活中的例子

假设你要给朋友发一个地址：

复制代码

"我住在北京市海淀区中关村大街1号，邮编100080"

这个地址是人能看懂的，但电脑不能直接理解。JSON就是把地址变成电脑能理解的格式：

json 复制代码

{
  "address": "北京市海淀区中关村大街1号",
  "postcode": "100080"
}

这样，电脑就能准确地知道"北京市海淀区中关村大街1号"是地址，"100080"是邮编。

3. JSON的基本特点

3.1 轻量级

JSON文件通常比XML等其他数据格式更小
传输更快，就像发短信比发长邮件更快

3.2 自我描述性

JSON数据自己就能说明它的含义
例如："name": "张三"，一看就知道是姓名

3.3 独立于语言

JSON可以被任何编程语言使用（JavaScript、Python、Java等）
就像你用英语写信，不管对方是中国人还是美国人，都能看懂

3.4 易于阅读和编写

格式清晰，就像写日记一样简单
没有复杂的标签，只有键和值

4. JSON语法详解（小白也能看懂）

4.1 基本结构

JSON由键/值对组成，就像字典一样：

复制代码

"键": 值

键：必须用双引号括起来
值：可以是字符串、数字、对象、数组、true、false或null

4.2 5种基本数据类型

4.2.1 字符串（String）

必须用双引号括起来
不能用单引号

正确：

json 复制代码

"name": "张三"
"city": "北京市"

错误：

json 复制代码

'name': '张三'  // 这不是JSON，这是JavaScript

4.2.2 数值（Number）

可以是整数或浮点数
不能有前导零（如030）
不能是NaN或Infinity

正确：

json 复制代码

"age": 30
"height": 1.75

错误：

json 复制代码

"age": 030  // 前导零
"height": NaN  // NaN

4.2.3 布尔值（Boolean）

只能是true或false

正确：

json 复制代码

"isMarried": true
"hasCar": false

4.2.4 null

表示空值

正确：

json 复制代码

"middleName": null

4.2.5 对象（Object）

用花括号{}表示
一组键/值对的集合

正确：

json 复制代码

{
  "name": "张三",
  "age": 30,
  "city": "北京市"
}

4.2.6 数组（Array）

用方括号[]表示
有序的值集合

正确：

json 复制代码

"hobbies": ["读书", "跑步", "游泳"]

4.3 一个完整的JSON例子

json 复制代码

{
  "name": "张三",
  "age": 30,
  "isMarried": false,
  "city": "北京市",
  "hobbies": ["读书", "跑步", "游泳"],
  "address": {
    "street": "中关村大街1号",
    "postcode": "100080"
  }
}

这个JSON描述了一个人的信息：

姓名：张三
年龄：30
是否结婚：否
城市：北京市
爱好：读书、跑步、游泳
地址：中关村大街1号，邮编100080

5. JSON对象和数组操作

5.1 访问对象的值（如何找到数据）

用点号（.）访问

javascript 复制代码

var person = {
  "name": "张三",
  "age": 30,
  "city": "北京市"
};

console.log(person.name); // 输出: 张三
console.log(person.city); // 输出: 北京市

用中括号（[]）访问

javascript 复制代码

console.log(person["age"]); // 输出: 30
console.log(person["city"]); // 输出: 北京市

访问嵌套对象

json 复制代码

{
  "name": "张三",
  "address": {
    "street": "中关村大街1号",
    "postcode": "100080"
  }
}

javascript 复制代码

var person = {
  "name": "张三",
  "address": {
    "street": "中关村大街1号",
    "postcode": "100080"
  }
};

console.log(person.address.street); // 输出: 中关村大街1号
console.log(person["address"]["postcode"]); // 输出: 100080

5.2 修改对象的值

javascript 复制代码

var person = {
  "name": "张三",
  "age": 30,
  "city": "北京市"
};

// 修改姓名
person.name = "李四";

// 修改年龄
person["age"] = 31;

console.log(person); 
// 输出: {"name": "李四", "age": 31, "city": "北京市"}

5.3 删除对象属性

javascript 复制代码

var person = {
  "name": "张三",
  "age": 30,
  "city": "北京市"
};

delete person.city; // 删除城市属性

console.log(person); 
// 输出: {"name": "张三", "age": 30}

5.4 遍历数组

javascript 复制代码

var hobbies = ["读书", "跑步", "游泳"];

// 用for循环遍历
for (var i = 0; i < hobbies.length; i++) {
  console.log(hobbies[i]);
}

// 用for...in循环遍历
for (var key in hobbies) {
  console.log(hobbies[key]);
}

5.5 修改数组的值

javascript 复制代码

var hobbies = ["读书", "跑步", "游泳"];

// 修改第二个爱好
hobbies[1] = "打篮球";

console.log(hobbies); 
// 输出: ["读书", "打篮球", "游泳"]

5.6 删除数组元素

javascript 复制代码

var hobbies = ["读书", "跑步", "游泳"];

delete hobbies[1]; // 删除第二个元素

console.log(hobbies); 
// 输出: ["读书", undefined, "游泳"]

注意：使用delete删除数组元素后，该位置变为undefined，但数组长度不变。如果想真正删除元素，可以使用splice方法。

6. JSON和JavaScript对象互转

6.1 JSON.parse() - 把JSON字符串转为JavaScript对象

javascript 复制代码

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

// 转换为JavaScript对象
var person = JSON.parse(jsonString);

console.log(person.name); // 输出: 张三
console.log(person.age);  // 输出: 30

6.2 JSON.stringify() - 把JavaScript对象转为JSON字符串

javascript 复制代码

// JavaScript对象
var person = {
  "name": "张三",
  "age": 30
};

// 转换为JSON字符串
var jsonString = JSON.stringify(person);

console.log(jsonString); // 输出: {"name": "张三", "age": 30}

6.3 为什么用JSON.parse()而不是eval()？

有些人会想用eval()来转换JSON字符串，但这是不安全的：

javascript 复制代码

// 使用eval()（不安全！）
var jsonString = '{"name": "张三", "age": 30}';
var person = eval('(' + jsonString + ')');

// 使用JSON.parse()（安全！）
var person = JSON.parse(jsonString);

为什么JSON.parse()更安全？

eval()可以执行任意代码，包括恶意代码
JSON.parse()只会解析有效的JSON，不会执行任何代码

就像你收到一封信，eval()会直接打开信并执行里面的指令，而JSON.parse()只会把信的内容读给你看，不会执行任何操作。

7. 实用例子：一个完整的JSON应用

7.1 定义一个JSON对象

javascript 复制代码

var person = {
  "name": "张三",
  "age": 30,
  "isMarried": false,
  "city": "北京市",
  "hobbies": ["读书", "跑步", "游泳"],
  "address": {
    "street": "中关村大街1号",
    "postcode": "100080"
  }
};

7.2 访问数据

javascript 复制代码

console.log("姓名: " + person.name);
console.log("年龄: " + person.age);
console.log("城市: " + person.city);
console.log("爱好: " + person.hobbies.join(", "));
console.log("地址: " + person.address.street + ", " + person.address.postcode);

7.3 修改数据

javascript 复制代码

person.age = 31;
person.isMarried = true;
person.hobbies[1] = "打篮球";

7.4 转换为JSON字符串

javascript 复制代码

var updatedJson = JSON.stringify(person);
console.log(updatedJson);

8. 常见问题解答

8.1 JSON和XML有什么区别？

特点	JSON	XML
格式	键/值对	标签
体积	更小	更大
读写速度	更快	更慢
与JavaScript集成	天然支持	需要解析
是否有注释	不支持	支持

8.2 JSON可以包含函数吗？

不可以。JSON只能包含字符串、数字、对象、数组、布尔值和null，不能包含函数。

8.3 JSON如何表示日期？

JSON不能直接表示日期，需要把日期转换为字符串，然后在使用时再转换回日期。

javascript 复制代码

// 把日期转换为字符串
var date = new Date();
var dateString = date.toISOString();

// 把字符串转换回日期
var date = new Date(dateString);

8.4 JSON中可以使用单引号吗？

不可以。JSON中的字符串必须用双引号，不能用单引号。

8.5 JSON中可以有注释吗？

不可以。JSON不支持注释，如果需要注释，可以在JSON之外添加。

8.6 为什么JSON的键必须用双引号？

因为JSON标准规定，键必须用双引号。这是为了确保解析器能正确识别键。

9. 总结

JSON的5个核心特点

轻量级：文件小，传输快
自我描述性：数据自己说明含义
独立于语言：任何编程语言都能用
易读易写：格式清晰，像写日记一样简单
与JavaScript天然集成：浏览器可以直接解析

JSON的5个基本数据类型

字符串（String）
数值（Number）
布尔值（Boolean）
null
对象（Object）和数组（Array）

2个关键方法

JSON.parse()：把JSON字符串转为JavaScript对象
JSON.stringify()：把JavaScript对象转为JSON字符串

重要提醒

JSON不是JavaScript，但它是基于JavaScript的
JSON的键必须用双引号
JSON不支持函数、注释和单引号

10. 附：JSON vs JavaScript

特点	JSON	JavaScript
用途	数据交换格式	编程语言
键的引号	必须用双引号	可以用单引号或双引号
数值	不能有前导零	可以有前导零
函数	不支持	支持
注释	不支持	支持

11. 学习建议

先理解概念：不要急着写代码，先理解JSON是什么、为什么需要它
多练习：尝试把实际数据用JSON格式表示
从简单开始：先从简单的键/值对开始，再慢慢学习嵌套对象和数组
使用工具：使用在线JSON格式化工具（如JSONLint）检查你的JSON是否正确
实践应用：尝试用JSON存储和传输数据，比如从API获取数据

12. 最后的话

JSON是一种简单但强大的数据格式，它让不同系统之间的数据交换变得非常容易。就像你用中文写信给朋友，JSON就是让电脑之间能互相"写信"的格式。

现在你已经掌握了JSON的基础知识，可以开始在项目中使用它了！记住，多练习是掌握任何技能的关键，所以赶紧试试吧！