有如下数组
[
{
code: 1,
data: [
{ title: 'haha', size: 123 },
{ title: 'xixi', size: 456 }
]
},
{
code: 2,
data: [
{ title: 'cscs', size: 4344 },
{ title: 'vvv', size: 555 }
]
}
]
要求整理成如下格式
[
{ code: 1, title: 'haha', size: 123 },
{ code: 1, title: 'xixi', size: 456 },
{ code: 2, title: 'cscs', size: 4344 },
{ code: 2, title: 'vvv', size: 555 }
]
思路:既然是数组,那么肯定要使用数组的一些方法
首先我想到的是使用 reduce
,因为这种就是对数组就行累加zz
// 首先写成这样子
const result = data.reduce((acc, cur) => {
return acc
}
, [])
接着我们拿到了数组第一层的每一项
code: 1,
data: [
{ title: 'haha', size: 123 },
{ title: 'xixi', size: 456 }
]
}
// 即要求以上结构变成
{ code: 1, title: 'haha', size: 123 },
{ code: 1, title: 'xixi', size: 456 },
很容易想到使用 forEach
遍历即可
cur.data.forEach(item => {
acc.push({
code: cur.code,
...item // 即展开数组(
})
})
即最终答案:
const result = data.reduce((acc, cur) => {
cur.data.forEach(item => {
acc.push({
code: cur.code,
...item
})
})
return acc
}
, [])
使用两次 map
外加一次 拍平
data.map(item => item.data.map(v =>({code: item.code, ...v}))).flat()
将题解一的 foreach + push
用 map
代替
const result = data.reduce((acc, cur) => {
return acc.concat(cur.data.map((item)=>{
item.code = cur.code
return item
}))
}
, [])
优化题解三, 删掉 return
const result = data.reduce((acc, cur) =>
// 箭头函数不用 return 值 :D
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
acc.concat(
cur.data.map((item) => ({ // 多加一个括号,是为了把返回值当做一个参数返回
...item,
code: cur.code
})
)
)
, [])
result.sort((a, b) => a.title > b.title ? 1 : -1)