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