2つの配列のオブジェクトを比較し、javascriptでの一致に基づいて返します

Question

私はこのためにReactを使用していますが、コンセプトはjavascriptにあります。ですから、簡単にReactコードを残すことができれば幸いです。

私はフィルタリングする必要がある2つの配列を持っています。私の目標は、配列をマップし、そのオブジェクトのプロパティが他の配列のオブジェクトのプロパティと一致するかどうかをチェックすることです。

最初の配列は次のようになります。

[{id: 1}, {id: 2}, {id: 3}, {id: 4}] 

2つ目は、次のようになります。1つの目的は、反応を返す、他のアレイ内のオブジェクトと同じid性質を持っているのであれば

[{id: 3}, {id: 4}] 

要素/何でも。

ここで私は仕事をしなければなりませんが、インデックスを通過して比較するだけです。これは第1の配列を適切にループするように見えますが、インデックス以外のもので2番目の配列をループすることはできません。

return arr1.map((e, i) => { 
    return if (e.id === arr2[i].id) { 
    return <div>Match</div> 
    } else { 
    return <div>No Match</div> 
    } 
}) 

Answer 1

。 arr1の要素がの場合はどこでものarr2にあるかどうかを知りたいでしょうか？

私はarr2.filterを使用してarr2のすべてを検索します。

return arr1.map((e1, i) => { 
    if (arr2.filter(e2 => e2.id === e1.id).length > 0) { // If there's a match 
    return <div>Match</div> 
    } else { 
    return <div>No Match</div> 
    } 
}) 

UPDATE：だから、あなたはこのようなものを持っているでしょう をArray.someを使用して、コメントで推奨されているように、ここで良いです：

は

return arr1.map((e1, i) => { 
    if (arr2.some(e2 => e2.id === e1.id)) { // If there's a match 
    return <div>Match</div> 
    } else { 
    return <div>No Match</div> 
    } 
}) 

Answer 2

あなたは最初の配列、及び二番目の配列にincludesにfilterを使用することができます：あなたの問題はあなたがインデックス・バイ・インデックスを比較しているある

arr1 
    .filter(e => arr2.map(e2 => e2.id).includes(e.id)) 
    .map(e => return (<div>Match</div>)); 

Answer 3

あなたは、このいずれかのバニラJSを使用することができます。

（省いID）

反復：ArrayTwo

1. 1対 ArrayOneは3
2. 2との比較は、比較4
3. 3を比較して、あなたがこのループを行うと、あなたが作っているの比較をチェックしてください定義されていない（undefined.idを要求しているのでエラーになります）
4. 4は未定義と比較されます（undefined.idを要求するのでエラーになります）

要素がの場合は常にになります。最初の配列をループしてバイナリ検索を構築し、2番目の要素を素早く見つけることができます。これにより、時間の複雑さはo(n * log(n))になり、長期的には改善されます。

const myFilter = (arrayOne, arrayTwo) => { 
    return arrayOne.map((objectOne) => { 

    // Using findIndex over includes to be able to pass callback 
    // to compare the IDs 
    // returns -1 if not found 

    const matchIndex = arrayTwo.findIndex((objectTwo) => { 
     return objectOne.id === objectTwo.id 
    }) 


    if (matchIndex >= 0) { 
     return <div> Match </div> 
    } else { 
     return <div> NoMatch </div> 
    } 

    }) 
} 

あなたの時間の複雑さは、このアプローチでo(n^2)になりますが、それはあなたの状況に応じて最良の場合があり得る：あなただけのMVPを打つために探しているなら、あなたはこれを行うことができます。また、Setなどの一時的なデータ構造を使用して、o(n)領域のトレードオフの時間をo(n)にすることもできます。