JavaScriptで単一文字の2つの配列を比較して差分を返す方法

本記事では、単一の文字が複数回出現する2つの文字列配列を比較し、その差分（異なる部分）を取得する方法を解説します。

問題の概要

例として、次のような2つの配列を考えます。

const arr1 = ['A', 'C', 'A', 'D'];
const arr2 = ['F', 'A', 'T', 'T'];

ここで求められているのは、両配列の同じインデックス位置にある文字同士を1つずつ照合し、一致しなかった要素だけを結果として返す処理です。

ポイントは以下のとおりです。

• 2つの配列のうち短い方の長さまでループして比較を行う
• 位置ごとに値が異なる場合、両方の値を結果配列へ追加する
• どちらか一方が長い場合、余りの部分もすべて差分として含める

実装コード

実際のコードは次のようになります。

const arr1 = ['A', 'C', 'A', 'D'];
const arr2 = ['F', 'A', 'T', 'T'];

const findDifference = (arr1, arr2) => {
    // 比較は短い方の配列の長さまで行う
    const min = Math.min(arr1.length, arr2.length);
    let i = 0;
    const res = [];
    while (i < min) {
        // 同じ位置の文字が異なる場合は両方を結果に追加
        if (arr1[i] !== arr2[i]) {
            res.push(arr1[i], arr2[i]);
        };
        ++i;
    };
    // 長さに差がある場合、余りの要素も差分として連結
    return res.concat(arr1.slice(min), arr2.slice(min));
};

console.log(findDifference(arr1, arr2));

コードの解説

1. Math.min() により2つの配列の長さの小さい方を取得し、比較範囲を決定します。
2. whileループ内で !==（厳密不等価） を使い、同じ位置の文字が異なれば arr1 と arr2 の両方の値を順に push します。
3. 最後に concat() と slice(min) を組み合わせることで、片方の配列がもう片方より長いケースでも、余った要素を漏れなく差分として扱えます。

実行結果

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

[
    'A', 'F', 'C',
    'A', 'A', 'T',
    'D', 'T'
]

出力を見ると、最初の要素「A」と「F」は異なるため両方が含まれ、2番目の「A」同士は一致しているため除外され、以降も同様に異なるペアのみが結果に格納されていることがわかります。

まとめ

このように、位置ごとの比較と余剰要素の連結を組み合わせることで、単一文字の配列間の差分をシンプルかつ効率的に求めることができます。配列の長さが異なるケースにも対応できるため、実務でも応用しやすいパターンです。