js怎么重新封装json

JavaScript 中如何优雅地重新封装 JSON 数据

在 JavaScript 开发中，我们经常需要处理 JSON（JavaScript Object Notation）数据，JSON 作为一种轻量级的数据交换格式，其本质就是 JavaScript 对象或数组，所谓“重新封装 JSON”，通常指的是根据特定的业务需求，对现有的 JSON 数据结构进行转换、重组、筛选、补充或格式化，生成一个新的、更符合使用场景的 JSON 对象或数组，这个过程并非指修改 JSON 字符串本身，而是操作其对应的 JavaScript 对象。

本文将详细介绍在 JavaScript 中重新封装 JSON 数据的常见方法、最佳实践以及一些实用技巧。

为什么需要重新封装 JSON 数据？

在实际应用中,原始的 JSON 数据往往来自 API 接口、第三方服务或配置文件，其结构可能并不完全符合我们前端组件或业务逻辑的直接需求，重新封装 JSON 数据的主要目的包括：

1. 数据结构适配：将原始数据调整为组件所需的数据结构。
2. 字段筛选与重命名：只保留必要字段，或对字段名称进行语义化调整。
3. 数据格式化：如日期格式化、数字格式化、单位转换等。
4. 数据补充与计算：基于现有数据计算出新字段，或补充默认值。
5. 数据扁平化或嵌套化：将深层嵌套的数据扁平化，或将扁平的数据组织成嵌套结构。
6. 安全性处理：过滤掉敏感信息。

重新封装 JSON 的常用方法

使用 Object.keys(), Object.values(), Object.entries() 结合 map(), filter(), reduce()

这是最基础也是最常用的方法,适用于对数组或对象的每个元素进行处理。

示例：假设我们从 API 获取了用户列表数据，需要封装成组件需要的格式。

// 原始 JSON 数据 (模拟)
const rawUsers = [
  { id: 1, username: 'alice', email: 'alice@example.com', createdAt: '2023-01-15T08:00:00Z', isActive: true },
  { id: 2, username: 'bob', email: 'bob@example.com', createdAt: '2023-02-20T10:30:00Z', isActive: false },
  { id: 3, username: 'charlie', email: 'charlie@example.com', createdAt: '2023-03-10T12:45:00Z', isActive: true }
];
// 重新封装：只保留 id, username, email，并添加一个 formattedName 字段，同时过滤掉非活跃用户
const formattedUsers = rawUsers
  .filter(user => user.isActive) // 筛选活跃用户
  .map(user => {
    const { id, username, email } = user; // 解构赋值，提取需要的字段
    return {
      userId: id, // 字段重命名
      displayName: username, // 字段重命名
      contact: email, // 字段重命名
      fullName: `${username.charAt(0).toUpperCase()}${username.slice(1)}` // 计算新字段
    };
  });
console.log(JSON.stringify(formattedUsers, null, 2));
/*
输出：
[
  {
    "userId": 1,
    "displayName": "alice",
    "contact": "alice@example.com",
    "fullName": "Alice"
  },
  {
    "userId": 3,
    "displayName": "charlie",
    "contact": "charlie@example.com",
    "fullName": "Charlie"
  }
]
*/

使用 for...in 或 for...of 循环

对于更复杂的逻辑,或者需要操作对象属性本身时，可以使用传统的循环语句。

示例：将一个对象的所有值转换为大写（假设值都是字符串）。

const rawData = { name: 'john', city: 'new york', country: 'usa' };
const upperCaseData = {};
for (const key in rawData) {
  if (rawData.hasOwnProperty(key)) { // 确保是对象自身的属性
    upperCaseData[key] = rawData[key].toUpperCase();
  }
}
console.log(JSON.stringify(upperCaseData, null, 2));
/*
输出：
{
  "name": "JOHN",
  "city": "NEW YORK",
  "country": "USA"
}
*/

使用 Lodash 等工具库

Lodash 是一个功能强大的 JavaScript 实用工具库，提供了大量用于操作数组和对象的函数，可以大大简化重新封装的过程。

示例：使用 Lodash 进行类似上面的操作。

首先需要安装 Lodash：npm install lodash 或使用 CDN。

// const _ = require('lodash'); // Node.js 环境
// 或者浏览器环境 <script src="lodash.min.js"></script>
const rawUsers = [
  { id: 1, username: 'alice', email: 'alice@example.com', createdAt: '2023-01-15T08:00:00Z', isActive: true },
  { id: 2, username: 'bob', email: 'bob@example.com', createdAt: '2023-02-20T10:30:00Z', isActive: false },
  { id: 3, username: 'charlie', email: 'charlie@example.com', createdAt: '2023-03-10T12:45:00Z', isActive: true }
];
// 使用 Lodash 的 chain, filter, map, pick, get 等方法
const formattedUsersWithLodash = _.chain(rawUsers)
  .filter(user => user.isActive)
  .map(user => ({
    userId: _.get(user, 'id'),
    displayName: _.get(user, 'username'),
    contact: _.get(user, 'email'),
    fullName: _.startCase(_.toLower(user.username)) // 更优雅的大小写转换
  }))
  .value();
console.log(JSON.stringify(formattedUsersWithLodash, null, 2));

Lodash 的优势在于代码更简洁、可读性更强，并且处理了各种边界情况。

使用展开运算符 () 和对象/数组解构

展开运算符和解构赋值是 ES6+ 提供的非常便捷的工具，常用于创建新对象或数组时合并、覆盖或提取数据。

示例：合并两个对象，并添加新字段。

const userData = { id: 1, name: 'Tom' };
const additionalInfo = { age: 30, email: 'tom@example.com' };
// 重新封装，合并对象并添加新字段
const completeUserProfile = {
  ...userData,
  ...additionalInfo,
  isActive: true,
  joinedDate: new Date().toISOString()
};
console.log(JSON.stringify(completeUserProfile, null, 2));
/*
输出：
{
  "id": 1,
  "name": "Tom",
  "age": 30,
  "email": "tom@example.com",
  "isActive": true,
  "joinedDate": "2024-05-21T..." // 当前时间
}
*/

深度封装与递归

当 JSON 数据具有深层嵌套结构时，可能需要使用递归来处理每个层级的元素。

示例：将一个嵌套的菜单列表扁平化，只保留 id 和 name。

const nestedMenu = [
  {
    id: 1,
    name: 'Home',
    children: [
      { id: 11, name: 'Dashboard', children: [] },
      { id: 12, name: 'Profile', children: [] }
    ]
  },
  {
    id: 2,
    name: 'Products',
    children: [
      { id: 21, name: 'Category A', children: [] },
      { id: 22, name: 'Category B', children: [] }
    ]
  }
];
function flattenMenu(menuItems) {
  return menuItems.reduce((acc, item) => {
    // 添加当前项的基本信息
    acc.push({ id: item.id, name: item.name });
    // 如果有子项，递归处理并合并到结果中
    if (item.children && item.children.length > 0) {
      acc.push(...flattenMenu(item.children));
    }
    return acc;
  }, []);
}
const flatMenu = flattenMenu(nestedMenu);
console.log(JSON.stringify(flatMenu, null, 2));
/*
输出：
[
  { "id": 1, "name": "Home" },
  { "id": 11, "name": "Dashboard" },
  { "id": 12, "name": "Profile" },
  { "id": 2, "name": "Products" },
  { "id": 21, "name": "Category A" },
  { "id": 22, "name": "Category B" }
]
*/

最佳实践与注意事项

1. 不可变性：尽量在重新封装时创建新的对象和数组，而不是直接修改原始数据，这有助于避免副作用，使数据流更清晰，便于调试和状态管理（尤其是在 React 等框架中）。