JavaScriptで2つの配列を比較し、欠けている要素をnullで埋めた配列を作成する方法

問題の概要

今回は、2つの配列を比較して新しい配列（第3の配列）を生成する関数を作成します。生成される配列には、2番目の配列のすべての要素がそのまま格納され、1番目の配列には存在しているものの2番目の配列から欠けている要素の位置には null が埋め込まれます。

たとえば、次のような2つの配列があるとします。

const arr1 = ['f', 'g', 'h'];
const arr2 = ['f', 'h'];

この場合、期待される出力は以下のとおりです。1番目の配列に含まれる 'g' は2番目の配列に存在しないため、その位置が null になっています。

const output = ['f', null, 'h'];

実装コード

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

const arr1 = ['f', 'g', 'h'];
const arr2 = ['f', 'h'];
const compareAndFill = (arr1, arr2) => {
    let offset = 0;
    const res = arr1.map((el, i) => {
        if (el === arr2[offset + i]) {
            return el;
        };
        offset--;
        return null;
    });
    return res;
};
console.log(compareAndFill(arr1, arr2));

コードの解説

この関数の仕組みを順番に見ていきましょう。

• offset 変数： 2つの配列の間で生じるインデックスのずれを管理します。要素が一致しなかった場合（2番目の配列に欠けている場合）は offset をデクリメントすることで、以降の比較時にインデックスを正しく調整します。
• map メソッド： 1番目の配列（arr1）の各要素に対して処理を実行し、新しい配列 res を構築します。
• 一致判定： 現在の要素 el が、arr2 の「offset + i」番目の要素と一致すれば、その要素をそのまま返します。
• 不一致の場合： その要素は2番目の配列に存在しないため、null を返し、同時に offset を減らしてインデックスのずれを記録します。

出力結果

このコードをコンソールで実行すると、次の出力が得られます。

[ 'f', null, 'h' ]

ご覧のとおり、'g' の位置だけが null に置き換えられ、それ以外の要素は元の順序を保ったまま出力されています。この手法を使えば、2つの配列の差分を位置情報ごとに簡単に可視化できます。