js递归遍历多维数组,根据指定key删除对应的项,如何实现?

昵称
  • 176

比如有以下原始数据:

 [
    {
        "_uuid":"1b316350-fb5a-4f79-974e-7ac62d9a517b",
        "_level":1,
        "type":"object",
        "desc":"描述信息",
        "childList":[
            {
                "_uuid":"2cd64047-59ec-45fc-a70c-fca7fae06245",
                "_level":2,
                "type":"object",
                "desc":"描述信息",
                "childList":[
                    {
                        "_uuid":"f406945d-eca1-4cbc-9a20-014aaa7f4121",
                        "_level":3,
                        "type":"object",
                        "desc":"描述信息",
                    }
                ]
            }
        ]
    },
    {
        "_uuid":"d6d5d40f-5052-4035-83ca-8f79545bf883",
        "_level":1,
        "type":"boolean",
        "desc":"描述信息2",
    }
];

传入_uuid f406945d-eca1-4cbc-9a20-014aaa7f4121,删除指定项得到结果:

[
    {
        "_uuid":"1b316350-fb5a-4f79-974e-7ac62d9a517b",
        "_level":1,
        "type":"object",
        "desc":"描述信息",
        "childList":[
            {
                "_uuid":"2cd64047-59ec-45fc-a70c-fca7fae06245",
                "_level":2,
                "type":"object",
                "desc":"描述信息",
                "childList":[
                ]
            }
        ]
    },
    {
        "_uuid":"d6d5d40f-5052-4035-83ca-8f79545bf883",
        "_level":1,
        "type":"boolean",
        "desc":"描述信息2",
    }
];

如何实现呢?

补充:如果加入一项呢该如何修改?传入2cd64047-59ec-45fc-a70c-fca7fae06245,得到

 [
    {
        "_uuid":"1b316350-fb5a-4f79-974e-7ac62d9a517b",
        "_level":1,
        "type":"object",
        "desc":"描述信息",
        "childList":[
            {
                "_uuid":"2cd64047-59ec-45fc-a70c-fca7fae06245",
                "_level":2,
                "type":"object",
                "desc":"描述信息",
                "childList":[
                    {
                        "_uuid":"f406945d-eca1-4cbc-9a20-014aaa7f4121",
                        "_level":3,
                        "type":"object",
                        "desc":"描述信息",
                    },
                    {
                        "_uuid":"f406945d-eca1-4cbc-9a20-014aaa7111111",
                        "_level":3,
                        "type":"object",
                        "desc":"描述信息2",
                    },
                
                ]
            }
        ]
    },
    {
        "_uuid":"d6d5d40f-5052-4035-83ca-8f79545bf883",
        "_level":1,
        "type":"boolean",
        "desc":"描述信息2",
    }
];
回复
阅读 476
4 个回答
✓ 已被采纳
   let uniqueByUUID = (data, uuid) => {
      data.forEach((item, index) => {
        if (item._uuid === uuid) {
          data.splice(index, 1);
        }
        if (item.childList && item.childList.length) {
          uniqueByUUID(item.childList, uuid);
        }
      })
    }
    let data = [
      {
        "_uuid": "1b316350-fb5a-4f79-974e-7ac62d9a517b",
        "_level": 1,
        "type": "object",
        "desc": "描述信息",
        "childList": [
          {
            "_uuid": "2cd64047-59ec-45fc-a70c-fca7fae06245",
            "_level": 2,
            "type": "object",
            "desc": "描述信息",
            "childList": [
              {
                "_uuid": "f406945d-eca1-4cbc-9a20-014aaa7f4121",
                "_level": 3,
                "type": "object",
                "desc": "描述信息",
              }
            ]
          }
        ]
      },
      {
        "_uuid": "d6d5d40f-5052-4035-83ca-8f79545bf883",
        "_level": 1,
        "type": "boolean",
        "desc": "描述信息2",
      }
    ];
    uniqueByUUID(data, "f406945d-eca1-4cbc-9a20-014aaa7f4121");
    console.log(data)

如果是添加,则是同样的思路:

let addItem = (data, uuid, item) => {
      data.forEach(_item => {
        if (_item._uuid === uuid) {
          _item.childList.push(item);
        }
        if (_item.childList && _item.childList.length) {
          addItem(_item.childList, uuid,item);
        }
      })
    }
    addItem(data, "2cd64047-59ec-45fc-a70c-fca7fae06245", {
      "_uuid": "f406945d-eca1-4cbc-9a20-014aaa7111111",
      "_level": 3,
      "type": "object",
      "desc": "描述信息2",
    })
    console.log(data)
已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
function remove(list, cb) {
    for(var i = 0;i<list.length;i++) {
      var item = list[i];
      if( cb(item) ) return list.splice(i,1)
      if(item.childList) {
       var res = remove(item.childList, cb) 
       if(res) return res
      }
   }
   return null;
}
var data = [
    {
        "_uuid":"1b316350-fb5a-4f79-974e-7ac62d9a517b",
        "_level":1,
        "type":"object",
        "desc":"描述信息",
        "childList":[
            {
                "_uuid":"2cd64047-59ec-45fc-a70c-fca7fae06245",
                "_level":2,
                "type":"object",
                "desc":"描述信息",
                "childList":[
                    {
                        "_uuid":"f406945d-eca1-4cbc-9a20-014aaa7f4121",
                        "_level":3,
                        "type":"object",
                        "desc":"描述信息",
                    }
                ]
            }
        ]
    },
    {
        "_uuid":"d6d5d40f-5052-4035-83ca-8f79545bf883",
        "_level":1,
        "type":"boolean",
        "desc":"描述信息2",
    }
];

remove(data, v => v._uuid == 'f406945d-eca1-4cbc-9a20-014aaa7f4121')
已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
const temp = [
  {
    _uuid: "1b316350-fb5a-4f79-974e-7ac62d9a517b",
    _level: 1,
    type: "object",
    desc: "描述信息",
    childList: [
      {
        _uuid: "2cd64047-59ec-45fc-a70c-fca7fae06245",
        _level: 2,
        type: "object",
        desc: "描述信息",
        childList: [
          {
            _uuid: "f406945d-eca1-4cbc-9a20-014aaa7f4121",
            _level: 3,
            type: "object",
            desc: "描述信息"
          }
        ]
      }
    ]
  },
  {
    _uuid: "d6d5d40f-5052-4035-83ca-8f79545bf883",
    _level: 1,
    type: "boolean",
    desc: "描述信息2"
  }
];

type TreeNode = {
  _uuid: string;
  _level: number;
  type: string;
  desc: string;
  childList?: TreeNode[];
  _parent?: TreeNode | null;
};

class TreeDataHelper {
  private root: TreeNode;
  private nodes: Map<string, TreeNode> = new Map();
  constructor(treeData: TreeNode[]) {
    const dummyRoot: TreeNode = {
      type: "DummyRoot",
      desc: "根节点",
      childList: treeData,
      _parent: null,
      _uuid: "",
      _level: 0
    };

    this.root = dummyRoot;
    this.dfs(dummyRoot, null);
  }

  private dfs(vertex: TreeNode, origin: TreeNode | null) {
    vertex._parent = origin;
    this.nodes.set(vertex._uuid, vertex);

    if (!vertex.childList) return;
    for (let i = 0; i < vertex.childList.length; ++i) {
      this.dfs(vertex.childList[i], vertex);
    }
  }

  remove(uuid: string): boolean {
    if (!this.nodes.has(uuid)) return false;

    const node = this.nodes.get(uuid)!;
    const parent = node._parent!;
    this._remove(parent, node);
    this.nodes.delete(uuid);
    return true;
  }

  private _remove(parent: TreeNode, node: TreeNode) {
    const index = parent.childList!.findIndex((v) => node === v);

    parent.childList!.splice(index, 1);
  }

  /**
   * 为父元素添加一个子节点
   * @param node 新节点
   * @param parentId 父节点id
   */
  add(node: TreeNode, parentId: string = ""): boolean {
    let parent: TreeNode | null = null;
    if (!parentId) {
      parent = this.root;
    } else {
      parent = this.nodes.get(parentId) || null;
    }

    if (!parent) return false;

    if (!parent.childList) parent.childList = [];
    parent.childList!.push(node);
    node._parent = parent;

    return false;
  }
}

const helper = new TreeDataHelper(temp);

helper.add({} as any);
console.log(helper.add({} as any, "d6d5d40f-5052-4035-83ca-8f79545bf883"));
console.log(temp);
  function recursivefilter(arr, val) {
    return arr.filter((item) => {
      if (item._uuid === val) {
        return false;
      }
      if (item.childList && item.childList.length > 0) {
        item.childList = recursivefilter(item.childList, val);
      }
      return true;
    });
  }

  const arr = [
    {
      _uuid: "1b316350-fb5a-4f79-974e-7ac62d9a517b",
      _level: 1,
      type: "object",
      desc: "描述信息1",
      childList: [
        {
          _uuid: "2cd64047-59ec-45fc-a70c-fca7fae06245",
          _level: 2,
          type: "object",
          desc: "描述信息1-1",
          childList: [
            {
              _uuid: "f406945d-eca1-4cbc-9a20-014aaa7f4121",
              _level: 3,
              type: "object",
              desc: "描述信息1-2",
            },
          ],
        },
      ],
    },
    {
      _uuid: "d6d5d40f-5052-4035-83ca-8f79545bf883",
      _level: 1,
      type: "boolean",
      desc: "描述信息2",
    },
  ];

  console.log(recursivefilter(arr, "f406945d-eca1-4cbc-9a20-014aaa7f4121"));
你知道吗?

宣传栏