javascript - 如何安排 javascript 对象以获得更好的性能

Question

我有一个数据对象 -

const data = {
  'root': [
    {
      id: 1,
      name: 'demo',
      children: [
        {
          id: 2,
          name: 'demo2',
          children: [
            {
              id: 3,
              name: 'demo3',
              children: []
            },
            {
              id: 4,
              name: 'demo4',
              children: [
                {
                  id: 5,
                  name: 'demo5',
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

现在我的问题是，如果我想执行添加/编辑/删除操作，例如，我想编辑一个具有 id = 5 的对象，那么我必须访问 root[0].children[0].children[1].children[0]，这条路线并完成任务。我认为这会很昂贵，并且该对象可能有更多嵌套的 children 属性。

那么有没有其他结构可以重新排列我的对象并执行快速添加/编辑/删除操作？

Answer 1

由于id值是唯一的，因此您可以维护一个直接引用条目的Map(或对象)，无论它们位于父/子中的位置结构。父/子结构将仅包含子对象的 id 而不是实际的子对象，例如:

const data = {
    1: {
        id: 1,
        name: 'demo',
        children: [2]
    },
    2: {
        id: 2,
        name: 'demo2',
        children: [3, 4]
    },
    3: {
        id: 3,
        name: 'demo3',
        children: []
    },
    4: {
        id: 4,
        name: 'demo4',
        children: [5]
    },
    5: {
        id: 5,
        name: 'demo5',
        children: []
    }
};

通过ID访问只是data[id]。

该示例使用带有数字字符串键的对象(它们在上面写为文字数字，但属性名称始终是字符串[或符号])。但您可以使用 Map 来代替:

const data = new Map([
    [1, {
        id: 1,
        name: 'demo',
        children: [2]
    }],
    [2, {
        id: 2,
        name: 'demo2',
        children: [3, 4]
    }],
    [3, {
        id: 3,
        name: 'demo3',
        children: []
    }],
    [4, {
        id: 4,
        name: 'demo4',
        children: [5]
    }],
    [5, {
        id: 5,
        name: 'demo5',
        children: []
    }]
]);

那些 map 键实际上是数字。通过 ID 访问只需 data.get(id) 和 data.set(id, newEntry)。

您需要有函数来操作这个结构(添加、删除、移动)。您可以使用接受该结构的独立函数，例如:

function removeEntry(data, id) {
    const entry = data[id];
    for (const childId of entry.children) {
        removeEntry(data, childId);
    }
    delete data[id]; // The object version
    // Or: data.delete(id); // The Map version
}

...或者您可以将所有这些捆绑到一个类中。