js如何编写json

JavaScript 编写 JSON 完全指南：从基础到实践**

JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易于人阅读和编写，也易于机器解析和生成，在 Web 开发中得到了广泛应用，JavaScript 作为 Web 开发的核心语言，与 JSON 有着天然的紧密联系，本文将详细介绍如何在 JavaScript 中编写 JSON，包括基本语法、常用方法以及最佳实践。

JSON 与 JavaScript 对象的关系

我们需要明确 JSON 和 JavaScript 对象（Object）的区别与联系：

JavaScript 对象：是 JavaScript 语言的一种数据类型，使用花括号包裹，属性名可以使用引号（单引号或双引号）或不使用引号（如果符合标识符命名规则），值可以是任意有效的 JavaScript 类型（包括函数、undefined、Symbol 等）。
```
const jsObject = {
  name: "张三",
  age: 30,
  sayHello: function() { console.log("Hello!"); },
  city: undefined
};
```
JSON：是一种独立于语言的 data format，它的语法是 JavaScript 对象语法的子集。
- 属性名必须使用双引号包裹。
- 值只能是以下几种类型：字符串（双引号）、数字、布尔值、null、数组、对象（JSON 格式）。
- 不能包含函数、undefined、Symbol 等类型。
- 末尾不能有逗号。
```
{
  "name": "李四",
  "age": 25,
  "isStudent": false,
  "courses": ["math", "english"],
  "address": {
    "street": "123 Main St",
    "city": "Beijing"
  }
}
```

核心联系：JSON 的设计初衷就是为了方便地表示 JavaScript 对象，几乎所有现代编程语言都提供了将 JSON 字符串解析为语言原生对象（在 JS 中就是 Object），以及将语言原生对象序列化为 JSON 字符串的方法。

在 JavaScript 中编写 JSON 的主要方式

在 JavaScript 中，我们通常不会直接“手写”一个 JSON 对象字面量然后称之为 JSON（因为那是 JS 对象），而是通过以下两种主要方式来“编写”或“生成” JSON：

创建 JavaScript 对象，然后序列化为 JSON 字符串（最常用）。
直接编写符合 JSON 格式的字符串，然后解析为 JavaScript 对象。

通过 JavaScript 对象序列化为 JSON 字符串

这是最常见的方式，尤其是在需要将数据发送到服务器或存储到本地时，我们使用 JSON.stringify() 方法。

步骤：

创建一个 JavaScript 对象：这个对象的属性和值应符合 JSON 的数据类型要求（避免函数、undefined 等）。
使用 JSON.stringify() 将 JS 对象转换为 JSON 字符串。

示例：

// 1. 创建一个符合 JSON 数据要求的 JavaScript 对象
const user = {
  id: 1,
  username: "john_doe",
  email: "john@example.com",
  isActive: true,
  roles: ["user", "editor"],
  createdAt: new Date().toISOString() // 日期通常转换为 ISO 字符串
};
// 2. 使用 JSON.stringify() 将 JS 对象转换为 JSON 字符串
const jsonString = JSON.stringify(user);
console.log(jsonString);
// 输出 (格式可能略有不同，但内容一致):
// {"id":1,"username":"john_doe","email":"john@example.com","isActive":true,"roles":["user","editor"],"createdAt":"2023-10-27T10:30:00.123Z"}
// 3. 可选：第二个参数是 replacer，可以是函数或数组，用于过滤或转换值
// 只转换 username 和 email
const filteredJsonString = JSON.stringify(user, ["username", "email"]);
console.log(filteredJsonString);
// 输出: {"username":"john_doe","email":"john@example.com"}
// 使用函数转换值
const transformedJsonString = JSON.stringify(user, (key, value) => {
  if (key === "isActive") {
    return value ? "激活" : "未激活";
  }
  return value;
});
console.log(transformedJsonString);
// 输出: {"id":1,"username":"john_doe","email":"john@example.com","isActive":"激活","roles":["user","editor"],"createdAt":"2023-10-27T10:30:00.123Z"}
// 4. 可选：第三个参数是 space，用于格式化输出，使 JSON 字符串更易读
const prettyJsonString = JSON.stringify(user, null, 2); // 2 表示缩进2个空格
console.log(prettyJsonString);
// 输出:
// {
//   "id": 1,
//   "username": "john_doe",
//   "email": "john@example.com",
//   "isActive": true,
//   "roles": [
//     "user",
//     "editor"
//   ],
//   "createdAt": "2023-10-27T10:30:00.123Z"
// }

直接编写 JSON 格式的字符串并解析为 JavaScript 对象

当我们从 API 接收到数据或从文件中读取数据时，数据通常是 JSON 格式的字符串，我们需要将其解析为 JavaScript 对象才能在代码中使用，这使用 JSON.parse() 方法。

示例：

// 1. 直接编写一个符合 JSON 格式的字符串
const jsonStringData = '{"productId": 101, "productName": "无线鼠标", "price": 299, "inStock": true}';
// 2. 使用 JSON.parse() 将 JSON 字符串解析为 JavaScript 对象
const productObject = JSON.parse(jsonStringData);
console.log(productObject);
// 输出: {productId: 101, productName: "无线鼠标", price: 299, inStock: true}
console.log(productObject.productName); // 输出: 无线鼠标
console.log(typeof productObject);      // 输出: object
// 3. 处理可能的解析错误
const invalidJsonString = '{"name": "Tom", "age": 30,}'; // 注意末尾的逗号，不符合 JSON 格式
try {
  const invalidObject = JSON.parse(invalidJsonString);
  console.log(invalidObject);
} catch (error) {
  console.error("JSON 解析错误:", error.message);
  // 输出: JSON 解析错误: Unexpected token } in JSON at position ... (具体位置可能不同)
}

最佳实践与注意事项

数据类型一致性：确保要序列化为 JSON 的 JavaScript 对象中不包含 JSON 不支持的数据类型（如 function、Symbol、undefined）。JSON.stringify() 会自动忽略这些值（函数）或将其转换为 null（undefined）。
```
const objWithInvalidTypes = {
  name: "Test",
  data: undefined,
  method: function() { return "hello"; }
};
console.log(JSON.stringify(objWithInvalidTypes)); // 输出: {"name":"Test"}
```
日期处理：JavaScript 的 Date 对象不是 JSON 的原生类型。JSON.stringify() 会自动将其转换为 ISO 格式的字符串，如果需要特定格式的日期，最好在序列化前手动转换为字符串，或者在 replacer 函数中进行处理。
```
const dataWithDate = { event: "会议", time: new Date() };
console.log(JSON.stringify(dataWithDate));
// 输出类似: {"event":"会议","time":"2023-10-27T10:30:00.123Z"}
```

循环引用：JavaScript 对象存在循环引用（对象的一个属性指向对象本身），JSON.stringify() 会抛出错误。

const objWithCircularRef = {};
objWithCircularRef.self = objWithCircularRef;
// console.log(JSON.stringify(objWithCircularRef)); // 抛出错误: "TypeError: Converting circular structure to JSON"

使用 replacer 和 space 优化输出：
- replacer 数组：用于指定需要序列化的属性,减少数据传输量。
- replacer 函数：用于自定义序列化过程,例如对敏感信息脱敏或特殊格式化。
- space 参数：在调试或需要人类阅读时，使用适当的缩进（如 2 或 '\t'）使 JSON 字符串更易读。
错误处理：在解析来自不可信源的 JSON 字符串时（如用户输入、API 响应），务必使用 try...catch 包裹 JSON.parse(),以防止因格式错误导致程序中断。