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）参数映射名称。

Answer 1

由于输入项和输出数组项不是一对一的，因此您将无法使用ItemSpacing。请改用::-webkit-scrollbar { width: 8px; // for vertical scroll bar height: 8px; // for horizontal scroll bar } // for Firefox add this class as well .thin_scroll{ scrollbar-width: thin; // auto | thin | none | <length>; } ：

.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);

（请注意，由于数组是零索引的，因此如果要使输出数组中的第一项从1而不是0开始，则必须使用.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);。）

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)

Answer 3

您不能使用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"]]呼叫。

Answer 4

使用ES2019 Array.flat的一行答案：

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

但是我认为，当有大量数据时，它并没有得到优化。

Answer 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' ]

  

屏幕截图