配列をマージしつつ、重複を取り除く方法

Question

連想配列が入った配列が2つあり、idの重複を除いてマージする必要があります。
そのため、下記の通り処理しました。

const member1 = [
  { id: 1, name: 'john' },
  { id: 2, name: 'paul' },
  { id: 3, name: 'george' },
  { id: 4, name: 'ringo' }
];

const member2 = [
  { id: 1, name: 'john' },
  { id: 5, name: 'mick' },
  { id: 6, name: 'jimi' },
  { id: 7, name: 'mike' }
];

const mergedMembers = member1.concat(member2);
const result = [...mergedMembers]
      .filter((member, index, self) => self.findIndex(s => member.id  === s.id) === index);
console.log(result);

他のアプローチがあれば、ご教授いただけますと幸いです。
（なるべくスマートな方法が嬉しいです）

追記

出力結果について
出力結果の配列の順序にこだわりはありません。

改善したいポイント
ワンライナーで処理したことによって可読性がやや低く感じるので、これを改善したい。

Comments

[m.ts10806]

このコードも随分スマートに思いましたが（個人の感想です）、どのような問題があるのでしょうか。
アンケート的なものや実際に課題や問題がないものですと非推奨になってしまいます。
回答の方向性や実際の課題を明示してください。

[maisumakun]

出力結果の配列の順序は今のものと揃えたほうがいいですか、それとも特にこだわりはありませんか？

Answer 1

const mergedMembers = member1.concat(member2);
const result = [...mergedMembers]

この部分、
concatを使ってから展開するくらいなら、最初からこのように書きましょう。

const result = [...member1, ...member2]

---

filterはindex値の管理が煩雑になるので、
reduceを使って全上書き構想にした方が実装しやすいと思います。

リーダブルコードに書いてある内容ですが、
読むのに必要な時間を最小にすることが読みやすいコードなので、
filterであれこれ頑張って強引に1行にするより、reduceを使った方が良いかも？

const member1 = [
  { id: 1, name: 'john' },
  { id: 2, name: 'paul' },
  { id: 3, name: 'george' },
  { id: 4, name: 'ringo' }
];
const member2 = [
  { id: 1, name: 'john' },
  { id: 5, name: 'mick' },
  { id: 6, name: 'jimi' },
  { id: 7, name: 'mike' }
];

var tmp = [...member1, ...member2]
  .reduce((obj, it) => {
    obj[it.id] = it;
    return obj;
  }, {});
const result = Object.values(tmp);

まぁ、そもそもネイティブのJSは機能が圧倒的に足りていないので、
スマート言うなら最初からLodash使えというシンプルな話になります。
_.uniqByで一撃なので論じるまでもありません。

const result = _.uniqBy([...member1, ...member2], 'id');

Answer 2

Mapで保管して重複除去、という方法も考えられます（iteratorが必要なので、IEでは動きません）。

// 今と順序は変わるけど、簡潔に済ませる
const map = new Map;

member1.concat(member2).forEach(item => map.set(item.id, item));
const result = [...map.values()];

Answer 3

member1, member2 にはそれぞれ重複がないと仮定しますが、 member2 から member1 に含まれる id を取り除いた配列を連結させてもいいと思います。

const result = member1.concat(member2.filter(m2 => 
  ! member1.map(m1 => m1.id).includes(m2.id)
));
console.log(result);

Answer 4

フォーマットは変わりますが、idをキーとする Map を使うのがスマートと思います。

member1.concat(member2).reduce((map, user) => (map.set(user.id, user.name), map), new Map);

外出先につき、コードは未検証なのでケアレスミスがあるかもしれませんが、参考までに。
先に存在した要素を優先させる場合は Map#has で分岐させます。

Re; os1_nmnm さん

Comments

[think49]

回答が重複してしまいました。

Answer 5

idだけみればいいなら

const member1 = [
  { id: 1, name: 'john' },
  { id: 2, name: 'paul' },
  { id: 3, name: 'george' },
  { id: 4, name: 'ringo' }
];

const member2 = [
  { id: 1, name: 'john' },
  { id: 5, name: 'mick' },
  { id: 6, name: 'jimi' },
  { id: 7, name: 'mike' }
];
var m=member1.concat(member2.filter(function(x){
  return member1.map(function(x){
    return x.id;
  }).indexOf(x.id)<0;
}));

console.log(m);

Answer 6

こちらはどうでしょう？

const result = [...member1, ...member2]
  .reduce((acc, {id, name}) => (acc[id] = acc[id] || name, acc), [])
  .reduce((acc, name, id) => [...acc, {id, name}], []);
console.log(result);

.
もうひとつ思いついたので追記します。

const memo = [];
const result = [...member1, ...member2]
  .reduce((acc, {id, name}) => memo[id]
    ? acc    // メモ済みのIDだったらaccに追加しないで飛ばす
    : (memo[id] = true, [...acc, {id, name}])  // 初出のIDならメモして、追加
  , []);
console.log(result);

Answer 7

setを使ってみてはどうですか？
distinctでもいいかもしれません。

Comments

[papinianus]

オブジェクトを要素とすることが主な用途であることからすると、Setでは対応できないのでは(別物と判定してくれない)？

[think49]

あえて、Setを使うなら、JSON化したString値を格納でしょうか。
ただし、id値の重複において、name値も重複していないと重複判定で漏れてしまうデメリットがあります。