如何遍历嵌套对象数组获取所有子项ID、Name并跟踪索引

你的代码目前只能遍历第一层子元素，要获取所有嵌套子元素的ID和Name，同时跟踪索引路径以便修改特定元素，需要用递归遍历处理嵌套结构。

解决方案代码 #

// 定义递归遍历函数
const traverseChildren = (children: Record<string, any>, indexPath: number[] = []) => {
  // 遍历子元素键值对，同时获取当前层级索引
  Object.entries(children).forEach(([id, item], idx) => {
    // 输出当前元素的ID和Name
    console.log(`id: ${id} name: ${item.name}`);
    // 如需修改特定索引路径的元素，可通过indexPath定位
    // 示例：修改索引路径为[0,0]的元素名称
    // if (indexPath.join(',') === '0,0') {
    //   item.name = '修改后的名称';
    // }
    // 若当前元素存在子节点，递归遍历并更新索引路径
    if (item.children && Object.keys(item.children).length > 0) {
      traverseChildren(item.children, [...indexPath, idx]);
    }
  });
};

// 从components第一个元素的子节点开始遍历
traverseChildren(this.components[0].children);

输出结果 #

• id: 17:12610 name: cc-1
• id: 7:43 name: icon-slot

代码说明 #

1. 使用Object.entries()遍历子元素，同时获取元素ID、内容和当前层级的索引
2. indexPath数组记录当前元素的索引路径（比如第一层第一个元素路径是[0]，它的子元素第一个路径是[0,0]），方便精准定位需要修改的元素
3. 递归处理每个元素的children属性，确保所有嵌套子元素都被遍历到
4. 若要修改特定元素，只需对比indexPath即可定位并修改

内容的提问来源于stack exchange，提问作者Ali Asghar