javascript - 展平嵌套的对象数组 JS

Question

我有一个嵌套的对象数组，只想获取数组的子属性元素。这只是一个示例，实际数据将在数组的单独索引中包含一个唯一的子属性。我只能遍历列表中的第一个数组。

这是我的实现:

const headers = [{
    id: "name1",
    title: "Name 1",
    children: [{
        title: "Children 1",
        child: [{
            title: "Child 1",
            onClick: "child1Click"
          },
          {
            title: "Child 2",
            onClick: "child2Click"
          }
        ]
      },
      {
        title: "CHildren 2",
        child: [{
            title: "Child 3",
            id: "child3Click"
          },
          {
            title: "Child 4",
            id: "child4Click"
          }
        ]
      }
    ]
  },
  {
    id: "name2",
    title: "Name 2",
    children: [{
        title: "Children 3",
        child: [{
            title: "Child 5",
            onClick: "child5Click"
          },
          {
            title: "Child 6",
            onClick: "child6Click"
          }
        ]
      },
      {
        title: "CHildren 4",
        child: [{
            title: "Child 7",
            id: "child7Click"
          },
          {
            title: "Child 8",
            id: "child8Click"
          }
        ]
      }
    ]
  },
  {
    id: "name3",
    title: "Name 3"
  },
  {
    id: "name4",
    title: "Name 4"
  }
]

console.log(_.flattenDeep(_.map(_.compact(_.map(headers, item => item.children))[0], item1 => item1.child)))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

预期输出:

[
  {
    "title": "Child 1",
    "onClick": "child1Click"
  },
  {
    "title": "Child 2",
    "onClick": "child2Click"
  },
  {
    "title": "Child 3",
    "id": "child3Click"
  },
  {
    "title": "Child 4",
    "id": "child4Click"
  },
  {
    "title": "Child 5",
    "onClick": "child5Click"
  },
  {
    "title": "Child 6",
    "onClick": "child6Click"
  },
  {
    "title": "Child 7",
    "id": "child7Click"
  },
  {
    "title": "Child 8",
    "id": "child8Click"
  }
]

请指教。

编辑:我能够使用 console.log(.flattenDeep(.map(.flattenDeep(.compact(_.map(headers, ' child '))), ' child ')))

但是是否有优化版本来做同样的事情？谢谢

Answer 1

用_.flatMap()获取 child ，过滤掉undefined值，然后再次使用_.flatMap()获取 child 属性的值:

const headers = [{"id":"name1","title":"Name 1","children":[{"title":"Children 1","child":[{"title":"Child 1","onClick":"child1Click"},{"title":"Child 2","onClick":"child2Click"}]},{"title":"CHildren 2","child":[{"title":"Child 3","id":"child3Click"},{"title":"Child 4","id":"child4Click"}]}]},{"id":"name2","title":"Name 2","children":[{"title":"Children 3","child":[{"title":"Child 5","onClick":"child5Click"},{"title":"Child 6","onClick":"child6Click"}]},{"title":"CHildren 4","child":[{"title":"Child 7","id":"child7Click"},{"title":"Child 8","id":"child8Click"}]}]},{"id":"name3","title":"Name 3"},{"id":"name4","title":"Name 4"}]

const result = _.flatMap(_.compact(_.flatMap(headers, 'children')), 'child')

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

如果您使用的是 lodash/fp，则可以使用 _.flow() 生成更具可读性的函数:

const fn = _.flow(
  _.flatMap('children'),
  _.compact,
  _.flatMap('child')
)

const headers = [{"id":"name1","title":"Name 1","children":[{"title":"Children 1","child":[{"title":"Child 1","onClick":"child1Click"},{"title":"Child 2","onClick":"child2Click"}]},{"title":"CHildren 2","child":[{"title":"Child 3","id":"child3Click"},{"title":"Child 4","id":"child4Click"}]}]},{"id":"name2","title":"Name 2","children":[{"title":"Children 3","child":[{"title":"Child 5","onClick":"child5Click"},{"title":"Child 6","onClick":"child6Click"}]},{"title":"CHildren 4","child":[{"title":"Child 7","id":"child7Click"},{"title":"Child 8","id":"child8Click"}]}]},{"id":"name3","title":"Name 3"},{"id":"name4","title":"Name 4"}]

const result = fn(headers)

console.log(result)

<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>

将 lodash 与 _.flow() 和 _.partialRight() 结合使用:

const pr = _.partialRight;

const fn = _.flow(
  pr(_.flatMap, 'children'),
  _.compact,
  pr(_.flatMap, 'child')
)

const headers = [{"id":"name1","title":"Name 1","children":[{"title":"Children 1","child":[{"title":"Child 1","onClick":"child1Click"},{"title":"Child 2","onClick":"child2Click"}]},{"title":"CHildren 2","child":[{"title":"Child 3","id":"child3Click"},{"title":"Child 4","id":"child4Click"}]}]},{"id":"name2","title":"Name 2","children":[{"title":"Children 3","child":[{"title":"Child 5","onClick":"child5Click"},{"title":"Child 6","onClick":"child6Click"}]},{"title":"CHildren 4","child":[{"title":"Child 7","id":"child7Click"},{"title":"Child 8","id":"child8Click"}]}]},{"id":"name3","title":"Name 3"},{"id":"name4","title":"Name 4"}]

const result = fn(headers)

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>