如何将表单专用扁平数据结构转换为嵌套数据结构？

给定以下扁平的用户输入数据：

const formData = {
  state: "California",
  city: "New York",
  full_name: "rererer",
  email: "eee@gg.com",
  dob: "1/1/2014",
  pincode: "222222",
  gender: "male",
};

需要将其转换为服务器API要求的嵌套结构，其中Address包含state、city、full_name，Profile包含email、dob、pincode、gender，最终结构如下：

{
  Address: {
    state: "California",
    city: "New York",
    full_name: "rererer",
  },
  Profile: {
    email: "eee@gg.com",
    dob: "1/1/2014",
    pincode: "222222",
    gender: "male",
  },
}

下面提供几种实用的实现方式：

方法1：手动构建嵌套对象 #

这种方式直接明了，适合字段数量少且固定的场景：

const apiData = {
  Address: {
    state: formData.state,
    city: formData.city,
    full_name: formData.full_name
  },
  Profile: {
    email: formData.email,
    dob: formData.dob,
    pincode: formData.pincode,
    gender: formData.gender
  }
};

方法2：解构赋值简化代码 #

利用ES6解构赋值语法，让代码更简洁：

// 先从扁平数据中解构出需要的字段
const { state, city, full_name, email, dob, pincode, gender } = formData;

// 直接构建嵌套结构
const apiData = {
  Address: { state, city, full_name },
  Profile: { email, dob, pincode, gender }
};

方法3：动态映射配置（扩展性更强） #

如果后续字段可能变动，或者需要处理大量字段，可以用映射表来统一管理，方便维护：

// 定义字段与嵌套对象的映射关系
const fieldMapping = {
  Address: ['state', 'city', 'full_name'],
  Profile: ['email', 'dob', 'pincode', 'gender']
};

const apiData = {};

// 遍历映射表生成嵌套结构
Object.entries(fieldMapping).forEach(([group, fields]) => {
  apiData[group] = fields.reduce((obj, field) => {
    obj[field] = formData[field];
    return obj;
  }, {});
});

以上三种方法都能实现需求，你可以根据实际场景选择最适合的方式。

内容的提问来源于stack exchange，提问作者Nabajyoti