JavaScriptで2つの配列を比較してnullで埋めた新しい配列を生成する方法

JavaScriptでは、2つの配列を比較して第3の配列を作成する関数が必要になることがあります。具体的には、2つ目の配列のすべての要素を新しい配列に格納し、1つ目の配列には存在するが2つ目の配列には欠けている要素の位置には null を挿入します。

具体例

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

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

この場合、期待される出力は以下のようになります。

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

1つ目の配列には 'g' が含まれていますが、2つ目の配列には存在しないため、その位置が null で埋められているのが分かります。

実装コード

それでは、この処理を行う関数のコードを見ていきましょう。

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 変数： これまでに挿入した null の数を追跡します。null を挿入するたびに -1 されるため、2つ目の配列のインデックスが正しく対応するよう調整されます。
• map() メソッド： 1つ目の配列（arr1）の各要素に対して処理を実行します。
• 比較処理： 各要素 el が、オフセットを考慮した2つ目の配列の対応する要素 arr2[offset + i] と一致するかどうかを判定します。
• 戻り値： 一致すればその要素をそのまま返し、一致しなければ offset をデクリメントしたうえで null を返します。

実行結果

コンソールに出力される結果は以下のとおりです。

[ 'f', null, 'h' ]

このように、オフセットを使ったインデックス調整により、要素が欠けている位置を正確に検出し、null で埋めることができます。