Javascript фильтрует массив объектов по свойству объекта

Question

У меня есть массив 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 },
};

Как я могу вернуть vips из userList?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)
)

Answer 1

Вы можете взять 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; }

Answer 2

Вы можете использовать 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), может быть, лучше подходить к отображению випов и возвращать соответствующего пользователя, как показано ниже:

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)));

Answer 3

Вы можете использовать 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));