javascript - 使用索引路径查找深层嵌套对象并更新它的最有效方法

Question

我有一个树结构数组。我需要能够使用索引路径找到对象并更新切换 bool 值。我可以使用索引路径更新切换，但如果将更多级别的节点添加到树中，则需要更新此逻辑。我怎样才能使它通用，所以即使 treeData 被更改我的代码仍然有效？如果我可以将所有其他节点设置为 false(如果它不在其中一个索引路径中)，那就太好了。

treeData = [{
    name: 'Infiniti',
    toggle: false,
    children: [{
        name: 'G50',
        toggle: false,
        children: [{
            name: 'Pure AWD',
            toggle: false
          },
          {
            name: 'Luxe',
            toggle: false
          },
        ],
      },
      {
        name: 'QX50',
        toggle: false,
        children: [{
            name: 'Pure AWD',
            toggle: false
          },
          {
            name: 'Luxe',
            toggle: false
          },
        ],
      },
    ],
  },
  {
    name: 'BMW',
    toggle: false,
    children: [{
        name: '2 Series',
        toggle: false,
        children: [{
            name: 'Coupé',
            toggle: false
          },
          {
            name: 'Gran Coupé',
            toggle: false
          },
        ],
      },
      {
        name: '3 Series',
        toggle: false,
        children: [{
            name: 'Sedan',
            toggle: false
          },
          {
            name: 'PHEV',
            toggle: false
          },
        ],
      },
    ],
  },
];

indexPathArray = ["0/0/1", "1/0/0"]

for (const index of indexPathArray) {
  const indexArray = index.split('/')
  for (let i = 0; i < indexArray.length; i++) {
    if (i === 0) {
      treeData[indexArray[0]].toggle = true;
    }
    if (i === 1) {
      treeData[indexArray[0]].children[indexArray[1]].toggle = true;
    }
    if (i === 2) {
      treeData[indexArray[0]].children[indexArray[1]].children[indexArray[2]].toggle = true;
    }
  }
}

console.log(treeData);

Answer 1

您可以使用如下代码实现:

for (let path of indexPathArray) {
  let currentNode = { children: treeData };
  for (let i of path.split('/')) {
    currentNode = currentNode.children[i];
    currentNode.toggle = true;
  }
}

这里的思路是有一个临时变量currentNode，里面包含了树遍历的当前游标。

这将允许您访问索引路径中的下一个项目，而无需编写整个路径。

一个片段:

treeData = [{
    name: 'Infiniti',
    toggle: false,
    children: [{
        name: 'G50',
        toggle: false,
        children: [{
            name: 'Pure AWD',
            toggle: false
          },
          {
            name: 'Luxe',
            toggle: false
          },
        ],
      },
      {
        name: 'QX50',
        toggle: false,
        children: [{
            name: 'Pure AWD',
            toggle: false
          },
          {
            name: 'Luxe',
            toggle: false
          },
        ],
      },
    ],
  },
  {
    name: 'BMW',
    toggle: false,
    children: [{
        name: '2 Series',
        toggle: false,
        children: [{
            name: 'Coupé',
            toggle: false
          },
          {
            name: 'Gran Coupé',
            toggle: false
          },
        ],
      },
      {
        name: '3 Series',
        toggle: false,
        children: [{
            name: 'Sedan',
            toggle: false
          },
          {
            name: 'PHEV',
            toggle: false
          },
        ],
      },
    ],
  },
];

indexPathArray = ["0/0/1", "1/0/0"]

for (let path of indexPathArray) {
  let currentNode = { children: treeData };
  for (let i of path.split('/')) {
    currentNode = currentNode.children[i];
    currentNode.toggle = true;
  }
}

console.log(treeData);