JSで配列の再生成を行いたい

Question

オブジェクトの配列とオブジェクトの配列のアイテムを比較して、配列を再生成したいです。単純にforやforEachを使うことでこれはできるのですが、これらを使わない方法(map や filterの組み合わせ)でこれができるかどうかを知りたいと思っています。

const a = [{id: '2'},{id: '4'}];
const b = [{id: '1', name: 'a'},{id: '2', name: 'b'},{id: '3', name: 'c'},{id: '4', name: 'd'}];

// b.map(item => a[0...4].id === item.id); このようにしたいです。

// 参考： forEachを使った場合

const result = [];
b.forEach(item1 => {
  a.forEach(item2 => {
    if (item2.id === item1.id) {
      result.push(item1);
    }
  });
});

どなたか JSが得意な人教えて欲しいです。

Answer 1

filterとsomeの組み合わせでいけるかと思います。

const result = b.filter(
  itemB => a.some(itemA => itemA.id == itemB.id)
);

なお、aの要素が多い場合、事前に有効なidをaから抽出してSetなどに格納しておくことで、毎回aを全探索しないようにするほうがいいかと思います。

Answer 2

こういうことでよいでしょうか？

const result = b.filter(e1 => a.find(e2 => e1.id === e2.id));

console.log(result); // => [{id: '2', name: 'b'},{id: '4', name: 'd'}]

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/qBbEajG?editors=0012

または、 result に含める id　のSet を作っておいて、これをfilter に与える関数で使う手もあります。

const ids = new Set(a.map(e => e.id));
const result = b.filter(e => ids.has(e.id));

console.log(result); // => [{id: '2', name: 'b'},{id: '4', name: 'd'}]

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/jOWEMYY?editors=0012

あるいは、ご質問にある例のように、b のいずれかの要素の中に、a の要素の id** はすべて出現するという前提があれば**、a を map して作るということも考えられます。ただしこの前提は、（ご質問には明示的に書かれてはいませんが、）もしかするとちょっと要件から外れるかもしれませんので、参考までに。

const result = a.map(e1 => b.find(e2 => e2.id === e1.id));

console.log(result); // => [{id: '2', name: 'b'},{id: '4', name: 'd'}]

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/JjGoRBg?editors=0012

Answer 3

const result = b.filter(x =>a.map(x=>x.id).includes(x.id));