JavaScript如何处理嵌套对象数组 为每个节点添加含后代title的keys属性

问题根因 #

你的递归逻辑漏洞很明显：处理完子节点后，你只往父节点的keys里追加了直接子节点的title，没有把子节点已经收集好的全量后代标题合并进来，自然拿不到深层节点的内容。

原生JS实现方案 #

递归处理时让函数返回当前节点生成的完整keys数组，父节点直接拼接子节点返回的结果即可，不用额外做深层遍历：

const mapTitlesToKeys = (node) => {
  // 初始化当前节点keys，先放入自身title
  node.keys = [node.title];
  node.children.forEach(child => {
    // 递归处理子节点，拿到子节点的全量keys列表
    const childAllKeys = mapTitlesToKeys(child);
    // 把子节点的所有key全部追加到当前节点，不要只追加child.title
    node.keys.push(...childAllKeys);
  });
  // 返回当前节点的全量keys，供上层父节点使用
  return node.keys;
};

// 遍历根数组处理所有顶层节点
nestArray.forEach(root => mapTitlesToKeys(root));

Lodash实现版本 #

逻辑和原生写法完全一致，只是遍历方法换成lodash提供的工具函数：

import _ from 'lodash';

const mapTitlesToKeys = (node) => {
  node.keys = [node.title];
  _.forEach(node.children, child => {
    node.keys.push(...mapTitlesToKeys(child));
  });
  return node.keys;
};

_.forEach(nestArray, root => mapTitlesToKeys(root));

注：你给出的期望示例里最顶层title 1节点的keys数组存在笔误，漏写了title 1-2、title 1-2-1、title 1-2-2三个值。按照你描述的「存储当前节点自身title + 所有层级子节点title」的规则，这三个值本就属于顶层节点的keys范畴，上述实现严格遵循该规则。

内容的提问来源于stack exchange，提问作者aliar becko