ES6将对象数组映射为数组

Question

有一个对象数组

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) 参数进行映射。

- corry

---

data.flatMap( (x,i) => [日期 ${i+1}, x.name]) 该代码将每个数据对象的名称与其所在索引值一起转换为一个新数组，并以“日期”作为新名称的前缀。 - maksadbek

Answer 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。

- CertainPerformance

---

是的，似乎reduce方法被优化了。 - Vahid Alimohamadi

Answer 2

尝试结合使用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)

- StepUp

Answer 3

使用ES2019的一行代码：Array.flat：

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

但在我看来，当存在大量数据时，它并不是最优化的。

- Vahid Alimohamadi

Answer 4

由于该方法会生成一个与原始数组具有相同数量项目的新数组，因此您无法使用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"]]。

- ZER0

Answer 5

我很感激上面的回答，但如果你仍然喜欢使用.map()方法来完成你的工作，你也可以这样做。

只需在map()方法中额外使用concat()方法即可。让我们看看如何操作。

我使用了...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' ]

截图

- hygull