JavaScript中创建新结构对象数组副本的最佳实现方式

你当前的实现可以正常运行，针对这个「将原数组映射为新结构对象数组」的场景，更简洁语义更清晰的优化方案是使用Array.prototype.map方法：

const carModels = (carList: CarModel[]): SelectValues[] => 
  carList.map(car => ({
    value: `/api/modeles/${car.id}`,
    label: car.libelle,
  }))

优化点说明 #

• 消除了手动初始化空数组、调用push的冗余代码，map本身的语义就是「一对一转换数组元素」，代码可读性更高
• TypeScript可自动推断回调参数car的类型，也会自动校验返回的对象结构是否符合SelectValues的类型定义，不需要额外的冗余类型标注
• 没有可变的临时变量，全程无副作用，不会修改原carList数组，完全满足创建新副本的需求

如果后续需要新增过滤无效数据的逻辑，可以直接链式调用filter方法，不需要修改原有映射逻辑：

const carModels = (carList: CarModel[]): SelectValues[] => 
  carList
    // 过滤掉id或名称为空的无效车型
    .filter(car => car.id != null && car.libelle != null)
    .map(car => ({
      value: `/api/modeles/${car.id}`,
      label: car.libelle,
    }))

如果你的场景需要在转换的同时做更复杂的聚合操作，也可以用Array.prototype.reduce实现，不过当前的简单映射场景map是最优解。

内容的提问来源于stack exchange，提问作者Jean-Baptiste THERY