Question

如何在 es6 中扁平化对象数组？

2021-07-29

953

javascript ecmascript-6 ecmascript-2020

我有一个类似的对象数组。我想提取嵌套对象并将其作为预期输出返回。我的方法已经不起作用，也不确定它是否能有效地迭代大量数据。

const data = [
    {
        name: 'Micheal',
        desc: 'Micheal',
        empObj: {
            empId: 1,
            empName: 'Micheal',
            country: 'UK',
        }
    },
    {
        name: 'Allen',
        desc: 'Allen',
        empObj: {
            empId: 2,
            empName: 'Allen',
            country: 'Germany',

        }
    },
    {
        name: 'Rose',
        desc: 'Rose',
        empObj: {
            empId: 3,
            empName: 'Rose',
            country: 'USA',
        }
    }
];

我需要平坦化/转换数据，例如

[
    {
        name: 'Micheal',
        desc: 'Micheal',
        empId: 1,
        empName: 'Micheal',
        country: 'UK',
    },
    {
        name: 'Allen',
        desc: 'Allen',
        empId: 2,
        empName: 'Allen',
        country: 'Germany',
    },
    
    {
        name: 'Rose',
        desc: 'Rose',    
        empId: 3,
        empName: 'Rose',
        country: 'USA',
    
        
    }
]

但我得到的是

Uncaught TypeError: Cannot convert undefined or null to object

const expected = Object.keys(data.empObj).reduce(function(r, k) {
  return r.concat(k, object.empObj[k]);
}, []);

console.log('expected', expected);

谢谢

Answer 1

将 map() 方法与解构、扩展和剩余语法结合使用。

我们可以通过解构 empObj 键并使用剩余语法收集数组中每个对象的其余属性来实现所需的输出。

在 map() 方法的回调函数中，返回一个新对象，使用扩展语法扩展 empObj 以及新创建的对象中的其他属性。

const data = [
  { name: 'Micheal', desc: 'Micheal', empObj: { empId: 1, empName: 'Micheal', country: 'UK' } },
  { name: 'Allen', desc: 'Allen', empObj: { empId: 2, empName: 'Allen', country: 'Germany' } }
];

const result = data.map(({ empObj, ...rest }) => {
  return { ...rest, ...empObj };
});

console.log(result);

您的代码抛出错误的原因是 data 是一个数组，因此 data.empObj 未定义，并且您将这个未定义的值传递给 Object.keys(...) 方法。

Answer 2

您可以使用 map 轻松实现此目的

data.map(({ name, desc, empObj }) => ({ name, desc, ...empObj }))

const data = [
  {
    name: "Micheal",
    desc: "Micheal",
    empObj: {
      empId: 1,
      empName: "Micheal",
      country: "UK",
    },
  },
  {
    name: "Allen",
    desc: "Allen",
    empObj: {
      empId: 2,
      empName: "Allen",
      country: "Germany",
    },
  },
  {
    name: "Rose",
    desc: "Rose",
    empObj: {
      empId: 3,
      empName: "Rose",
      country: "USA",
    },
  },
];

const result = data.map(({ name, desc, empObj }) => ({ name, desc, ...empObj, }));

console.log(result);

Answer 3

只需使用 Spread 语法 (...) 和 .map()

const output = data.map(d => ({name: d.name, desc: d.desc, ...d.empObj}))