JavaScript Object Notation (JSON)

JSON 基本概念

JSON 是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。它基于 JavaScript 的对象字面量语法，但已经成为一种通用的数据格式，被几乎所有编程语言支持。

JSON 的基本数据类型

• 字符串：必须使用 双引号 包围。

• 数字：整数或浮点数。

• 布尔值：true 或 false。

• 数组：有序的值列表，使用方括号 [] 。

• 对象：键值对集合，使用花括号 {} 。

• null：表示空值。

Json示例

JSON常用于前后端数据传输和配置文件。以下是各种JSON示例及其在JavaScript中的使用方法：

1. 基本JSON数据类型示例

// JSON字符串
"Hello, World!"

// JSON数字
42

// JSON布尔值
true
false

// JSON空值
null

2. JSON对象示例

{
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "email": "zhangsan@example.com"
}

3. 嵌套JSON对象示例

{
  "person": {
    "name": "李四",
    "contact": {
      "email": "lisi@example.com",
      "phone": "13800138000"
    },
    "address": {
      "country": "中国",
      "city": "上海",
      "street": "南京东路123号"
    }
  }
}

4. JSON数组示例

[
  "苹果",
  "香蕉",
  "橙子",
  "葡萄"
]

5. 包含对象的JSON数组示例

[
  {
    "id": 1,
    "name": "产品A",
    "price": 99.99
  },
  {
    "id": 2,
    "name": "产品B",
    "price": 199.99
  },
  {
    "id": 3,
    "name": "产品C",
    "price": 299.99
  }
]

6. 复杂混合结构的JSON示例

{
  "company": "科技有限公司",
  "founded": 2010,
  "active": true,
  "employees": [
    {
      "id": "E001",
      "name": "王五",
      "position": "经理",
      "skills": ["管理", "沟通", "领导力"]
    },
    {
      "id": "E002",
      "name": "赵六",
      "position": "开发工程师",
      "skills": ["JavaScript", "React", "Node.js"]
    }
  ],
  "departments": ["研发", "市场", "行政"],
  "location": {
    "country": "中国",
    "city": "北京",
    "coordinates": {
      "lat": 39.9042,
      "lng": 116.4074
    }
  },
  "contact": null
}

7. 在JavaScript中使用JSON

// 将JSON字符串解析为JavaScript对象
const jsonString = '{"name":"张三","age":30,"isStudent":false}';
const userObject = JSON.parse(jsonString);
console.log("解析后的对象:", userObject);
console.log("用户名:", userObject.name);

// 将JavaScript对象转换为JSON字符串
const product = {
  id: 1,
  name: "笔记本电脑",
  price: 5999,
  inStock: true,
  tags: ["电子产品", "计算机"]
};
const productJSON = JSON.stringify(product);
console.log("转换后的JSON字符串:", productJSON);

// 使用JSON.stringify的第二个参数进行格式化
const formattedJSON = JSON.stringify(product, null, 2); // 第三个参数指定缩进空格数
console.log("格式化的JSON:", formattedJSON);

// 使用JSON.stringify的第二个参数过滤属性
const filteredJSON = JSON.stringify(product, ['name', 'price']);
console.log("过滤后的JSON:", filteredJSON);

8. JSON的实际应用示例 - API响应模拟

// 模拟API返回的JSON数据
const apiResponse = {
  "status": "success",
  "code": 200,
  "message": "数据获取成功",
  "data": {
    "total": 100,
    "page": 1,
    "pageSize": 10,
    "items": [
      // 这里是数据项...
    ]
  },
  "timestamp": "2023-05-15T10:30:00Z"
};

// 处理API响应
function handleApiResponse(response) {
  if (response.status === 'success' && response.code === 200) {
    console.log(`共${response.data.total}条数据，当前第${response.data.page}页`);
    // 处理数据项...
  } else {
    console.error(`请求失败: ${response.message || '未知错误'}`);
  }
}

handleApiResponse(apiResponse);

JSON与JavaScript对象的区别

相同点

• 语法相似，都使用键值对表示对象。

• 都支持数组、字符串、数字、布尔值等基本数据类型。

不同点

示例对比

Json

{
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "hobbies": ["阅读", "游泳"],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  },
  "birthday": "1999-01-01",
  "metadata": null
}

JavaScript Object

{
  name: "张三",         // 键名不需要引号
  age: 25,
  isStudent: false,
  hobbies: ["阅读", "游泳"],
  address: {
    city: "北京",
    district: "朝阳区"
  },
  birthday: new Date("1999-01-01"),  // Date 对象
  metadata: undefined,               // undefined 值
  greet() {                          // 方法
    return `你好，我是${this.name}`;
  }
  // 尾随逗号允许

详细说明：

1. 键名/属性名差异

JSON要求所有属性名必须用双引号包围，这是语法强制要求。而JavaScript对象的属性名更加灵活：

• 可以是标识符（无需引号）。

• 可以是带双引号的字符串。

• 可以是带单引号的字符串。

• 可以是数字（会自动转换为字符串）。

• ES6+ 支持Symbol作为属性键。

2. 字符串表示差异

JSON中所有字符串都必须用双引号包围，而JavaScript支持三种字符串表示方式：

• 双引号："hello"

• 单引号：'hello'

• 反引号（模板字符串）：` hello ${name} `

3. 数字格式差异

JSON中数字不能有前导零（除了0本身），例：0123 0123 是无效的JSON。而JavaScript支持多种数字表示法：

• 十进制：123。

• 八进制（ES5中以0开头，ES6+中以0o开头）0o173。

• 十六进制（以0x开头）0x7B。

• 科学计数法 1.23e2。

4. 本质差异

这是最根本的区别：JSON是一种 数据格式，主要用于数据交换；而JavaScript对象是 编程语言中的数据结构，用于程序执行过程中的数据操作。

5. 转换关系

JSON和JavaScript对象可以通过内置方法进行相互转换：

示例：

// JavaScript对象转JSON字符串
const obj = { name: "小罗", age: 25 };
const jsonStr = JSON.stringify(obj);  // {"name":"小罗","age":25}

// JSON字符串转JavaScript对象
const jsonStr = '{"name":"小罗","age":25}';
const obj = JSON.parse(jsonStr);      // {name: "小罗", age: 25}

6. 关键区别：JSON格式 VS JavaScript字符串字面量

1. JSON格式内部的字符串

• JSON规范要求：JSON数据中的所有字符串（包括属性名和属性值）必须 使用双引号包围。

• 例如 {"name":"张三"} 是有效的JSON。

• 而 {'name':'张三'} 不是有效的JSON。

2. 在JavaScript代码中表示JSON字符串

• 当我们在JavaScript代码中需要表示一个JSON字符串时，可以使用JavaScript的字符串字面量语法。

• JavaScript允许字符串字面量使用单引号、双引号或反引号。

• 所以在代码中，我们可以这样写const jsonStr = '{"name":"张三"}';

示例解释：

上例代码示例： const jsonStr = '{"name":"张三","age":25}'; 中：

• 外层的单引号 ' 是JavaScript的字符串字面量分隔符。

• 内层的双引号 " 是JSON格式要求的字符串分隔符。

• 双引号前的反斜杠 \ 是JavaScript的转义字符，表示后面的双引号是字符串内容的一部分，而不是字符串的结束。

等效写法：

// 使用单引号作为JavaScript字符串分隔符（推荐，避免转义）
const jsonStr1 = '{"name":"张三","age":25}';

// 使用双引号作为JavaScript字符串分隔符（需要转义内部的双引号）
const jsonStr2 = "{\"name\":\"张三\",\"age\":25}";

// 使用反引号作为JavaScript字符串分隔符（需要转义内部的双引号）
const jsonStr3 = `{\"name\":\"张三\",\"age\":25}`;

总结

JSON作为一种轻量级数据交换格式，其语法规则比JavaScript对象更为严格和规范，这保证了跨平台、跨语言数据交换的可靠性。而JavaScript对象作为编程语言的数据结构，提供了更丰富的功能和灵活性，以满足程序执行过程中的各种需求。

理解这些差异对于正确处理数据交换、避免解析错误以及高效使用JavaScript编程都至关重要。