Angular：从数组中的 1 个对象创建 2 个对象答案

【问题标题】：Angular: Create 2 objects from 1 objects in an arrayAngular：从数组中的 1 个对象创建 2 个对象
【发布时间】：2019-07-26 08:03:03
【问题描述】：

我有一个如下所示的数组

 [
  {
    "id": 42,
    "name": "updateDate",
    "displayName": "UPDATE DATE",
    "uiControl": "DATERANGE",
    "dataType": "STRING",
    "uiOrder": 1,

  },
  {
    "id": 44,
    "name": "name",
    "displayName": "First Name",
    "uiControl": "TEXTBOX",
    "dataType": "STRING",
    "uiOrder": 1,
  },
]

我想使用属性UiControl === DATERANGE 过滤此数组中的对象，并从过滤后的对象中创建 2 个对象，并将'FROM' 和 'TO' 附加到 name 和 displayname 属性，如下所示

最终输出：

[{
  "id": 42,
  "name": "fromupdateDate",            // 'from'appended to name property
  "displayName": "FROM UPDATE DATE",   // 'FROM' appended to displayName property
  "uiControl": "DATERANGE",
  "dataType": "STRING",
  "uiOrder": 1,
 },
 {
  "id": 42,
  "name": "toupdateDate",               // 'to' appended to name property
  "displayName": "TO UPDATE DATE",      // 'TO' appended to displayName
  "uiControl": "DATERANGE",
  "dataType": "STRING",
  "uiOrder": 1,
 },
 {                                      // this object stays the same
   "id": 44,
   "name": "name",
   "displayName": "First Name",
   "uiControl": "TEXTBOX",
   "dataType": "STRING",
   "uiOrder": 1,
  }]


We can create such an array in multiple ways, but I want to find an optimized way of creating such an object.

【问题讨论】：

标签： arrays angular typescript object optimization

【解决方案1】：

flatMap 会做你想做的事：

const input = [{
    "id": 42,
    "name": "updateDate",
    "displayName": "UPDATE DATE",
    "uiControl": "DATERANGE",
    "dataType": "STRING",
    "uiOrder": 1,

  },
  {
    "id": 44,
    "name": "name",
    "displayName": "First Name",
    "uiControl": "TEXTBOX",
    "dataType": "STRING",
    "uiOrder": 1,
  },
];
const output = input.flatMap(v => v.uiControl === "DATERANGE" 
  ? [
      { ...v,
        name: `from${v.name}`,
        displayName: `FROM ${v.displayName}`
      },
      { ...v,
        name: `to${v.name}`,
        displayName: `TO ${v.displayName}`
      }
    ] 
  : [v]);
console.log(output);

请注意，您必须在 esnext 支持下编译它。有关详细信息，请参阅this question。它也不会在 IE 或 Edge 上开箱即用。如果这是您的用例中的问题，您将需要使用 polyfill 或依赖 map + reduce，如下所示：

const output = input.map(v => v.uiControl === "DATERANGE" 
  ? [
      { ...v,
        name: `from${v.name}`,
        displayName: `FROM ${v.displayName}`
      },
      { ...v,
        name: `to${v.name}`,
        displayName: `TO ${v.displayName}`
      }
    ] 
  : [v])
  .reduce((acc, cur) => (acc.push(...cur), acc), []);

【讨论】：