前端如何改json格式

前端如何优雅地修改JSON格式：从基础到实践

在前后端分离的开发模式中，JSON（JavaScript Object Notation）作为轻量级的数据交换格式，几乎贯穿了前端开发的每一个环节——从接口请求、数据存储到状态管理，前端开发者频繁地与JSON数据打交道，而“修改JSON格式”是前端开发中的高频需求，可能是为了适配接口返回数据、优化数据结构，或是满足特定场景的业务逻辑，本文将从基础概念出发，结合实际场景,详细讲解前端修改JSON格式的多种方法与最佳实践。

理解JSON：前端与数据交互的“通用语言”

在讨论如何修改JSON之前，我们首先要明确：JSON本质是一种数据格式，而非数据类型，它是JavaScript对象字面量的子集，但独立于语言，几乎所有编程语言都支持JSON的解析与生成，在前端,JSON数据通常以两种形式存在：

1. JSON字符串：通过网络请求（如fetch、axios）从后端接收的数据，本质是一个字符串，例如'{"name":"Alice","age":25}'。
2. JavaScript对象/数组：通过JSON.parse()将JSON字符串转换后的数据，可以直接操作，例如{name:"Alice",age:25}。

修改JSON格式的核心，就是对这两种形式的数据进行转换、重构或调整,使其满足业务需求。

修改JSON格式的常见场景

前端修改JSON格式的原因多种多样,常见的场景包括：

• 接口数据适配：后端返回的JSON字段名或结构与前端需求不匹配（如后端返回user_name，前端需要name）。
• 数据结构优化：将扁平化的数据转换为嵌套结构（如将[{id:1,parentId:2},{id:2,parentId:null}]转为树形结构），或反之。
• 数据类型转换：将字符串类型的数字转换为数字类型（如"age":"25"转为25），或日期字符串转为Date对象。
• 数据过滤与补充：从复杂JSON中提取部分字段，或根据计算结果新增字段（如根据生日计算年龄）。
• 格式标准化：统一字段命名风格（如驼峰命名转下划线命名）,或去除冗余字段。

前端修改JSON格式的核心方法

针对不同的数据形式（字符串/对象）和需求，前端有多种修改JSON格式的方式，从基础操作到高级工具,逐步提升开发效率。

（一）基础操作：直接修改JavaScript对象/数组

当JSON数据已被解析为JavaScript对象或数组时，可以直接通过属性访问、赋值、遍历等方式修改，这是最直接的方式,适用于简单的结构调整。

修改/新增字段

通过点（）或方括号（[]）语法访问字段,直接赋值即可修改或新增字段：

const user = { name: "Alice", age: "25" }; // 注意age是字符串
// 修改字段
user.age = 26; // 数字类型
// 新增字段
user.gender = "female";
console.log(user); // { name: "Alice", age: 26, gender: "female" }

删除字段

使用delete操作符或Object destructuring（解构赋值）删除不需要的字段：

const user = { name: "Alice", age: 26, gender: "female" };
// 方法1：delete操作符
delete user.gender;
// 方法2：解构赋值（适合保留剩余字段）
const { gender, ...restUser } = user;
console.log(restUser); // { name: "Alice", age: 26 }

遍历修改数组/对象

使用forEach、map、reduce等数组方法遍历并修改数据：

const users = [
  { id: 1, name: "Alice", age: "25" },
  { id: 2, name: "Bob", age: "30" }
];
// 使用map修改每个对象的age为数字，并新增isAdult字段
const updatedUsers = users.map(user => ({
  ...user,
  age: Number(user.age),
  isAdult: user.age >= 18
}));
console.log(updatedUsers);
/* 输出：
[
  { id: 1, name: "Alice", age: 25, isAdult: true },
  { id: 2, name: "Bob", age: 30, isAdult: true }
]
*/

（二）字符串与对象的转换：JSON.parse()与JSON.stringify()

当数据以JSON字符串形式存在时，需先通过JSON.parse()转换为对象，修改后再通过JSON.stringify()转回字符串（若需要）。

JSON.parse()：字符串转对象

const jsonString = '{"name":"Alice","age":"25"}';
const user = JSON.parse(jsonString);
// 修改对象
user.age = 26;
console.log(user); // { name: "Alice", age: 26 }

注意：JSON.parse()要求数据格式严格符合JSON规范（如属性名必须双引号、不能有注释等）,否则会抛出错误。

JSON.stringify()：对象转字符串

若需要将修改后的对象重新转换为JSON字符串（如存储到localStorage或发送给后端）：

const user = { name: "Alice", age: 26 };
const jsonString = JSON.stringify(user);
console.log(jsonString); // '{"name":"Alice","age":26}'

JSON.stringify()还支持两个可选参数：

• replacer：过滤或转换字段,可以是函数或数组。

  // 过滤掉age字段
  const jsonString = JSON.stringify(user, (key, value) => {
    if (key === "age") return undefined;
    return value;
  });
  console.log(jsonString); // '{"name":"Alice"}'
  // 仅保留name和age字段（数组形式）
  const jsonString2 = JSON.stringify(user, ["name", "age"]);
  console.log(jsonString2); // '{"name":"Alice","age":26}'

• space：格式化输出（缩进）,便于调试。

  const formattedJson = JSON.stringify(user, null, 2);
  console.log(formattedJson);
  /* 输出：
  {
    "name": "Alice",
    "age": 26
  }
  */

（三）高级技巧：使用Lodash简化复杂操作

对于复杂的数据结构（如深拷贝、嵌套对象修改、数组去重等），手动编写代码容易出错且冗长，工具库如Lodash能大幅提升效率。

深拷贝：_.cloneDeep()

修改JSON时，若不想影响原始数据,需先深拷贝：

const originalUser = { name: "Alice", address: { city: "Beijing" } };
const copiedUser = _.cloneDeep(originalUser);
// 修改拷贝后的数据
copiedUser.address.city = "Shanghai";
console.log(originalUser.address.city); // "Beijing"（原始数据未受影响）

对象/数组转换：.mapValues、.mapKeys

修改对象的值或键名：

const user = { name: "Alice", age: "25" };
// 修改值（将age转为数字）
const updatedUser = _.mapValues(user, (value, key) => {
  return key === "age" ? Number(value) : value;
});
console.log(updatedUser); // { name: "Alice", age: 25 }
// 修改键名（驼峰转下划线）
const keyRenamedUser = _.mapKeys(user, (value, key) => {
  return _.snakeCase(key); // 使用lodash的snakeCase方法
});
console.log(keyRenamedUser); // { name: "Alice", age: "25" }

嵌套数据操作：.get、.set

安全地获取或修改嵌套对象的属性,避免因路径不存在而报错：

const user = { name: "Alice", address: { city: "Beijing" } };
// 安全获取嵌套属性（若address不存在，返回默认值"unknown"）
const city = _.get(user, "address.city", "unknown");
console.log(city); // "Beijing"
// 安全设置嵌套属性（若address不存在，会自动创建）
_.set(user, "address.zipCode", "100000");
console.log(user.address); // { city: "Beijing", zipCode: "100000" }

数据结构转换：构建树形结构

将扁平数组转为树形结构（如菜单、分类数据）：

const flatData = [
  { id: 1, name: "Parent", parentId: null },
  { id: 2, name: "Child", parentId: 1 },
  { id: 3, name: "Child2", parentId: 1 }
];
const treeData = _.