js中怎么用json数据类型

JavaScript 中玩转 JSON：从基础到实践的全面指南**

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于 JavaScript 的一个子集，易于人阅读和编写，同时也易于机器解析和生成，在 JavaScript 中，JSON 数据类型扮演着至关重要的角色，尤其是在前后端数据交互、配置文件存储等方面，本文将详细介绍在 JavaScript 中如何使用 JSON 数据类型，包括其语法、与 JavaScript 对象的区别、以及常用的序列化和反序列化方法。

什么是 JSON？它与 JavaScript 对象有何不同？

我们需要明确 JSON 不仅仅是一种数据类型，更是一种数据格式，它独立于编程语言，但与 JavaScript 对象字面量非常相似。

JSON 的语法规则：

数据结构：JSON 可以表示两种结构：
- 对象（Object）：无序的键值对集合，以包裹，键必须是字符串（双引号括起来），值可以是字符串、数字、布尔值、null、数组，甚至是另一个 JSON 对象,键值对之间用逗号分隔。
- 数组（Array）：有序的值列表，以 [] 包裹，值可以是任何有效的 JSON 数据类型,元素之间用逗号分隔。
键名：必须使用双引号 括起来,单引号是不允许的。
值类型：可以是：
- 字符串（双引号括起来）
- 数字（整数或浮点数）
- 布尔值（true 或 false）
- null
- 数组
- 对象
严格性：JSON 中不能有注释，末尾不能有逗号（最后一个键值对或数组元素后面不能有逗号）。

与 JavaScript 对象（Object）的区别：

特性	JSON	JavaScript 对象 (Object Literal)
键名引号	必须使用双引号	可双可单，或不用引号（标识符符合规则时）
值类型	不能包含函数、`undefined`、`Date` 对象等	可以包含任何 JavaScript 值，包括函数、`undefined` 等
注释	不允许	允许
末尾逗号	不允许	允许（在 ES5 及之后的一些环境中）
方法	纯数据	可以包含方法和属性

示例：

有效的 JSON：

{
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "courses": ["数学", "英语"],
  "address": {
    "city": "北京",
    "street": "长安街"
  },
  "spouse": null
}

无效的 JSON（但可能是有效的 JavaScript 对象）：

{
  name: '李四', // 键名未加引号
  age: 25,
  sayHello: function() { console.log("Hello"); }, // 包含函数
  "hobbies": ["reading", "music"],
  "extra": , // 末尾有逗号
  "friend": undefined // 包含 undefined
}

在 JavaScript 中使用 JSON 的核心方法

JavaScript 提供了两个内置的 JSON 对象方法，用于在 JavaScript 值和 JSON 字符串之间进行转换。

JSON.stringify() —— 将 JavaScript 值转换为 JSON 字符串（序列化）

当你需要将 JavaScript 对象或数组发送到服务器，或者存储在文本文件中时，你需要将其转换为 JSON 格式的字符串。

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

value: 要转换的 JavaScript 值（通常是对象或数组）。
replacer (可选): 可以是一个函数或数组，用于控制哪些属性被序列化,以及如何序列化它们。
space (可选): 用于美化输出的缩进字符串或数字，使 JSON 字符串更易读。

示例：

const user = {
  name: "王五",
  age: 28,
  isAdmin: true,
  courses: ["前端开发", "Node.js"],
  address: null,
  sayHi: function() { console.log("Hi"); } // 这个会被忽略
};
// 1. 基本序列化
const jsonString1 = JSON.stringify(user);
console.log(jsonString1);
// 输出: {"name":"王五","age":28,"isAdmin":true,"courses":["前端开发","Node.js"],"address":null}
// 2. 使用 space 美化输出
const jsonString2 = JSON.stringify(user, null, 2); // 缩进2个空格
console.log(jsonString2);
/*
输出:
{
  "name": "王五",
  "age": 28,
  "isAdmin": true,
  "courses": [
    "前端开发",
    "Node.js"
  ],
  "address": null
}
*/
// 3. 使用 replacer 过滤属性
const replacer = (key, value) => {
  if (key === "age") { // 过滤掉 age 属性
    return undefined;
  }
  if (typeof value === "string") { // 将字符串值转为大写
    return value.toUpperCase();
  }
  return value;
};
const jsonString3 = JSON.stringify(user, replacer, 2);
console.log(jsonString3);
/*
输出:
{
  "name": "王五",
  "age": 28, // 注意：这里 age 仍然存在，因为 replacer 返回 undefined 时会忽略该属性
  "isAdmin": true,
  "courses": [
    "前端开发",
    "NODE.JS"
  ],
  "address": NULL
}
*/
// 修正：如果想要过滤掉 age，应该在 replacer 中返回 undefined
const replacerFilterAge = (key, value) => {
  if (key === "age") {
    return undefined; // 返回 undefined 表示删除该属性
  }
  return value;
};
const jsonString4 = JSON.stringify(user, replacerFilterAge, 2);
console.log(jsonString4);
/*
输出:
{
  "name": "王五",
  "isAdmin": true,
  "courses": [
    "前端开发",
    "Node.js"
  ],
  "address": null
}
*/

JSON.parse() —— 将 JSON 字符串解析为 JavaScript 值（反序列化）

当你从服务器接收到 JSON 格式的数据，或者从文本文件中读取了 JSON 数据时，你需要将其解析为 JavaScript 对象或数组,以便在代码中使用。

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

text: 要解析的 JSON 字符串。
reviver (可选): 一个函数，用于转换解析后的值,在每个键值对上调用。

示例：

const jsonString = '{"name":"赵六","age":32,"isMarried":false,"hobbies":["游泳","旅行"]}';
// 1. 基本解析
const parsedObject = JSON.parse(jsonString);
console.log(parsedObject);
// 输出: { name: '赵六', age: 32, isMarried: false, hobbies: [ '游泳', '旅行' ] }
console.log(parsedObject.name); // 输出: 赵六
console.log(parsedObject.hobbies[0]); // 输出: 游泳
// 2. 使用 reviver 转换值
const reviver = (key, value) => {
  if (key === "age") {
    return value + 1; // 年龄加1
  }
  if (key === "hobbies") {
    return value.map(hobby => hobby + "爱好者"); // 给爱好加上"爱好者"
  }
  return value;
};
const parsedObjectWithReviver = JSON.parse(jsonString, reviver);
console.log(parsedObjectWithReviver);
// 输出: { name: '赵六', age: 33, isMarried: false, hobbies: [ '游泳爱好者', '旅行爱好者' ] }

实际应用场景

前后端数据交互：
- 前端发送数据到后端：使用 JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串，通过 AJAX (如 fetch, XMLHttpRequest) 发送到服务器。
- 后端返回数据到前端：服务器通常返回 JSON 格式的数据，前端使用 JSON.parse() 解析后使用。
```
// 模拟发送数据到服务器
const userData = { username: "john_doe", password: "123456" };
fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content
```