jsjson数据怎么写

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

JSON：数据交互的“通用语言”

在 JavaScript 开发中，JSON（JavaScript Object Notation）几乎无处不在，无论是前后端数据传输、配置文件存储，还是 API 响应，JSON 都以其轻量、易读、易解析的特性成为数据交换的“通用语言”，本文将从 JSON 的基础语法入手，结合 JavaScript 中的实际应用，带你彻底“JS/JSON 数据怎么写”。

JSON 的核心语法规则：5 个关键点

JSON 是一种轻量级的数据交换格式，其语法基于 JavaScript 对象字面量，但又有严格的规范，要正确书写 JSON 数据，需牢记以下 5 个核心规则：

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

JSON 支持的数据类型包括：

简单类型：字符串（必须用双引号）、数字（整数/浮点数，无需引号）、布尔值（true/false）、null（小写，非 NULL 或 Null）。
复合类型：对象（键值对集合）、数组（有序值列表）。

示例：

{
  "name": "张三",      // 字符串必须双引号
  "age": 25,          // 数字无需引号
  "isStudent": true,  // 布尔值小写
  "scores": [90, 85, 88],  // 数组用方括号包裹
  "address": null     // null 小写
}

对象：键值对的“无序集合”

JSON 对象以包裹，内部由多个“键: 值”对组成，键必须是字符串（双引号），值可以是任意 JSON 支持的类型，键值对之间用逗号分隔，最后一个键值对后不能加逗号（否则会报错）。

错误示例（末尾逗号）：

{
  "name": "李四",
  "age": 30,  // 最后一个键值对后不能有逗号
}

正确示例：

{
  "name": "李四",
  "age": 30,
  "hobbies": ["reading", "coding"]
}

数组：有序值的“列表”

JSON 数组以 [] 包裹，元素可以是任意 JSON 支持的类型（包括对象、数组等），元素之间用逗号分隔，最后一个元素后不能加逗号。

示例（嵌套对象和数组）：

[
  {"id": 1, "title": "JavaScript 入门"},
  {"id": 2, "title": "JSON 高级教程"},
  [1, 2, 3]  // 数组元素可以是数组
]

字符串：严格双引号，支持转义

JSON 字符串必须用双引号包裹（单引号会导致解析错误），支持转义字符，如 \n（换行）、\t（制表符）、\"（双引号）、\\（反斜杠）等。

错误示例（单引号）：

{"name": '王五'}  // 错误：字符串必须用双引号

正确示例（转义字符）：

{"message": "他说：\"Hello, JSON!\"", "path": "C:\\Users\\test"}

格式要求：无注释，无尾随逗号

JSON 格式简洁，不支持注释（或会导致解析失败），且对象/数组的最后一个元素后不能有尾随逗号（trailing comma）。

错误示例（注释和尾随逗号）：

{
  // 这是注释，JSON 不支持
  "name": "赵六",
  "hobbies": ["sports", "music"],  // 最后一个元素后不能有逗号
}

JavaScript 中如何操作 JSON 数据？

了 JSON 语法后，还需要了解 JavaScript 中如何“写”JSON 数据（生成 JSON 字符串）和“读”JSON 数据（解析 JSON 字符串）。

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

当需要将 JS 对象发送给后端或存储到本地时，需用 JSON.stringify() 将其转换为 JSON 字符串。

语法：

JSON.stringify(value, replacer, space)

value：要转换的 JS 对象/数组。
replacer（可选）：过滤或转换函数，用于控制哪些属性被包含。
space（可选）：格式化输出的缩进（数字或字符串，如 2 或）。

示例：

const user = {
  name: "张三",
  age: 25,
  hobbies: ["reading", "coding"],
  address: null
};
// 基本转换（输出压缩后的 JSON 字符串）
const jsonStr1 = JSON.stringify(user);
console.log(jsonStr1); 
// 输出: {"name":"张三","age":25,"hobbies":["reading","coding"],"address":null}
// 格式化输出（缩进 2 个空格）
const jsonStr2 = JSON.stringify(user, null, 2);
console.log(jsonStr2);
/* 输出:
{
  "name": "张三",
  "age": 25,
  "hobbies": [
    "reading",
    "coding"
  ],
  "address": null
}
*/
// 使用 replacer 过滤属性（只保留 name 和 age）
const jsonStr3 = JSON.stringify(user, ["name", "age"]);
console.log(jsonStr3); 
// 输出: {"name":"张三","age":25}

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

当从后端接收到 JSON 数据或从本地存储读取 JSON 字符串时，需用 JSON.parse() 将其转换为 JS 对象/数组。

语法：

JSON.parse(text, reviver)

text：要解析的 JSON 字符串。
reviver（可选）：转换函数，用于对解析后的值进行预处理（如日期字符串转换为 Date 对象）。

示例：

const jsonStr = '{"name":"李四","age":30,"isStudent":false}';
// 基本解析（转换为 JS 对象）
const user = JSON.parse(jsonStr);
console.log(user.name); // 输出: 李四
console.log(user.isStudent); // 输出: false
// 解析嵌套 JSON 字符串
const nestedJsonStr = '{"data":[{"id":1,"title":"JS教程"}]}';
const parsedData = JSON.parse(nestedJsonStr);
console.log(parsedData.data[0].title); // 输出: JS教程
// 使用 reviver 处理日期字符串（需自定义逻辑）
const dateJsonStr = '{"createdAt":"2023-10-01T12:00:00Z"}';
const parsedDate = JSON.parse(dateJsonStr, (key, value) => {
  if (key === "createdAt") {
    return new Date(value); // 将日期字符串转为 Date 对象
  }
  return value;
});
console.log(parsedDate.createdAt instanceof Date); // 输出: true

常见错误及解决方案

错误 1：JSON 字符串中使用了单引号

const invalidJson = "{'name':'王五'}"; // 错误：单引号
const validJson = '{"name":"王五"}';   // 正确：双引号

错误 2：JSON 字符串末尾有尾随逗号

const invalidJson = '{"name":"王五", "age":30,}'; // 错误：尾随逗号
const validJson = '{"name":"王五", "age":30}';    // 正确

错误 3：`JSON.parse()` 解析非 JSON 字符串

const invalidStr = "name: '王五'"; // 不是 JSON 格式
try {
  JSON.parse(invalidStr); // 抛出 SyntaxError
} catch (error) {
  console.error("解析失败:", error.message); // 输出: 解析失败: Unexpected token n in JSON
}

实际应用场景：从“写”到“用”

前后端数据交互（API 响应）

前端通过 fetch 请求后端 API，后端返回 JSON 数据，前端解析后渲染到页面。

示例：

// 模拟后端返回的 JSON 响

正文

jsjson数据怎么写