Javascript通过对象的属性过滤对象数组答案

【问题标题】：Javascript filter an array of objects by a property of objectJavascript通过对象的属性过滤对象数组
【发布时间】：2019-05-29 11:22:13
【问题描述】：

我有一个包含用户基本信息的userList 数组。

this.state = {
    userList: [
        { name:"Ann", number:123456789 },
        { name:"Cathy", number:123456789 },
        { name:"Peter", number:123456789 },
        { name:"Ben", number:123456789 },
    ],
    vips: [ 
        { username:"Ann", years:2018 },
        { username:"Peter", years:2019 },
};

如何从userList 返回vips？ vips.username 等于 userList.name

vips_return: [
        { name:"Ann", number:123456789 },
        { name:"Peter", number:123456789 },
]

我尝试使用 .filter 和 .includes 但我不确定如何处理对象。

const vips_return = userList.filter((user)=>
    vips.includes(user.name)
)

【问题讨论】：

标签： javascript arrays reactjs filter

【解决方案1】：

您可以使用reduce 并获取userList 中的用户，这些用户也在vips 中

const input = {
    userList: [
        { name:"Ann", number:123456789 },
        { name:"Cathy", number:123456789 },
        { name:"Peter", number:123456789 },
        { name:"Ben", number:123456789 },
    ],
    vips: [ 
        { username:"Ann", years:2018 },
        { username:"Peter", years:2019 },
    ]
};

console.log(input.userList.reduce((acc, val) => { 
  if(!!input.vips.find(vip => vip.username === val.name)) { 
    acc.push(val);
  } 
  return acc; 
}, []));

考虑到vips 的长度应该小于userList 的长度，或者最大相同（vips 应该是userList 的子集），也许更好的方法是映射vips 并取回对应的用户，如下：

const input = {
    userList: [
        { name:"Ann", number:123456789 },
        { name:"Cathy", number:123456789 },
        { name:"Peter", number:123456789 },
        { name:"Ben", number:123456789 },
    ],
    vips: [ 
        { username:"Ann", years:2018 },
        { username:"Peter", years:2019 },
    ]
};

console.log(input.vips.map(vip => input.userList.find(user => user.name === vip.username)));

【讨论】：

【解决方案2】：

您可以使用find 或findIndex：

userList.filter(user => vips.find(vip => vip.username === user.name));

find 如果在数组中找不到该值，则返回undefined，因此将其过滤掉。

如果您经常这样做和/或拥有大量数据集，则应先构建一组名称：

const vipNames = new Set(vips.map(vip => vip.username));

userList.filter(user => vipNames.has(user.name));

【讨论】：

我认为你的vip字段应该是username
如何获取类型的值？在.find之后
@susuwatari：我不明白这个问题。

【解决方案3】：

您可以通过Map 获取想要的对象。

var state = { userList: [{ name: "Ann", number: 123456789 }, { name: "Cathy", number: 123456789 }, { name: "Peter", number: 123456789 }, { name: "Ben", number: 123456789 }], vips: [{ username: "Ann", years: 2018 }, { username: "Peter", years: 2019 }] },
    user = new Map(state.userList.map(o => [o.name, o])),
    vips = state.vips.map(({ username }) => user.get(username));
    
console.log(vips);

.as-console-wrapper { max-height: 100% !important; top: 0; }

或者使用双重映射采取更短的方法

var state = { userList: [{ name: "Ann", number: 123456789 }, { name: "Cathy", number: 123456789 }, { name: "Peter", number: 123456789 }, { name: "Ben", number: 123456789 }], vips: [{ username: "Ann", years: 2018 }, { username: "Peter", years: 2019 }] },
    vips = state.vips
        .map(({ username }) => username)
        .map(Map.prototype.get, new Map(state.userList.map(o => [o.name, o])));
    
console.log(vips);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：