通过另一个深度嵌套的对象数组对深度嵌套的对象数组进行排序的最高效方法

Question

作为一个例子 - 我已经包含一个元素 array 包含一个 object 有一个 Children 键，这是一个 对象数组，每个对象也有自己的Children键，其中包含另一个数组。

[
  {
    "Id": "1",
    "Children": [
      {
        "Id": "2",
        "Children": [
          {
            "Id": "10",
            "DisplayName": "3-4",
          },
          {
            "Id": "1000",
            "DisplayName": "5-6",
          },
          {
            "Id": "100",
            "DisplayName": "1-2",
          },
        ]
      }
    ]
  }
]

有一个第二个对象数组，我想比较第一个对象数组，目的是确保第一个数组与 第二个数组 对象的顺序相同，如果不是 - 然后 sort 直到它是。

这是第二个数组：

[
  {
    "Id": "1",
    "Children": [
      {
        "Id": "2",
        "Children": [
           {
            "Id": "100",
            "DisplayName": "1-2",
          },
          {
            "Id": "10",
            "DisplayName": "3-4",
          },
          {
            "Id": "1000",
            "DisplayName": "5-6",
          },
        ]
      }
    ]
  }
]

这将运行的数据可能高达数万 - 因此性能至关重要。

我目前正在尝试使用一种实用方法将第二个数组的每个元素转换为对象的键控对象，例如

{
   1:  {
        "Id": "1",
        "Children": [
          {
            "Id": "2",
            "Children": [
              {
                "Id": "4",
                "DisplayName": "3-4",
              },
              {
                "Id": "3",
                "DisplayName": "1-2",
              },
            ]
          }
        ]
      }
}

这允许从顶层快速查找。我想知道我是否应该一直这样做下去，或者是否有一种惯用的方式来实现这一点。我也考虑了递归。 已排序数组的顺序不基于 Id - 它是任意的。因此，无论如何都需要保留订单。

Answer 1

假设每个对象的每个级别都存在相同的深度和所有 Id，使用一个递归函数，该函数在排序回调中使用 Array#findIndex() 匹配

function sortChildren(main, other) {
  other.forEach((o, i) => {
    if (o.children) {
      const mChilds = main[i].children, oChilds = o.children;
      
      oChilds.sort((a, b) => {
        return mChilds.findIndex(main => main.Id === a.Id) - mChilds.findIndex(main => main.Id === b.Id)
      });
      // call function again on this level passing appropriate children arrays in
      sortChildren(mChilds, oChilds)
    }
  })
}

sortChildren(data, newData);
console.log(JSON.stringify(newData, null, ' '))

<script>
  var data = [{
    "Id": "1",
    "Children": [{
      "Id": "2",
      "Children": [{
          "Id": "3",
          "DisplayName": "1-2",
        },
        {
          "Id": "4",
          "DisplayName": "3-4",
        },
      ]
    }]
  }]

  var newData = [{
    "Id": "1",
    "Children": [{
      "Id": "2",
      "Children": [{
          "Id": "4",
          "DisplayName": "3-4",
        },
        {
          "Id": "3",
          "DisplayName": "1-2",
        },
      ]
    }]
  }]

</script>