js 处理对象数组 + map 筛选出指定字段数据 + filter过滤重复数据/指定数据
复制const res = [{
id: 1,
name: 'zhangsan',
age: 16,
gender: 0
}, {
id: 1,
name: 'zhangsan',
age: 16,
gender: 0
}, {
id: 2,
name: 'lisi',
age: 20,
gender: 1
}];
获取res中的id和name
复制/*
[
{
"id": 1,
"name": "zhangsan"
},
{
"id": 1,
"name": "zhangsan"
},
{
"id": 2,
"name": "lisi"
}
]
*/
最简洁
const data = res.map(({id,name})=>({id,name}));
或者
const data = res.map(v => ({id: v.id, name: v.name}))
或者
const data = res.map(function(item) {
return {
id: item.id,
name: item.name
}
})
或者
const data = res.map(item => ({ id: item.id, name: item.name }))
别名
/*
[
{
"code": 1,
"name": "zhangsan"
},
{
"code": 1,
"name": "zhangsan"
},
{
"code": 2,
"name": "lisi"
}
]
*/
const data = res.map(({ id, name }) => ({ code: id, name }))
filter 过滤
复制/*
result :
[
{
"id": 1,
"name": "zhangsan"
},
{
"id": 2,
"name": "lisi"
}
]
*/
/* 方法一:forEach 遍历过滤 */
const result = []
data.forEach((item)=>{
if(!result.some(m=> m.id === item.id)) {
result.push(item);
}
});
/* 方法二: 使用Set数据结构去重 */
const result1 = Array.from(new Set(data.map(item=>item.id)))
.map(id => {
return data.find(item => item.id === id)
});
/* 方法三:filter */
onst result2 = data.filter((item,index,data)=>{
return data.findIndex(t=>t.id===item.id) === index;
})
/* 方法四:reduce */
const result3 = data.reduce((prev, cur)=>{
if(!prev.some(item=>item.id===cur.id)) {
prev.push(cur)
}
return prev;
},[])
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!