[英]Javascript filter an array of objects by a property of object
I have an array of userList
which include user basic information. 我有一个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 },
};
How I can return of the vips
from userList
? 我如何从userList
返回vips
? vips.username
equals to userList.name
vips.username
等于userList.name
vips_return: [
{ name:"Ann", number:123456789 },
{ name:"Peter", number:123456789 },
]
I tried using .filter and .includes but I am not sure how to deal with objects. 我尝试使用.filter和.includes,但是我不确定如何处理对象。
const vips_return = userList.filter((user)=>
vips.includes(user.name)
)
You can use find
or findIndex
: 您可以使用find
或findIndex
:
userList.filter(user => vips.find(vip => vip.username === user.name));
find
returns undefined
if the value cannot be found in the array, so those are filtered out. 如果在数组中找不到该值,则find
返回undefined
,因此将其过滤掉。
If you do this a lot and/or have a large data set, you should build a set of names first: 如果您经常这样做和/或拥有大量数据集,则应首先构建一组名称:
const vipNames = new Set(vips.map(vip => vip.username));
userList.filter(user => vipNames.has(user.name));
You can use a reduce
and get the users in userList
which are also in vips
您可以使用reduce
并在也有vips
userList
获取用户
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; }, []));
Considering that the length of vips
should be lower than the one of userList
, or at max the same ( vips
should be a subset of userList
), maybe a better approach is to map over the vips and get back the corresponding user, like below: 考虑到vips
的长度应小于userList
的长度,或最大等于vips
的长度( 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)));
You could take a Map
and get the wanted objects. 您可以获取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; }
Or take a shorter approach with a double mapping 或者采用较短的方法进行双重映射
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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.