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， 'children'））），'child'）））

但是是否有用于执行相同操作的优化版本？谢谢

Answer 1

使用let width = screenSize.width let height:CGFloat = screenSize2.height //convert screen space to cartesian space let x = ((point.x * 720) / (width)) - (width) let y = ((-point.y * 1280) / (height)) + (height)获取子项，过滤掉_.flatMap()的值，然后再次使用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)

如果您使用lodash / fp，则可以使用<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>生成更具可读性的函数：

_.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>和_.flow()中使用lodash：

_.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)

展平对象JS的嵌套数组

1 个答案: