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

【问题标题】：How to flat array of object in es6?如何在 es6 中扁平化对象数组？
【发布时间】：2021-10-04 19:13:30
【问题描述】：

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

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',
    
        
    }
]

但我得到了

未捕获的类型错误：无法将 undefined 或 null 转换为对象

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

console.log('expected', expected);

谢谢

【问题讨论】：

标签： javascript ecmascript-6 ecmascript-2020

【解决方案1】：

将map() 方法与解构以及展开和休息语法一起使用。

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

在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(...) 方法。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以使用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);

【讨论】：