JavaScript遍历两个数组并获得单个数组

Question

我有两个数组：

var arr = [ 
  { id: 2, username: 'bill'}, 
  { id: 3, username: 'ted' }];

var b = ["ted", "bill", "john"];

我怎么能这样一个数组：

var finalArr = [{id: 2, username: 'bill'},{id:3, username: 'ted'}. {id:0, username: 'john'}]

如果来自数组b用户存在于arr数组中，则添加id；如果不存在，则id为0。

我尝试过类似的方法，但是没有用

 var arr = [{ id: 2, username: 'bill' }, { id: 3, username: 'ted' } ]; var b = ["ted", "bill", "john"]; var finalArr = []; function userExists(username) { var a = arr.some(item => { if (item.username === username) { finalArr.push({ username, id: item.id }) } else { finalArr.push({ username, id: 0 }) } }) } b.forEach(el => { userExists(el) }) console.log(finalArr) 

Answer 1

使用map循环遍历b 。 使用find检查username存在于arr中。 如果是，则返回对象。 否则，返回一个id: 0的新对象

 var arr = [ { id: 2, username: 'bill'}, { id: 3, username: 'ted' }]; var b = ["ted", "bill", "john"]; const output = b.map(username => { const found = arr.find(a => a.username === username); return found || { username, id: 0 } }) console.log(output) 

Answer 2

您可以使用map和find来构建新的数组，例如

 var arr = [{ id: 2, username: 'bill' }, { id: 3, username: 'ted' } ]; var b = ["ted", "bill", "john"]; const finalArr = b.map(username => { const find = arr.find(o => o.username === username); return find ? find : { id: 0, username } }) console.log(finalArr) 

Answer 3

你可以采取Set和过滤器通过寻找到设置和删除参观项目。 最后，缺少物品。

此解决方案代表给定数据的顺序，并按names数组的顺序添加缺少的对象。

 var data = [{ id: 42, username: 'foo' }, { id: 2, username: 'bill' }, { id: 3, username: 'ted' }], names = ["ted", "bill", "john"], missing = new Set(names), result = data .filter(({ username }) => missing.delete(username)) .concat(Array.from(missing, username => ({ id: 0, username }))); console.log(result); 

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

Answer 4

您可以使用reduce方法做到这一点。

b.reduce((result, elm) => {
    const userObj = arr.find((a) => a.username === elm);
    if(userObj) {
        result.push(userObj)
    } else {
        result.push({
            id: 0,
            username: elm
        });
    }
    return result;
}, []);

检查https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce了解有关reduce的更多详细信息。

Answer 5

您可以创建一个虚拟数组以存储结果，并使用find查找现有数组。 如果未找到，则创建虚拟对象并推入数组内部。

 var arr = [ { id: 2, username: 'bill'}, { id: 3, username: 'ted' }]; var b = ["ted", "bill", "john"]; myArr = []; b.forEach(function(element) { var el=arr.find(x => x.username === element); if(el){ myArr.push(el); }else{ var dummy={}; dummy.id=0; dummy.username=element; myArr.push(dummy); } }); console.log(myArr);