JavaScriptで配列をマージして重複項目を削除する方法：concat、reduce、Lodash.jsを使った3つの方法

JavaScriptで2つの配列をマージして重複項目を削除するには、いくつかの方法があります。ここでは、代表的な3つの方法を紹介します。

方法1: Array.prototype.concat()とSetオブジェクト

1. Array.prototype.concat()を使用して2つの配列を結合します。
2. Setオブジェクトを使用して重複項目を削除します。
3. Setオブジェクトを配列に変換します。

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];

const mergedArr = [...new Set([...arr1, ...arr2])];

console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

方法2: Array.prototype.reduce()

1. 重複項目をチェックし、重複している場合は追加しません。

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];

const mergedArr = arr1.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []).concat(arr2.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []));

console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

方法3: Lodash.js

Lodash.jsのようなライブラリを使用する場合は、より簡単にマージと重複項目の削除を行うことができます。

const _ = require('lodash');

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];

const mergedArr = _.uniq(_.concat(arr1, arr2));

console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

方法1: Array.prototype.concat()とSetオブジェクト

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];

const mergedArr = [...new Set([...arr1, ...arr2])];

console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

方法2: Array.prototype.reduce()

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];

const mergedArr = arr1.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []).concat(arr2.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []));

console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

方法3: Lodash.js

const _ = require('lodash');

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];

const mergedArr = _.uniq(_.concat(arr1, arr2));

console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

実行方法

上記のサンプルコードを実行するには、Node.jsが必要です。

1. ファイルを .js 拡張子で保存します。
2. コマンドプロンプトまたはターミナルを開き、ファイルを保存したディレクトリに移動します。
3. 以下のコマンドを実行します。

node ファイル名.js

出力結果

すべての方法で、以下の出力結果が表示されます。

[1, 2, 3, 4, 5, 6]

補足

上記のサンプルコードは、基本的な例です。実際のコードでは、以下の点に注意する必要があります。

• 配列の要素がオブジェクトの場合、=== 演算子ではなく、オブジェクトの比較関数を使用する必要があります。
• 重複項目を削除する前に、配列の順序を保ちたい場合は、Array.prototype.sort()

JavaScriptで2つの配列をマージして重複項目を削除する他の方法

方法4: Array.prototype.filter()

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];

const mergedArr = [...arr1, ...arr2].filter((item, index, arr) => {
  return arr.indexOf(item) === index;
});

console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

方法5: ES6スプレッド構文とSetオブジェクト

1. ES6スプレッド構文を使用して2つの配列を結合します。

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];

const mergedArr = [...new Set([...arr1, ...arr2])];

console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

方法6: Underscore.js

const _ = require('underscore');

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];

const mergedArr = _.uniq(_.union(arr1, arr2));

console.log(mergedArr); // [1, 2, 3, 4, 5, 6]