如何用 Object.entries 配合 reduce 实现针对后端返回对象的“结构重塑”转换-js教程-PHP中文网

object.entries 配合 reduce 是一种轻量、函数式、可读性强的结构转换方式，适合将扁平后端对象转为前端嵌套结构，支持按前缀分组、字段重命名、类型转换及深层路径映射，并可封装为复用函数。

如何用 object.entries 配合 reduce 实现针对后端返回对象的“结构重塑”转换

Object.entries 配合 reduce 是一种轻量、函数式、可读性强的结构转换方式，特别适合把后端返回的扁平对象（如 { user_id: 1, user_name: "张三", dept_code: "DEV" }）转成前端需要的嵌套结构（如 { user: { id: 1, name: "张三" }, dept: { code: "DEV" } }）。

理解 Object.entries + reduce 的协作逻辑

Object.entries 把对象转为键值对数组：[["user_id", 1], ["user_name", "张三"], ...]；reduce 则逐项遍历这个数组，累积构建新对象。关键在于：每轮迭代中，你决定当前键值对“归属哪个字段”、以什么形式存入结果对象。

不依赖外部变量，纯函数式，避免副作用
一次遍历完成多字段归类，性能可控
映射规则集中、易维护（比如用配置表驱动）

基础写法：按前缀分组并嵌套

假设后端字段带下划线前缀，需按语义归入不同子对象：

灵动AI

灵动AI是一款AI电商图片工具，专业的 AI 商品图生成工具。

下载

const backendData = {
  user_id: 1,
  user_name: "张三",
  user_avatar: "avatar.png",
  dept_code: "DEV",
  dept_name: "研发部"
};

const result = Object.entries(backendData).reduce((acc, [key, value]) => {
  const [prefix, field] = key.split('_');
  
  if (!acc[prefix]) acc[prefix] = {};
  acc[prefix][field] = value;
  
  return acc;
}, {});

// → { user: { id: 1, name: "张三", avatar: "avatar.png" }, dept: { code: "DEV", name: "研发部" } }

进阶技巧：支持字段重命名与类型转换

实际中常需改名（user_name → displayName）、转类型（"1" → 1）、过滤空值等。可在 reduce 内加映射配置：

const fieldMap = {
  user_id: { target: "user.id", type: "number" },
  user_name: { target: "user.displayName", type: "string" },
  dept_code: { target: "dept.code", type: "string" },
  is_active: { target: "status.active", type: "boolean" }
};

const result = Object.entries(backendData).reduce((acc, [key, value]) => {
  const config = fieldMap[key];
  if (!config) return acc;

  const [objKey, propKey] = config.target.split('.');
  if (!acc[objKey]) acc[objKey] = {};

  const converted = config.type === "number" ? Number(value) :
                        config.type === "boolean" ? value === "true" || value === true :
                        String(value);

  acc[objKey][propKey] = converted;
  return acc;
}, {});

实用建议：封装为可复用的转换函数

把规则和逻辑抽离，提升复用性与测试性：

function reshape(obj, rules) {
  return Object.entries(obj).reduce((acc, [key, value]) => {
    const rule = rules[key];
    if (!rule) return acc;

    const { target, transform = v => v } = rule;
    const [top, ...rest] = target.split('.');
    const path = rest.length ? rest.join('.') : null;

    if (!acc[top]) acc[top] = {};
    if (path) {
      // 支持深层路径（如 "profile.contact.email"），可用 _.set 简化
      set(acc[top], path, transform(value));
    } else {
      acc[top] = transform(value);
    }
    return acc;
  }, {});
}

// 使用示例
const data = { created_at: "2024-01-01", total_count: "12" };
reshape(data, {
  created_at: { target: "meta.createdAt", transform: s => new Date(s) },
  total_count: { target: "stats.total", transform: Number }
});
// → { meta: { createdAt: Date }, stats: { total: 12 } }