2つの配列から共通しない要素を抽出するJavaScriptプログラム

ここに、2つの数値の配列があるとします。

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

このような2つの配列を受け取り、両方の配列に共通して存在しない要素(片方にしかない要素)だけを返すJavaScript関数を作成する必要があります。

実装の考え方

この問題は、以下の手順で解決できます。

• 1つ目の配列をループで走査し、その要素が2つ目の配列に存在しない場合は結果に追加する
• 同様に、2つ目の配列を走査し、1つ目の配列に存在しない要素を結果に追加する

要素の存在確認には、indexOf()メソッドを使用します。このメソッドは、指定した要素が見つからない場合に-1を返すため、これを利用して共通しない要素を判定できます。

コード例

以下が実際のコードです。

const arr1 = [12, 54, 2, 4, 6, 34, 3];
const arr2 = [54, 2, 5, 12, 4, 1, 3, 34];
const unCommonArray = (first, second) => {
   const res = [];
   for(let i = 0; i < first.length; i++){
      if(second.indexOf(first[i]) === -1){
         res.push(first[i]);
      }
   };
   for(let j = 0; j < second.length; j++){
      if(first.indexOf(second[j]) === -1){
         res.push(second[j]);
      };
   };
   return res;
};
console.log(unCommonArray(arr1, arr2));

出力結果

コンソールには以下のように出力されます。

[ 6, 5, 1 ]

コードの解説

このコードでは、まずアロー関数unCommonArrayを定義しています。内部では空の配列resを用意し、1つ目のforループでfirstの各要素がsecondに含まれていないかをindexOf()でチェックします。-1が返された場合(=存在しない場合)、その要素をresに追加します。2つ目のforループでも同様の処理を行い、最終的にresを返します。

その結果、6(arr1のみに存在)、5と1(arr2のみに存在)が出力されます。

補足：よりモダンな書き方

ES6以降では、filter()メソッドとincludes()メソッドを組み合わせることで、同じ処理をより簡潔に記述できます。

const unCommonArray = (first, second) =>
   first.filter(el => !second.includes(el))
        .concat(second.filter(el => !first.includes(el)));

console.log(unCommonArray(arr1, arr2)); // [ 6, 5, 1 ]

どちらの方法でも結果は同じですが、filter()を使った書き方は可読性が高く、意図が伝わりやすいのが特徴です。用途やチームのコーディング規約に応じて使い分けるとよいでしょう。