ES6 将对象数组映射到数组答案

【问题标题】：ES6 map array of objects to arrayES6 将对象数组映射到数组
【发布时间】：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])

标签： javascript arrays javascript-objects array.prototype.map

【解决方案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' ]

截图

【讨论】：