代码之家 › 专栏 › 技术社区 › prabhat gundepalli

角度:从阵列中的1个对象创建2个对象

optimization object typescript angular arrays

0

prabhat gundepalli · 技术社区 · 7 年前

我有一个如下所示的数组

 [
  {
    "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' 指向名称和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.

1 回复 | 直到 7 年前

1

0

p.s.w.g 7 年前

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), []);