我有一个树 struct array.我需要能够使用索引路径找到对象并更新切换布尔值.我可以使用索引路径更新切换,但如果向树中添加更多级别的 node ,则需要更新此逻辑.如何才能使其成为泛型,以便即使treeData发生更改,我的代码仍能正常工作? 如果我可以将所有其他 node 设置为假(如果它不在其中一个索引路径中),那就太好了.

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);

推荐答案

您可以使用如下代码来实现这一点:

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

这里的 idea 是有一个临时变量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);

Javascript相关问答推荐

Cookie中未保存会话数据

用JavaScript复制C#CRC 32生成器

Mongoose post hook在使用await保存时不返回Postman响应

在拖放时阻止文件打开

如何从URL获取令牌?

如何在bslib nav_insert之后更改导航标签的CSS类和样式?

如何将react—flanet map添加到remixjs应用程序

Angular 中的类型错误上不存在获取属性

Html文件和客户端存储的相关问题,有没有可能?

Reaction Native中的范围滑块

Puppeteer上每页的useProxy返回的不是函数/构造函数

Nextjs 13.4 Next-Auth 4.2登录(&Quot;凭据&,{});不工作

从另一个数组中的对应行/键值对更新数组中的键值对对象

如何 for each 输入动态设置输入变更值

一个实体一刀VS每个实体多刀S

有效路径同时显示有效路径组件和不存在的路径组件

传递方法VS泛型对象VS事件特定对象

如何在FiRestore中的事务中使用getCountFromServer

我怎样才能得到一个数组的名字在另一个数组?

在高位图中显示每个y轴系列的多个值