javascript - 重建对象数组后重新索引对象数组中的元素

Question

我有以下数组，我想在数组中每个项目的任一侧添加一个占位符并重新索引它。它目前看起来像这样：

   [
      [
        {
          "componentId": "navbar-zJNm0HaP",
          "componentIndex": 1,
          "componentName": "app-builder-navbar",

        },
        {
          "componentId": "features-2hsUdwaT",
          "componentIndex": 5,
          "componentName": "app-builder-features",

        },
        {
          "componentId": "footer-dLvoLZ16",
          "componentIndex": 7,
          "componentName": "app-builder-footer",
        }
      ],
      [
        {
          "componentId": "navbar-UBdYplVp",
          "componentIndex": 1,
          "componentName": "app-builder-navbar",
        },
        {
          "componentId": "features-mmEzByeO",
          "componentIndex": 3,
          "componentName": "app-builder-features"
        },
        {
          "componentId": "features-oSgGc6nL",
          "componentIndex": 7,
          "componentName": "app-builder-features"
        },
        {
          "componentId": "footer-IyrNODRQ",
          "componentIndex": 9,
          "componentName": "app-builder-footer"
        }
      ]
    ]

在我执行操作后，它应该如下所示：

[
  [
    {
      "componentId": "placeholder",
      "componentIndex": 0,
      "componentName": "app-builder-placeholder",

    },  
    {
      "componentId": "navbar-zJNm0HaP",
      "componentIndex": 1,
      "componentName": "app-builder-navbar",

    },
    {
      "componentId": "placeholder",
      "componentIndex": 2,
      "componentName": "app-builder-placeholder",

    },  
    {
      "componentId": "features-2hsUdwaT",
      "componentIndex": 3,
      "componentName": "app-builder-features",

    },
    {
      "componentId": "placeholder",
      "componentIndex": 4,
      "componentName": "app-builder-placeholder",

    },
    {
      "componentId": "footer-dLvoLZ16",
      "componentIndex": 5,
      "componentName": "app-builder-footer",
    },
    {
      "componentId": "placeholder",
      "componentIndex": 6,
      "componentName": "app-builder-placeholder",

    },
  ],
  [
    {
      "componentId": "placeholder",
      "componentIndex": 0,
      "componentName": "app-builder-placeholder",

    },
    {
      "componentId": "navbar-UBdYplVp",
      "componentIndex": 1,
      "componentName": "app-builder-navbar",
    },
    {
      "componentId": "placeholder",
      "componentIndex": 2,
      "componentName": "app-builder-placeholder",

    },
    {
      "componentId": "features-mmEzByeO",
      "componentIndex": 3,
      "componentName": "app-builder-features"
    },
    {
      "componentId": "placeholder",
      "componentIndex": 4,
      "componentName": "app-builder-placeholder",

    },
    {
      "componentId": "features-oSgGc6nL",
      "componentIndex": 5,
      "componentName": "app-builder-features"
    },
    {
      "componentId": "placeholder",
      "componentIndex": 6,
      "componentName": "app-builder-placeholder",

    },
    {
      "componentId": "footer-IyrNODRQ",
      "componentIndex": 7,
      "componentName": "app-builder-footer"
    },
    {
      "componentId": "placeholder",
      "componentIndex": 8,
      "componentName": "app-builder-placeholder",

    },
  ]
]

到目前为止，我已经尝试了以下方法，它使占位符就位。

 pageComponents = BuilderComponentsService.addPlaceholdersOnMultiplePages(pageComponents);

  static addPlaceholdersOnMultiplePages(components) {
    return components.map(element =>
      element.reduce((r, a) => r.concat(a,
        {
          componentIndex: null,
          componentName: ActiveComponentsPartialSelector.Placeholder,
          componentId: `${ActiveComponents.Placeholder}-${UtilService.generateRandomString(8)}`,
          timestamp: new Date().getTime()
        }),
        [{
          componentIndex: null,
          componentName: ActiveComponentsPartialSelector.Placeholder,
          componentId: `${ActiveComponents.Placeholder}-${UtilService.generateRandomString(8)}`,
          timestamp: new Date().getTime()
        }]
      ));
  }

但我不确定如何运行将更新componentIndex每个数组的索引 () 的最后一步。我怎么做？

标签： javascripttypescript