Angular：从JSON中提取父节点与指定子节点的优化方案

原数据结构 #

我有如下JSON对象elements120：

elements120: {
    "data": {
        "name": "120",
        "type": "120"
    },
    "children": [
        {
            "data": {
                "name": "120A",
                "type": "120A"
            },
            "children": []
        },
        {
            "data": {
                "name": "120B",
                "type": "120B"
            },
            "children": []
        },
        {
            "data": {
                "name": "120C",
                "type": "120C"
            },
            "children": []
        }
    ]
}

期望输出 #

需要生成三个新的JSON对象，保留原父节点的data，仅包含对应名称的子节点：

Json 1: filtered120A #

filtered120A: {
    "data": {
        "name": "120",
        "type": "120"
    },
    "children": [
        {
            "data": {
                "name": "120A",
                "type": "120A"
            },
            "children": []
        }
    ]
}

Json 2: filtered120B #

filtered120B: {
    "data": {
        "name": "120",
        "type": "120"
    },
    "children": [
        {
            "data": {
                "name": "120B",
                "type": "120B"
            },
            "children": []
        }
    ]
}

Json 3: filtered120C #

filtered120C: {
    "data": {
        "name": "120",
        "type": "120"
    },
    "children": [
        {
            "data": {
                "name": "120C",
                "type": "120C"
            },
            "children": []
        }
    ]
}

原始实现代码 #

我通过以下代码实现了需求，但代码冗余不优雅：

this.filtered120A = utils.deepClone(this.elements120);
this.filtered120B = utils.deepClone(this.elements120);
this.filtered120C = utils.deepClone(this.elements120);

this.filtered120A = this.filtered120A.filter((element) => {
      delete element.children[1];
      delete element.children[2];
      return true;
    });

this.filtered120B = this.filtered120B.filter((element) => {
          element.children[0] = element.children[1];
          delete element.children[1];
          delete element.children[2];
          return true;
        });

this.filtered120C = this.filtered120C.filter((element) => {
          element.children[0] = element.children[2];
          delete element.children[1];
          delete element.children[2];
          return true;
        });

优化实现方案 #

可以封装一个通用函数，根据子节点的name来生成过滤后的对象，避免重复代码：

// 定义通用过滤函数
const createFilteredNode = (originalNode, targetChildName) => {
  // 深克隆原节点，避免修改原数据
  const clonedNode = utils.deepClone(originalNode);
  // 过滤出指定名称的子节点
  clonedNode.children = clonedNode.children.filter(child => 
    child.data.name === targetChildName
  );
  return clonedNode;
};

// 生成三个过滤后的对象
this.filtered120A = createFilteredNode(this.elements120, '120A');
this.filtered120B = createFilteredNode(this.elements120, '120B');
this.filtered120C = createFilteredNode(this.elements120, '120C');

优化点说明 #

• 复用性强：通用函数可处理任意目标子节点名称，后续新增子节点只需调用函数即可，无需重复编写过滤逻辑
• 逻辑清晰：直接通过filter方法筛选目标子节点，比手动删除/替换数组元素更直观，减少出错概率
• 代码简洁：避免了重复的深克隆和冗余过滤代码，整体代码量大幅减少

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