Javascript 使用ES6将对象数组映射到具有标头的数组数组

我想将从后端的

json

响应获得的对象数组映射到数组数组，第一行是标题数组（titles）。我将使用此数组使其可以在

csv

文件中下载

另外，我想保留一些最终用户在其

csv

文件中不感兴趣的标题/列

我的代码工作得很好，但我认为可以用更简洁的代码来完成。我对使用ES6/ES2015很在行，但我自己对扩展语法和其他ES6好东西并没有真正的经验，因此对于更好、更现代（功能性/反应性？）的方法的任何建议都非常感谢

const originalData=[
{名称：'Gizmo'，物种：'cat'，年龄：'9'，原始：'G9e76rd'，更新地址：'1318874398806'，技能：'sleeping'}，
{姓名：'Benny'，品种：'dog'，年龄：'3'，原始：'98HDo2h'，更新地址：'1318874392417'，技能：'Chassing tail'}，
{姓名：'Oscar'，品种：'cat'，年龄：'2'，原始：'9da8Ro1'，更新地址：'1318874390283'，技能：'meowing'}
]
让标题=[]
常量第一行=原始数据[0]
for（第一行中的var键）{
if（第一行hasOwnProperty（键））{
如果（！['raw'，'updated_at']包括（键））{
标题。按（键）
}
}
}
const d=originalData.map（函数（uq，i）{
返回headers.map（函数（header）{
返回原始数据[i][header]
}.绑定（本）
}.绑定（本）
const result=[headers].concat（d）
console.log（结果）

您的很好。您可以使用

Object.keys

const originalData = [
  {name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping'},
  {name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail'},
  {name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing'}
]

const headers = Object.keys(originalData[0])
    .filter(key => !['raw','updated_at'].includes(key)));  
const data = originalData.map(row => headers.map(header => row[header]));

console.log(headers, data);

---

你的很好。您可以使用

Object.keys

const originalData = [
  {name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping'},
  {name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail'},
  {name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing'}
]

const headers = Object.keys(originalData[0])
    .filter(key => !['raw','updated_at'].includes(key)));  
const data = originalData.map(row => headers.map(header => row[header]));

console.log(headers, data);

尝试使用用于使用

对象.key

和

值重新创建数组。和用户创建键集值的方法。忽略重复的键集值。
。
其


const originalData=[
{名称：'Gizmo'，物种：'cat'，年龄：'9'，原始：'G9e76rd'，更新地址：'1318874398806'，技能：'sleeping'}，
{姓名：'Benny'，品种：'dog'，年龄：'3'，原始：'98HDo2h'，更新地址：'1318874392417'，技能：'Chassing tail'}，
{姓名：'Oscar'，品种：'cat'，年龄：'2'，原始：'9da8Ro1'，更新地址：'1318874390283'，技能：'meowing'}
]
var result=[…新集合（…originalData.map（a=>Object.keys（a）））].concat（originalData.map（a=>Object.values（a）））
console.log（结果）
.as控制台包装{max height:100%！important；top:0；}
尝试使用用于使用
对象.key
和
值重新创建数组。和用户创建键集值的方法。忽略重复的键集值。
。
其


const originalData=[
{名称：'Gizmo'，物种：'cat'，年龄：'9'，原始：'G9e76rd'，更新地址：'1318874398806'，技能：'sleeping'}，
{姓名：'Benny'，品种：'dog'，年龄：'3'，原始：'98HDo2h'，更新地址：'1318874392417'，技能：'Chassing tail'}，
{姓名：'Oscar'，品种：'cat'，年龄：'2'，原始：'9da8Ro1'，更新地址：'1318874390283'，技能：'meowing'}
]
var result=[…新集合（…originalData.map（a=>Object.keys（a）））].concat（originalData.map（a=>Object.values（a）））
console.log（结果）
.as控制台包装{max height:100%！important；top:0；}
类似的内容

const originalData = [
  { name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping' },
  { name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail' },
  { name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing' }
]

const headers = Object.keys(originalData[0]).filter(key => !['raw', 'updated_at'].includes(key));
const d = originalData.map(obj => headers.map(key => obj[key]))
const result = [headers, ...d];

console.log(result)

像这样的

const originalData = [
  { name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping' },
  { name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail' },
  { name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing' }
]

const headers = Object.keys(originalData[0]).filter(key => !['raw', 'updated_at'].includes(key));
const d = originalData.map(obj => headers.map(key => obj[key]))
const result = [headers, ...d];

console.log(result)

我就是这样做的。我想如果你知道你要找哪把钥匙，我们就能好好利用它

const data = [
  {name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping'},
  {name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail'},
  {name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing'}
]

const desiredKeys = ['name', 'species', 'age', 'skill']

const result = [desiredKeys].concat(data.map(pet => desiredKeys.map(key => pet[key])))

console.log(result)

我就是这样做的。我想如果你知道你要找哪把钥匙，我们就能好好利用它

const data = [
  {name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping'},
  {name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail'},
  {name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing'}
]

const desiredKeys = ['name', 'species', 'age', 'skill']

const result = [desiredKeys].concat(data.map(pet => desiredKeys.map(key => pet[key])))

console.log(result)

基本上，您可以在过滤键上使用闭包，并映射和concat数组


const fn=（数组=>（keys=>[keys].concat（array.map（o=>keys.map（k=>o[k]））
（Object.keys（数组[0]）.filter（k=>！['raw'，'updated_at'].includes（k）），
数据=[{姓名：'Gizmo'，物种：'cat'，年龄：'9'，原始：'G9e76rd'，更新位置：'1318874398806'，技能：'sleeping'}，{姓名：'Benny'，物种：'dog'，年龄：'3'，原始：'98HDo2h'，更新位置：'1318874392417'，技能：'chassing tail'}，{姓名：'奥斯卡'，物种：'cat'，年龄：'2'，原始：'9da8Ro1'，更新位置：'1318874390283'，技能：'meowing'}，]，
结果=fn（数据）；
控制台日志（结果）
.as console wrapper{max height:100%！important；top:0；}
基本上，您可以在过滤键上使用闭包，并映射和压缩数组


const fn=（数组=>（keys=>[keys].concat（array.map（o=>keys.map（k=>o[k]））
（Object.keys（数组[0]）.filter（k=>！['raw'，'updated_at'].includes（k）），
数据=[{姓名：'Gizmo'，物种：'cat'，年龄：'9'，原始：'G9e76rd'，更新位置：'1318874398806'，技能：'sleeping'}，{姓名：'Benny'，物种：'dog'，年龄：'3'，原始：'98HDo2h'，更新位置：'1318874392417'，技能：'chassing tail'}，{姓名：'奥斯卡'，物种：'cat'，年龄：'2'，原始：'9da8Ro1'，更新位置：'1318874390283'，技能：'meowing'}，]，
结果=fn（数据）；
控制台日志（结果）
.as console wrapper{max height:100%！important；top:0；}
我想指出，对象的键顺序并不是完全由规范“固定”的

如果您的
原始数据
中的第一只动物以
物种
属性开头，则整个表格将按该列顺序格式化

因此，我建议您在数组中显式定义列，顺序很重要

注意，在下面的示例中，我交换了Gizmo的属性声明顺序。将这些数据放在您自己的代码中，第一列将是物种。（至少在我的浏览器中是这样，我想它甚至可以在不同的浏览器中有所不同？）


const数据=[
{物种：'cat'，名称：'Gizmo'，年龄：'9'，原始：'G9e76rd'，更新位置：'1318874398806'，技能：'sleeping'}，
{姓名：'Benny'，品种：'dog'，年龄：'3'，原始：'98HDo2h'，更新地址：'1318874392417'，技能：'Chassing tail'}，
{名字：'Oscar'，品种：'cat'，年龄：'2'，生的：'9da8Ro1'，向上