展平嵌套的 JavaScript 对象

Question

我有一个嵌套对象，我想将它展平/映射成一个单层、类似表格的对象。

[{
    a: 1,
    b: 2,
    c: [{
        x: 10,
        y: 20
    }, {
        x: 30,
        y: 40
    }]
}, {
    a: 3,
    b: 4,
    c: [{
        x: 50,
        y: 60
    }, {
        x: 70,
        y: 80
    }]
}]

由此，我想得到这样的东西：

[{
    a: 1,
    b: 2,
    x: 10,
    y: 20
}, {
    a: 1,
    b: 2,
    x: 30,
    y: 40
}, {
    a: 3,
    b: 4,
    x: 50,
    y: 60
}, {
    a: 3,
    b: 4,
    x: 70,
    y: 80
}]

当然，我可以简单地用两个 for 循环遍历对象并将结果信息放在一个单独的数组中，但我想知道是否有更简单的解决方案。我已经尝试过使用flatMap。如果我只想要嵌套对象的c 部分，它就可以工作，但我不知道如何将a 和b 映射到这个对象。

正如你们中的一些人要求提供一些工作代码，应该这样做（未经测试）：

let result = [];

for (const outer of myObj)
  for (const inner of outer.c)
    result.push({a: outer.a, b: outer.b, x: inner.x, y: inner.y});

问题是，如果有一种功能性的单线甚至另一种更好的方法。实际上，我的对象由四层组成，嵌套的 for 循环很快就会变得混乱。

Answer 1

使用两个减速器来扁平化你的结构

const input = [{
  a: 1,
  b: 2,
  c: [{
    x: 10,
    y: 20
  }, {
    x: 30,
    y: 40
  }]
}, {
  a: 3,
  b: 4,
  c: [{
    x: 50,
    y: 60
  }, {
    x: 70,
    y: 80
  }]
}]

const result = input.reduce((acc_0, x) => {
  return [...acc_0, ...x.c.reduce((acc_1, y) => {
    const obj = {
      a: x.a,
      b: x.b,
      x: y.x,
      y: y.y
    }
    acc_1.push(obj);
    return acc_1;
  }, [])]
}, []);

console.log(result)

Answer 2

flatMap 解决方案如下所示：

const result = myObj.flatMap(outer =>
  outer.c.map(inner =>
    ({a: outer.a, b: outer.b, x: inner.x, y: inner.y})
  )
);

当然，如果您的对象有多个层，而不仅仅是两个，甚至可能有多个或未知的具有这种嵌套的属性，您应该尝试实现递归解决方案。或者是一个迭代的，循环遍历一组属性名称（例如，["c"]）并逐级应用展平。

Answer 3

您可以在属性“c”上使用flatMap 方法和map：

var input = [{ a: 1, b: 2, c: [{ x: 10, y: 20 }, { x: 30, y: 40 }] }, { a: 3, b: 4, c: [{ x: 50, y: 60 }, { x: 70, y: 80 }] }];

const output = input.flatMap(obj =>
  obj.c.map(arr => ({a: obj.a, b: obj.b, x: arr.x, y: arr.y}))
);

console.log(output);

Answer 4

理想情况下，解决方案将需要一些东西来说明开始将对象分类为完整对象的程度，一个简单的解决方案就是通过您想要的级别。如果你不想通过关卡，你可以做一个检查，如果没有一个属性有数组，那么你会把它归类为一个完整的记录，但当然这个逻辑是你需要确认的。

如果您想要一个适用于多个级别的通用版本，如果您通过了级别并使用递归，您可以执行以下操作 ->

const a=[{a:1,b:2,c:[{x:10,y:20},{x:30,y:40}]},{a:3,b:4,c:[{x:50,y:60},{x:70,y:80}]}];


function flattern(a, lvl) {
  const r = [];
  function flat(a, l, o) {
    for (const aa of a) {
      o = {...o};
      for (const [k, v] of Object.entries(aa)) {
        if (Array.isArray(v) && l < lvl) flat(v, l + 1, o);
        else o[k] = v;
      }
      if (l === lvl) r.push(o);
    }
  }
  flat(a, 1);
  return r;
}

console.log(flattern(a, 2));
//console.log(flattern(a, 1));

Answer 5

使用reduce的解决方案之一是：

const list = [{
    a: 1,
    b: 2,
    c: [{
        x: 10,
        y: 20
    }, {
        x: 30,
        y: 40
    }]
}, {
    a: 3,
    b: 4,
    c: [{
        x: 50,
        y: 60
    }, {
        x: 70,
        y: 80
    }]
}]

const flatten = (arr) => {
  return arr.reduce((flattened, item) => {
    return [
      ...flattened,
      ...item.c.reduce((flattenedItem, i) => {
        return [
          ...flattenedItem,
          {
            a: item.a,
            b: item.b,
            x: i.x,
            y: i.y
          }
        ]
      }, [])
    ]
  }, [])
}

console.log(flatten(list));