JavaScript中递归搜索对象数组匹配节点时如何更新对应属性

问题解答 #

你原有代码使用filter遍历存在两个核心问题：一是无法将子节点的匹配状态向上传递给父节点，没法实现父节点加showTree的需求；二是你写的data.map(el=> el.selected= "true")会给当前层级所有元素加selected属性，不符合仅给第一个匹配节点加属性的要求。

实现思路 #

• 改用支持提前终止的for循环遍历节点，找到第一个匹配项就停止遍历
• 当前节点匹配搜索条件时，直接给当前节点加selected: true，返回匹配节点通知上层
• 递归遍历子节点后如果收到了非空的匹配结果，说明当前节点是匹配节点的父节点，给当前节点加showTree: true，继续向上返回匹配结果

修正后的代码 #

let findDeep = function(data, label) {
  // 遍历当前层级所有节点
  for (let e of data) {
    // 当前节点匹配搜索条件
    if (e.label.includes(label)) {
      e.selected = true;
      return e; // 返回匹配节点，向上层传递状态
    }
    // 存在子节点就递归查找
    if (e.item) {
      const matchNode = findDeep(e.item, label);
      // 子节点返回了匹配结果，当前节点为上层父节点
      if (matchNode) {
        e.showTree = true;
        return matchNode; // 继续向上传递匹配结果
      }
    }
  }
  // 未匹配到节点返回空
  return null;
};

调用效果 #

由于对象是引用类型，递归修改会直接作用在原数组上：

• 调用findDeep(testData, 'child3')会直接返回你需要的第一个匹配节点
• 此时打印原testData数组，即可看到所有匹配节点的父节点都已经添加了showTree: true，完全符合你的预期输出要求。

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