jsで二次元配列で重複なしで新たな配列にしたいです

Question

二つの二次元配列があります。

const array1 = [
 ['a', 1, 'hoge', 21],
 ['b', 2, 'hoge', 21],
 ['c', 1, 'fuga', 21],
];

const array2 = [
 ['g', 13, 'hoge', 21],
 ['d', 2, 'hoge', 21],
 ['a', 1, 'fuga', 21],
]

二次元配列の内側の配列の、先頭の値を比較して、被りがないように新しい配列に入れたいです。
↓完成形

/// array1とarray2で二次元配列の内側の配列の先頭`a`だけが被っているのでその配列を弾く
const result = [
 ['a', 1, 'hoge', 21],
 ['b', 2, 'hoge', 21],
 ['c', 1, 'fuga', 21],
 ['g', 13, 'hoge', 21],
 ['d', 2, 'hoge', 21],
];

やってみたこと

思い浮かびませんでした、、、途中経過です。

  const result = []
   for (const array of array1) {
    result.push(array)
  }

  // array2の中でrowに入っていないものをpush
  for (const array of array2) {
    for (const r of result) {
      if (array[0] === r[0]) break;
    }
    
  }

Answer 1

BA決定後に失礼します。lodashの uniqBy を使うとこれでいけます。

const result = _.uniqBy(array1.concat(array2), 0);

???? サンプル

Comments

[pomo]

うおおお、なるほど！ありがとうございます！

Answer 2

素直な処理でやるのであれば、
かぶらないようにしたいのであれば、すでに追加したものを覚えておけばよいのではないでしょうか？

const result = []
const keys = []
array1.forEach((array) => {
  result.push(array)
  // 追加したものを覚えておく
  keys.push(array[0])
})

array2.forEach((array) => {
  // 追加していないもののみ
  if (!keys.includes(array[0])) {
    result.push(array)
  }
})

array1, array2のそれぞれの中でも重複している可能性がある場合は、それぞれでincludesチェックとkeysの追加をしてください。

Comments

[pomo]

うわぁ、とてもわかりやすいです
ありがとうございます！！

Answer 3

こういう感じですか？

[...array1,...array2.filter(x => !array1.map(y=>y[0]).includes(x[0]))]

Comments

[pomo]

すごい、、、ありがとうございます！！