js使用多种方法取出嵌套对象数组中的所有 children 的值

最新推荐文章于 2024-08-14 14:10:45 发布

南北极之间

最新推荐文章于 2024-08-14 14:10:45 发布

阅读量5k

点赞数 3

分类专栏：前端开发文章标签： javascript 前端递归

本文链接：https://blog.csdn.net/qq_22182989/article/details/130337404

版权

前端开发专栏收录该内容

570 篇文章 53 订阅

订阅专栏

文章介绍了如何使用递归函数、reduce以及flatMap方法在JavaScript中实现对包含children属性的嵌套对象数组进行深度优先遍历，以获取所有子项的数组。这三个方法都有效地遍历了整个结构，避免无限循环的风险。

摘要由CSDN通过智能技术生成

数据源：

const items = [
  {
    id: 1,
    name: "item1",
    children: [
      {
        id: 11,
        name: "item11",
        children: [
          {id: 111, name: "item111"},
          {id: 112, name: "item112"}
        ]
      },
      {
        id: 12,
        name: "item12",
        children: [
          {id: 121, name: "item121"},
          {id: 122, name: "item122"},
          {id: 123, name: "item123"}
        ]
      }
    ]
  },
  {
    id: 2,
    name: "item2",
    children: [
      {id: 21, name: "item21"},
      {id: 22, name: "item22"}
    ]
  }
];

方法：

1.使用递归函数进行深度优先遍历

function getAllChildren(items) {
  let children = [];
  items.forEach(item => {
    children.push(item);
    if (item.children) {
      children = children.concat(getAllChildren(item.children));
    }
  });
  return children;
}
// 调用函数
const allChildren = getAllChildren(items);
console.log(allChildren);

2.使用 reduce 递归方法进行深度优先遍历

function getAllChildren(items) {
  return items.reduce((acc, item) => {
    const { children = [], ...rest } = item;
    return [...acc, rest, ...getAllChildren(children)];
  }, []);
}
// 调用函数
const allChildren = getAllChildren(items);
console.log(allChildren);

3.使用 flatMap 方法进行深度优先遍历

function getAllChildren(items) {
  return items.flatMap(item => {
    const { children = [], ...rest } = item;
    return [rest, ...getAllChildren(children)];
  });
}
// 调用函数
const allChildren = getAllChildren(items);
console.log(allChildren);

这些方法都会遍历整个嵌套对象数组，并返回包含所有 children 的数组。请注意，使用递归方法时要小心，确保没有无限循环。