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

您可以使用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));

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的子集），也许更好的方法是在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)));

Answer 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; }

Javascript按对象的属性过滤对象数组

3 个答案: