javascript - 将一组对象缩减为一个对象并将一些公共(public)信息分组到一个数组中

Question

我的意思是我有一个如下所示的对象数组，

connectionInfo: any = [
    {
      "deviceName": "transponder1",
      "ports": 4,
      "rowNo": 1,
      "columnNo": 1,
      "posX": 2060.5,
      "posY": 200,
      "portInfo": {
        "portNumber": "1",
        "x": "2260.5",
        "y": "261.6666666666667"
      }
    },
    {
      "deviceName": "transponder1",
      "ports": 4,
      "rowNo": 1,
      "columnNo": 1,
      "posX": 2060.5,
      "posY": 200,
      "portInfo": {
        "portNumber": "2",
        "x": "2260.5",
        "y": "395"
      }
    },
    {
      "deviceName": "transponder1",
      "ports": 4,
      "rowNo": 1,
      "columnNo": 1,
      "posX": 2060.5,
      "posY": 200,
      "portInfo": {
        "portNumber": "3",
        "x": "2260.5",
        "y": "528.3333333333334"
      }
    }
];

下面是我想要的输出方式，

{
  "deviceName": "transponder1",
  "ports": 4,
  "rowNo": 1,
  "columnNo": 1,
  "posX": 2060.5,
  "posY": 200,
  "portInfo": {
    "portNumber": "1",
    "x": "2260.5",
    "y": "261.6666666666667"
  },
  "allPortsInfo": [
    {
      "portNumber": "1",
      "x": "2260.5",
      "y": "261.6666666666667"
    },
    {
      "portNumber": "2",
      "x": "2260.5",
      "y": "395"
    },
    {
      "portNumber": "3",
      "x": "2260.5",
      "y": "528.3333333333334"
    },
    {
      "portNumber": "4",
      "x": "2260.5",
      "y": "528.3333333333334"
    }
  ]
}

我试过的在下面， const cInfo = this.connectionInfo.reduce((acc, value) => acc.concat(value.portInfo),[]);

使用上述方法我的输出是，

[
  {
    "portNumber": "1",
    "x": "2260.5",
    "y": "261.6666666666667"
  },
  {
    "portNumber": "2",
    "x": "2260.5",
    "y": "395"
  },
  {
    "portNumber": "3",
    "x": "2260.5",
    "y": "528.3333333333334"
  },
  {
    "portNumber": "4",
    "x": "2260.5",
    "y": "528.3333333333334"
  }
]

我已经使用 reduce 并将所有 portInfo 收集到一个包含所有 portInfo 的数组中 但我只是不知道我是否可以在 reduce 循环中做出预期的输出。

这是我的 code在 stackblitz 上

Answer 1

对于已经分组的数组，您可以将第一个元素作为对象并通过仅映射 portInfo 属性来添加新属性。

var data = [[{ deviceName: "transponder1", ports: 3, rowNo: 1, columnNo: 1, posX: 2060.5, posY: 200, portInfo: { portNumber: "1", x: "2260.5", y: "261.6666666666667" } }, { deviceName: "transponder1", ports: 3, rowNo: 1, columnNo: 1, posX: 2060.5, posY: 200, portInfo: { portNumber: "2", x: "2260.5", y: "395" } }, { deviceName: "transponder1", ports: 3, rowNo: 1, columnNo: 1, posX: 2060.5, posY: 200, portInfo: { portNumber: "3", x: "2260.5", y: "528.3333333333334" } }], [{ deviceName: "amplifier1", ports: 3, rowNo: 1, columnNo: 2, posX: 2860.5, posY: 200, portInfo: { portNumber: "1", x: "3060.5", y: "261.6666666666667" } }, { deviceName: "amplifier1", ports: 3, rowNo: 1, columnNo: 2, posX: 2860.5, posY: 200, portInfo: { portNumber: "2", x: "3060.5", y: "395" } }, { deviceName: "amplifier1", ports: 3, rowNo: 1, columnNo: 2, posX: 2860.5, posY: 200, portInfo: { portNumber: "3", x: "3060.5", y: "528.3333333333334" } }]],
    result = data.map(array => ({
        ...array[0],
        allPortsInfo: array.map(({ portInfo }) => portInfo)
    }));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }