TypeScript：如何将二维数组快速转换为自定义模型类型的对象？

嘿，这个需求我太有共鸣了！在Angular开发中，确实不用写一堆繁琐的for循环来逐个创建模型实例，不管是简单模型还是多层嵌套的结构，都有优雅的批量映射方案。下面我就针对你的场景一步步来拆解：

一、针对你的User模型快速实现 #

首先看你给出的User类和二维数组，因为数组元素的顺序刚好对应模型属性的顺序，我们可以给User类添加静态方法来封装转换逻辑，这样代码更内聚也更易用：

export class User { 
  firstName = ''; 
  lastName = ''; 
  userName = ''; 
  email = '';

  // 单个值数组转User实例
  static fromArray(arr: string[]): User {
    const user = new User();
    // 利用数组解构直接按顺序赋值
    [user.firstName, user.lastName, user.userName, user.email] = arr;
    return user;
  }

  // 批量转换方法
  static fromArrays(arrays: string[][]): User[] {
    // 用数组的map方法替代手动循环
    return arrays.map(arr => User.fromArray(arr));
  }
}

使用的时候就非常简洁：

const rawData = [ 
  ["Adam","Richardson","AdMan","Adam@example.com"], 
  ["Ahmad","Ali","MarketMan","Ahmad@example.com"], 
  ["Feng","Trunk","SuperMan","Feng@example.com"], 
  ["Chris","Garcia","SmartMan","Donald@example.com"] 
];

// 一行代码完成批量转换
const users = User.fromArrays(rawData);

二、通用解决方案（适配多模型） #

如果你的项目里有多个模型需要做类似转换，写重复的静态方法就有点冗余了。我们可以封装一个通用的映射函数，支持传入任意模型构造函数和属性顺序配置：

/**
 * 批量将二维数组转换为自定义模型实例
 * @param arrays 原始二维数组数据
 * @param ModelCtor 目标模型的构造函数
 * @param propertyOrder 模型属性的顺序（对应数组元素的顺序）
 * @returns 模型实例数组
 */
function mapArraysToModels<T>(
  arrays: any[][],
  ModelCtor: new () => T,
  propertyOrder: (keyof T)[]
): T[] {
  return arrays.map(arr => {
    const model = new ModelCtor();
    arr.forEach((value, index) => {
      const prop = propertyOrder[index];
      if (prop) {
        model[prop] = value;
      }
    });
    return model;
  });
}

用这个函数处理User模型的话：

const users = mapArraysToModels(
  rawData, 
  User, 
  ['firstName', 'lastName', 'userName', 'email'] as (keyof User)[]
);

三、处理多层嵌套的模型结构 #

如果你的模型存在多层嵌套（比如User里包含Address模型），我们可以扩展通用函数，添加嵌套映射的配置：

1. 先定义嵌套的模型 #

export class Address {
  street = '';
  city = '';
}

2. 更新User模型 #

export class User { 
  firstName = ''; 
  lastName = ''; 
  userName = ''; 
  email = '';
  address: Address = new Address(); // 嵌套的Address实例
}

3. 扩展通用函数支持嵌套配置 #

// 定义嵌套映射的配置类型
interface NestedMappingConfig<T> {
  model: new () => T;
  propertyOrder: (keyof T)[];
}

interface ModelMappingConfig<T> {
  propertyOrder: (keyof T)[];
  nestedMappings?: Record<keyof T, NestedMappingConfig<any>>;
}

function mapArraysToModels<T>(
  arrays: any[][],
  ModelCtor: new () => T,
  config: ModelMappingConfig<T>
): T[] {
  return arrays.map(arr => {
    const model = new ModelCtor();
    arr.forEach((value, index) => {
      const prop = config.propertyOrder[index];
      if (!prop) return;

      // 检查当前属性是否需要嵌套转换
      const nestedConfig = config.nestedMappings?.[prop];
      if (nestedConfig && Array.isArray(value)) {
        // 递归处理嵌套模型（这里假设嵌套数据是单个模型的数组，取第一个元素）
        model[prop] = mapArraysToModels([value], nestedConfig.model, nestedConfig)[0];
      } else {
        model[prop] = value;
      }
    });
    return model;
  });
}

4. 使用扩展后的函数处理嵌套数据 #

// 包含嵌套地址的原始数据
const nestedRawData = [ 
  ["Adam","Richardson","AdMan","Adam@example.com", ["123 Main St", "New York"]], 
  ["Ahmad","Ali","MarketMan","Ahmad@example.com", ["456 Oak Ave", "Los Angeles"]]
];

// 配置映射规则
const userMappingConfig: ModelMappingConfig<User> = {
  propertyOrder: ['firstName', 'lastName', 'userName', 'email', 'address'],
  nestedMappings: {
    address: {
      model: Address,
      propertyOrder: ['street', 'city']
    }
  }
};

// 完成嵌套转换
const usersWithAddress = mapArraysToModels(nestedRawData, User, userMappingConfig);

方案优势总结 #

• 完全替代手动for循环，代码更简洁易维护
• 模型内聚的静态方法更符合面向对象设计，通用函数则适配多场景复用
• 支持任意层级的嵌套模型，通过配置即可扩展
• 保留Angular的类型安全特性，避免隐式类型转换问题

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