js 处理对象数组 + map 筛选出指定字段数据 + filter过滤重复数据/指定数据-526互联

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