ES6 将对象数组映射到数组

Posted 2023-02-14

【中文标题】ES6 将对象数组映射到数组

【英文标题】：ES6 map array of objects to array

【发布时间】：2020-03-19 06:21:39

【问题描述】：

有一个对象数组

const data = [
    "name": "08/20/2018",
    "id": "name_1"
, 
    "name": "12/23/2018",
    "id": "name_2"
]

我想映射这个对象数组以便得到数组

["Date 1","08/20/2018","Date 2","12/23/2018"]

我正在尝试使用.map()

data.map((d, i) => 
 `$'Date ' + i`
  d.name
)];

但不能用第一个 (d) 参数映射名称。

【问题讨论】：

data.flatMap( (x,i) => [`Date $i+1`, x.name])

【参考方案1】：

由于输入项和输出数组项不是一对一的，因此您将无法使用.map。请改用reduce：

const data = [
    "name": "08/20/2018",
    "id": "name_1"
, 
    "name": "12/23/2018",
    "id": "name_2"
];

const output = data.reduce((a,  name , i) => 
  a.push('Date ' + (i + 1), name);
  return a;
, []);
console.log(output);

或.flatMap:

const data = [
    "name": "08/20/2018",
    "id": "name_1"
, 
    "name": "12/23/2018",
    "id": "name_2"
];

const output = data.flatMap(( name , i) => (['Date ' + (i + 1), name]));
console.log(output);

（请注意，由于数组是零索引的，如果您希望输出数组中的第一项从 1 而不是 0 开始，则必须使用 i + 1，而不是 i）

【讨论】：

是的，看来reduce方式已经优化了。

【参考方案2】：

您不能使用map，因为该方法会生成一个与原始数组具有相同项数的新数组。

但是，您可以使用flatMap（如果支持）来实现您想要的结果：

data.flatMap((name, i) => [`Date $i + 1`, name]);
console.log(data) // [ "Date 1", "08/20/2018", "Date 2", "12/23/2018" ]

基本上flatMap 就像调用map 然后flat；因此，如果我们从回调函数中为每个项目返回一个数组，则该数组将在返回之前被展平。

常规的map 调用会产生[[ "Date 1", "08/20/2018"], ["Date 2", "12/23/2018"]]。

【参考方案3】：

尝试结合map 和flatmap 方法以达到预期的效果：

const data = [
    "name": "08/20/2018",
    "id": "name_1"
, 
    "name": "12/23/2018",
    "id": "name_2"
];


const result = data.map((s, i)=> [`Date $i`, s.name]).flatMap(f=> f);
console.log(result)

或使用flat 方法：

const data = [
    "name": "08/20/2018",
    "id": "name_1"
, 
    "name": "12/23/2018",
    "id": "name_2"
];


const result = data.map((s, i)=> [`Date $i`, s.name]).flat(1);
console.log(result)

【参考方案4】：

使用 ES2019 Array.flat 一行回答：

data.map((item,index)=>([`Date$index+1`,item.name])).flat();

但在我看来，当有大量数据时，它并没有优化。

【参考方案5】：

我很欣赏上面的答案，但如果您仍然喜欢使用.map() 方法来完成您的工作，您可以这样做。

只需额外使用concat() 方法和map() 方法。让我们看看如何。

我使用了...data,map() 语句，其中... 用于数组解构。更多信息请访问https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Operators/Destructuring_assignment#Array_destructuring。

const data = [
    
        "name": "08/20/2018",
        "id": "name_1"
    , 
    
        "name": "12/23/2018",
        "id": "name_2"
    
]

output = new Array() // or just []

output = output.concat(...data.map((obj, index) => [`Date $index + 1`, obj.name]))

console.log(output)
// [ 'Date 1', '08/20/2018', 'Date 2', '12/23/2018' ]

截图