如何实现js对象和json数据的互转

JavaScript对象与JSON数据的互转：完整指南

在JavaScript开发中,对象（Object）和JSON（JavaScript Object Notation）是两种最常用的数据结构，对象是JavaScript原生数据类型，用于表示键值对的集合；JSON则是轻量级的数据交换格式，结构类似JavaScript对象，但更严格且独立于语言，在实际开发中，我们经常需要将JavaScript对象转换为JSON字符串（例如数据传输），或将JSON字符串解析为JavaScript对象（例如处理服务器响应），本文将详细介绍这两种互转的实现方法、注意事项及实际应用场景。

JavaScript对象转JSON字符串

将JavaScript对象转换为JSON字符串,主要通过JSON.stringify()方法实现，该方法可以将一个对象或值转换为JSON字符串，并支持格式化输出、过滤属性等高级功能。

基本用法

JSON.stringify()接收一个对象作为参数，返回对应的JSON字符串。

const userObj = {
  name: "张三",
  age: 25,
  hobbies: ["阅读", "编程"],
  isStudent: true
};
const jsonString = JSON.stringify(userObj);
console.log(jsonString); 
// 输出: {"name":"张三","age":25,"hobbies":["阅读","编程"],"isStudent":true}

注意：转换后的JSON字符串中，键名会自动被双引号包裹（JavaScript对象的键名可以是单引号、双引号或无引号，但JSON规范要求键名必须用双引号）。

高级用法：替换函数和格式化

JSON.stringify()还支持第二个和第三个参数：

• 第二个参数（replacer）：可以是函数或数组，用于控制哪些属性需要被包含在结果中。

  • 若为函数,会对每个属性调用，返回值会被序列化（若返回undefined则该属性被排除）；
  • 若为数组,仅包含数组中指定的属性名。

• 第三个参数（space）：用于格式化输出，可以是数字（表示缩空格数，最大10）或字符串（用作缩进字符）。

示例1：使用replacer函数过滤属性

const userObj = {
  name: "张三",
  age: 25,
  password: "123456", // 敏感信息，不希望序列化
  hobbies: ["阅读", "编程"]
};
const filteredJson = JSON.stringify(userObj, (key, value) => {
  if (key === "password") {
    return undefined; // 过滤password属性
  }
  return value;
});
console.log(filteredJson); 
// 输出: {"name":"张三","age":25,"hobbies":["阅读","编程"]}

示例2：使用replacer数组指定属性

const userObj = {
  name: "张三",
  age: 25,
  hobbies: ["阅读", "编程"]
};
const selectedJson = JSON.stringify(userObj, ["name", "hobbies"]);
console.log(selectedJson); 
// 输出: {"name":"张三","hobbies":["阅读","编程"]}

示例3：使用space格式化输出

const userObj = {
  name: "张三",
  age: 25,
  hobbies: ["阅读", "编程"]
};
const formattedJson = JSON.stringify(userObj, null, 2); // 缩进2个空格
console.log(formattedJson);
// 输出:
// {
//   "name": "张三",
//   "age": 25,
//   "hobbies": [
//     "阅读",
//     "编程"
//   ]
// }

注意事项

• 循环引用：若对象存在循环引用（例如obj.a = obj），JSON.stringify()会抛出错误TypeError: Converting circular structure to JSON。
  解决方案：需手动处理循环引用，或使用第三方库（如flatted）。
• 特殊值处理：undefined、function、Symbol类型的值会被忽略（若在数组中，则会被转换为null）；Date对象会被转换为ISO格式的字符串（但JSON.parse()不会自动转回Date对象）。
• 原型链属性：对象的原型链属性不会被序列化。

JSON字符串转JavaScript对象

将JSON字符串解析为JavaScript对象,主要通过JSON.parse()方法实现，该方法可以解析JSON字符串，并构建对应的JavaScript对象或值。

基本用法

JSON.parse()接收一个JSON字符串作为参数，返回对应的JavaScript对象。

const jsonString = '{"name":"张三","age":25,"hobbies":["阅读","编程"],"isStudent":true}';
const userObj = JSON.parse(jsonString);
console.log(userObj); 
// 输出: {name: "张三", age: 25, hobbies: Array(2), isStudent: true}
console.log(userObj.name); // "张三"
console.log(userObj.hobbies[0]); // "阅读"

高级用法：reviver函数

JSON.parse()支持第二个参数reviver，这是一个函数，用于在解析过程中转换值，该函数会递归遍历解析后的每个键值对，并返回处理后的值，常用于将JSON中的日期字符串转换为Date对象。

示例：将日期字符串转换为Date对象

const jsonString = '{"name":"张三","birthday":"1998-05-20"}';
const userObj = JSON.parse(jsonString, (key, value) => {
  if (key === "birthday") {
    return new Date(value); // 将日期字符串转为Date对象
  }
  return value;
});
console.log(userObj.birthday); // 输出: Tue May 20 1998 00:00:00 GMT+0800 (中国标准时间)
console.log(typeof userObj.birthday); // "object"

注意事项

• 语法错误：若JSON字符串格式不正确（例如单引号包裹键名、尾随逗号等），JSON.parse()会抛出SyntaxError。
  JSON.stringify("{'name':'张三}'")会报错，因为JSON规范要求键名必须用双引号。
• 安全性：JSON.parse()可以解析任意有效的JSON字符串，若字符串来自不可信来源（如用户输入），可能存在安全风险（如XSS攻击），建议对输入进行校验，或使用CSP（内容安全策略）限制脚本执行。
• 数据类型一致性：JSON中不支持undefined、function、Symbol，因此解析后不会出现这些类型的值；Date对象会被解析为字符串，需通过reviver手动转换。

实际应用场景

数据存储与传输

• 本地存储：使用localStorage或sessionStorage存储数据时，只能存储字符串类型，需将对象通过JSON.stringify()转换为字符串存储，读取时再用JSON.parse()解析：

  // 存储
  const user = { name: "张三", age: 25 };
  localStorage.setItem("user", JSON.stringify(user));
  // 读取
  const storedUser = JSON.parse(localStorage.getItem("user"));
  console.log(storedUser.name); // "张三"

• API请求/响应：与服务器交互时，通常需要将JavaScript对象转换为JSON字符串（通过JSON.stringify()）作为请求体；服务器返回的JSON响应字符串需通过JSON.parse()解析为对象：

  // 发送POST请求（示例：使用fetch API）
  const userData = { name: "张三", age: 25 };
  fetch("/api/user", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(userData) // 对象转JSON字符串
  })
  .then(response => response.json())
  .then(data => {
    console.log(data); // 服务器返回的JSON字符串已自动解析为对象
  });

配置文件解析

许多项目使用JSON格式存储配置文件（如config.json），读取后需通过JSON.parse()转换为对象以便使用：

// 假设从文件读取到以下JSON字符串
const configJson = `{
  "apiUrl": "https://api.example.com",
  "timeout": 5000,
  "features": ["auth", "logging"]
}`;
const config = JSON.parse(configJson);
console.log(config.apiUrl); // "https://api.example.com"

深拷贝对象

JSON.stringify()和JSON.parse()结合使用，可以实现简单的深拷贝（但仅适用于可序列化的对象，不包含函数、循环引用等）：

const originalObj = { name: "张三", info: { age: 25 } };
const deepCopyObj = JSON.parse(JSON.stringify(originalObj));
deepCopyObj.info.age = 30;
console.log(originalObj.info.age); // 25（原对象未被修改）