[英]ES6 map array of objects to array
There is an array of objects 有一系列对象
const data = [{
"name": "08/20/2018",
"id": "name_1"
}, {
"name": "12/23/2018",
"id": "name_2"
}]
and I would like to map this array of objects in order to get just array 我想映射这个对象数组以获得数组
["Date 1","08/20/2018","Date 2","12/23/2018"]
I'm trying using .map()
我正在尝试使用
.map()
data.map((d, i) =>
`${'Date ' + i}`
d.name
)];
but cannot map name with the first (d) parameter. 但不能使用第一个(d)参数映射名称。
Because the input items and output array items aren't one-to-one, you won't be able to use .map
. 由于输入项和输出数组项不是一对一的,因此您将无法使用
.map
。 Use reduce
instead: 请使用
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);
Or .flatMap
: 或
.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);
(note that since arrays are zero-indexed, you'll have to use i + 1
, not i
, if you want the first item in the output array to start at 1 instead of 0) (请注意,由于数组是零索引的,因此如果要使输出数组中的第一项从1而不是0开始,则必须使用
i + 1
,而不是i
)
Try to combine map
and flatmap
methods in order to achieve desired result: 尝试结合使用
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)
or using flat
method: 或使用
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)
You can't use map since that method produce a new array with the same number of items of the original ones. 您无法使用map,因为该方法会产生一个具有与原始项相同数量的项的新数组。
However, you can use flatMap (where supported) to achieve the your desired result: 但是,您可以使用flatMap (在支持的情况下)实现所需的结果:
data.flatMap(({name}, i) => [`Date ${i + 1}`, name]);
console.log(data) // [ "Date 1", "08/20/2018", "Date 2", "12/23/2018" ]
Basically flatMap
is like calling map
and then flat ; 基本上
flatMap
就像先调用map
然后再调用flat一样 ; therefore if from the callback function we returns an array per item, this array will be flattened before returned. 因此,如果从回调函数中我们为每个项目返回一个数组,则此数组在返回之前将被展平。
Regular map
call would have been produced [[ "Date 1", "08/20/2018"], ["Date 2", "12/23/2018"]]
instead. 相反
[[ "Date 1", "08/20/2018"], ["Date 2", "12/23/2018"]]
会生成常规map
调用[[ "Date 1", "08/20/2018"], ["Date 2", "12/23/2018"]]
。
One line answer using ES2019 Array.flat
: 使用ES2019
Array.flat
一行答案:
data.map((item,index)=>([`Date${index+1}`,item.name])).flat();
But in my opinion, it is not optimized when there is huge data. 但是我认为,当有大量数据时,它并没有得到优化。
I appreciate above answers but if you still prefer to use .map()
method to accomplish your work, you can do it. 我很欣赏上面的答案,但是如果您仍然喜欢使用
.map()
方法来完成工作,则可以做到。
Just with an additional use of concat()
method with map()
method. 只是将
concat()
方法与map()
方法一起使用。 Let's see how. 让我们看看如何。
I have used
...data,map()
statement where...
is used for Array destructuring.我使用了
...data,map()
语句,其中...
用于数组解构。 More information can be found at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring .可以在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' ]
Screenshot
屏幕截图
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.