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; 
},[])

参考文章:https://www.cnblogs.com/lwlblog/p/13570188.html

https://juejin.cn/post/7003646475162877989

posted @   五字妹妹实在是棒  阅读(1678)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
欢迎wuzimeimei来到《js 处理对象数组 + map 筛选出指定字段数据 + filter过滤重复数据/指定数据 - 五字妹妹实在是棒 - 博客园》
返回顶部
点击右上角即可分享
微信分享提示