jsjson数据怎么写

JS JSON数据怎么写：从基础到实践的全面指南

什么是JSON数据？

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，以易于 humans 阅读和编写的文本形式存储和传输数据，它基于 JavaScript 的一个子集（对象和数组字面量），但已成为独立于语言的标准，广泛用于前后端数据交互（如 API 响应、配置文件等）。

在 JavaScript 中，JSON 数据本质上是 符合特定格式的字符串 或 可直接操作的对象/数组，理解这一点是 JSON 数据写法的前提。

JSON 数据的基本语法规则

JSON 数据的书写必须遵循严格的语法，否则会导致解析错误，核心规则如下：

数据类型：支持 6 种基本类型

JSON 中可以存储以下数据类型：

• 字符串（String）：用双引号 包裹，单引号 不合法。"name"、"北京"。
• 数字（Number）：整数或浮点数，无需引号。25、14、-10。
• 布尔值（Boolean）：true 或 false（全小写，首字母不能大写）。
• null：表示空值，即 null（全小写，不能是 NULL 或 Null）。
• 数组（Array）：有序值的集合，用方括号 [] 包裹，元素间用逗号 分隔。["苹果", "香蕉", "橙子"]。
• 对象（Object）：无键值对的集合，用花括号 包裹，键值对用冒号 分隔，多个键值对用逗号 分隔，键必须是字符串（双引号包裹），值可以是任意 JSON 数据类型。{"name": "张三", "age": 30}。

语法细节：这些“坑”要避开

• 键必须加双引号：对象的键必须是字符串且用双引号包裹，单引号或无引号都会报错。{"name": "李四"} 正确，{name: "李四"} 或 {'name': "李四"} 错误。
• 值必须符合类型规则：字符串值必须用双引号，数字不能加引号（否则会被当作字符串）。{"age": "25"}（字符串）和 {"age": 25}（数字）是不同的数据。
• 结尾不能有逗号：数组或对象的最后一个元素后不能加逗号，否则 JSON 解析会失败。["a", "b",] 错误，["a", "b"] 正确。
• 支持嵌套结构：数组和对象可以任意嵌套，{"users": [{"name": "王五", "hobbies": ["读书", "游泳"]}]}。

JavaScript 中如何操作 JSON 数据？

在 JavaScript 中，JSON 数据常以字符串形式传输（如 HTTP 响应），因此需要 字符串与对象/数组之间的转换，核心方法是 JSON.stringify() 和 JSON.parse()。

将 JavaScript 对象/数组转换为 JSON 字符串：JSON.stringify()

场景：当前端需要将数据发送给后端时，需将 JS 对象/数组转换为 JSON 字符串。

语法：JSON.stringify(value[, replacer[, space]])

• value：要转换的 JS 对象/数组。
• replacer（可选）：函数或数组，用于控制哪些属性被转换（一般不用）。
• space（可选）：格式化输出的缩进（使 JSON 字符串更易读，开发调试时常用）。

示例：

const user = {
  name: "赵六",
  age: 28,
  hobbies: ["爬山", "摄影"],
  address: {
    city: "上海",
    district: "浦东新区"
  }
};
// 转换为 JSON 字符串（不格式化）
const jsonString1 = JSON.stringify(user);
console.log(jsonString1); 
// 输出：{"name":"赵六","age":28,"hobbies":["爬山","摄影"],"address":{"city":"上海","district":"浦东新区"}}
// 转换为 JSON 字符串（格式化，缩进 2 个空格）
const jsonString2 = JSON.stringify(user, null, 2);
console.log(jsonString2);
/* 输出：
{
  "name": "赵六",
  "age": 28,
  "hobbies": [
    "爬山",
    "摄影"
  ],
  "address": {
    "city": "上海",
    "district": "浦东新区"
  }
}
*/

将 JSON 字符串解析为 JavaScript 对象/数组：JSON.parse()

场景：后端返回 JSON 格式的数据（如 {"code": 200, "data": [...]}），前端需要将其解析为 JS 对象/数组才能操作。

语法：JSON.parse(text[, reviver])

• text：要解析的 JSON 字符串（必须符合 JSON 语法，否则抛出 SyntaxError）。
• reviver（可选）：函数，用于转换解析后的值（如将日期字符串转换为 Date 对象，一般不用）。

示例：

const jsonString = '{"name": "钱七", "age": 35, "isStudent": false, "courses": ["数学", "英语"]}';
// 解析为 JS 对象
const obj = JSON.parse(jsonString);
console.log(obj.name); // 输出：钱七
console.log(obj.isStudent); // 输出：false
console.log(obj.courses[0]); // 输出：数学
// 解析嵌套 JSON 字符串
const nestedJsonString = '{"school": "XX大学", "info": {"founded": 1900, "departments": ["计算机", "物理"]}}';
const nestedObj = JSON.parse(nestedJsonString);
console.log(nestedObj.info.departments[1]); // 输出：物理

常见 JSON 数据写法示例

通过实际场景 JSON 的书写方法：

简单的用户信息对象

{
  "userId": 1001,
  "username": "前端小王",
  "email": "xiaowang@example.com",
  "isActive": true,
  "lastLoginTime": null
}

商品列表数组

[
  {
    "id": "p001",
    "name": "无线蓝牙耳机",
    "price": 299.99,
    "stock": 100,
    "tags": ["电子产品", "音频", "便携"]
  },
  {
    "id": "p002",
    "name": "机械键盘",
    "price": 599.00,
    "stock": 50,
    "tags": ["电子产品", "电脑外设", "游戏"]
  }
]

复杂的嵌套结构（博客文章详情）

{
  "articleId": 20231015001,: "JavaScript JSON 数据详解",
  "author": {
    "name": "技术博主",
    "avatar": "https://example.com/avatar.jpg",
    "bio": "专注于前端技术分享"
  },
  "content": "本文介绍 JSON 数据的基本写法...",
  "publishTime": "2023-10-15T08:00:00Z",
  "categories": ["前端", "JavaScript"],
  "comments": [
    {
      "commentId": "c001",
      "user": "读者A",
      "content": "写得很详细，感谢分享！",
      "likes": 10,
      "replyTo": null
    },
    {
      "commentId": "c002",
      "user": "读者B",
      "content": "能否补充下 JSON Schema 的内容？",
      "likes": 5,
      "replyTo": "c001"
    }
  ],
  "isPublished": true
}

常见错误与注意事项

错误示例及原因