Question

我正在将一组数据格式化为一个用于表的数组。我有这样的数据集

data = [{
  hello: 'world',
  children: [{
    foo: 'bar'
  }]
}]

我希望将这些数据放入一个数组中，同时用parent: true bool标记所有父节点。因此，我可以将它们全部放入表中，但在父子之间仍然有一个区别因素。我知道我可以为该表循环两次，但是这样做是出于可重用的目的。我下面有一个工作代码块。

  formattedData (data) {
    const formattedData = []
    data.map(dataPoint => {
      let obj = dataPoint
      obj['parent'] = true
      formattedData.push(dataPoint)
      if (dataPoint.children) {
        dataPoint.children.map(c => {
          formattedData.push(c)
        })
      }
    })
    return formattedData
  }

结果数据如下：

data = [{
  hello: 'world', 
  parent: true
}, {
  foo: 'bar'
}]

只需检查一下是否有更好/更有效/更漂亮的方式（或者我做的方式就是应该如何做）。预先感谢！

Answer 1

如果您打算用let obj = dataPoint复制对象而不改变传递给函数的参数，并且该对象是简单的Object，则可以使用对象传播来复制并添加财产
Array.prototype.flatMap现在存在（并且可以像其他所有垫片一样向后兼容）
如果不使用this，为什么会成为类方法？

const getFormattedData = data =>
  data.flatMap(dataPoint => [
    {...dataPoint, parent: true},
    ...dataPoint.children || [],
  ])

或者，如果您还想删除children属性：

const getFormattedData = data =>
  data.flatMap(({children, ...dataPoint}) => [
    {...dataPoint, parent: true},
    ...children || [],
  ])

Answer 2

您可以使用单个Array.reduce，Object.assign和一些ES6解构来做到这一点：

const data = [{ hello: 'world', children: [{ foo: 'bar' }], }, { hello: 'world2' }]

const result =  data.reduce((r, {children, ...other}) => {
  if(children){
    r.push(Object.assign({}, other, {parent: true}))
    r.push(...children)		
  } else r.push(Object.assign({}, other))
  return r	
}, [])

console.log(result)

但是，如果您还有更多的children级别，则必须使用recursive方法，但是基于似乎并非如此的输入数据。

如果您不关心readability，也可以进一步缩短：

const data = [{ hello: 'world', children: [{ foo: 'bar' }], }, { hello: 'world2' }]

const result =  data.reduce((r, {children, ...other}) => {
  r.push(Object.assign({}, other, children ? {parent: true} : {}))
  children ? r.push(...children) : null
  return r	
}, [])

console.log(result)

Javascript-展平嵌套的对象数组。变得漂亮吗？

2 个答案: