JavaScript如何遍历多层嵌套对象 将所有children属性转为对象数组

实现逻辑 #

我们可以通过递归遍历所有层级的节点完成转换，核心逻辑如下：

• 对每个节点先校验children属性的类型，仅当它是非空普通对象时执行转换
• 用Object.values()提取children对象的所有属性值，替换原对象为数组结构
• 对转换后的子节点数组中的每个元素递归执行转换逻辑，覆盖所有嵌套层级

完整代码 #

/**
 * 递归将节点的children属性从键值对象转为数组
 * @param {Object} node 要处理的节点对象
 * @returns {Object} 处理后的节点
 */
function convertChildrenToArray(node) {
  // 过滤不需要处理的情况：无children、children不是对象、children已经是数组
  if (!node.children || typeof node.children !== 'object' || Array.isArray(node.children)) {
    return node;
  }
  const childKeys = Object.keys(node.children);
  // 空children对象保留原结构，不转数组
  if (childKeys.length === 0) {
    return node;
  }
  // 把children对象转成值数组
  node.children = Object.values(node.children);
  // 递归处理所有子节点
  node.children.forEach(child => convertChildrenToArray(child));
  return node;
}

// 调用示例
// 你的原始最外层对象
const originalData = {
  0:{
    id: 1,
    name: 'Name 1',
    children: {
      0:{
        id: 2,
        name: 'Name 2',
        children: {}
      },
      1:{
        id: 3,
        name: 'Name 3',
        children: {}
      }
    }
  },
  1:{
    id: 4,
    name: 'Name 4',
    children: {
      0:{
        id: 5,
        name: 'Name 5',
        children: {}
      }
    }
  },
}

// 如果需要保留最外层的数字键结构，遍历每个值处理即可
Object.values(originalData).forEach(item => convertChildrenToArray(item))

// 如果需要把最外层也转成数组，就用map
// const result = Object.values(originalData).map(item => convertChildrenToArray(item))

效果说明 #

运行上述代码后，所有层级非空的children属性都会从键值对象转为数组，空children会保留原对象结构，完全符合示例要求。

内容的提问来源于stack exchange，提问作者Otorrinolaringologista -man