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

Question

我有一组类似的对象。我想提取嵌套对象并将其 return 作为预期输出。我的方法已经行不通，也不确定它对大量数据进行迭代是否有效。

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

轻松实现此目的

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 2

只需使用 Spread syntax (...) 和 .map()

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

Answer 3

使用 map() 方法以及解构和扩展和剩余语法。

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

在 map() 方法的回调函数中，return 一个新对象，使用扩展语法在新创建的对象中扩展 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(...) 方法。

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

How to flat array of object in es6?

javascript

ecmascript-6

ecmascript-2020