【JavaScript】配列の空きインデックス（ホール）に値を挿入するpushAtEmpty()の実装方法

配列の中の空きインデックスに値を挿入するには

JavaScriptでは、次のように配列の中に「ホール」と呼ばれる空の要素（undefined）が含まれることがあります。

const arr = [43,534534,645,64,,645,64,,645,,645,,65,,645,,64];

本記事では、指定した値を配列内の最初に見つかった空きインデックスに挿入する pushAtEmpty() メソッドを実装していきます。もし空きスペースがひとつも存在しない場合は、通常の push() と同じく配列の末尾へ値を追加する仕様とします。

実装コード

まずはコード全体を見てみましょう。forループで先頭から順に空き位置（undefined）を探し、見つかった箇所を splice() メソッドで新しい値に置き換えます。

const arr = [43,534534,645,64,,645,64,,645,,645,,65,,645,,64];

Array.prototype.pushAtEmpty = function(element){
    let index;
    for(index = 0; index < this.length; index++){
        if(this[index] === undefined){
            this.splice(index, 1, element);
            break;
        }
    }
    // 空きスペースが見つからなければ末尾に追加
    if(index === this.length){
        this.push(element);
    }
};

arr.pushAtEmpty(23);
arr.pushAtEmpty(33);
arr.pushAtEmpty(43);
arr.pushAtEmpty(53);
arr.pushAtEmpty(63);
arr.pushAtEmpty(73);
arr.pushAtEmpty(83);
arr.pushAtEmpty(93);

console.log(arr);

コードの解説

処理の流れを順番に見ていきます。

① 空き位置の探索：forループで配列を先頭から走査し、this[index] === undefined が成立する最初のインデックスを探します。配列リテラル内でカンマが連続することで生まれた「穴」は undefined として扱われるため、この比較で検出できます。

② 値の置き換え：空き位置が見つかったら、splice(index, 1, element) を呼び出して該当インデックスの1要素だけを新しい値で置き換え、break文でループを即座に脱出します。

③ 空きがない場合のフォールバック：ループが最後まで完走した場合（index === this.length）、空きスペースは存在しないということなので、push(element) で配列の末尾に値を追加します。

補足：Array.prototypeの拡張について

ここでは解説をシンプルにするため Array.prototype を直接拡張していますが、実務のコードでは他ライブラリとの名前衝突や列挙時の副作用を避けるために、独立した関数として定義するか、Object.defineProperty を使って列挙不可（enumerable: false）として追加するのが安全です。

出力結果

上記コードを実行してコンソールを確認すると、元々空いていた位置へ順番に値が埋め込まれていることがわかります。

[
    43, 534534, 645, 64,
    23, 645, 64, 33,
    645, 43, 645, 53,
    65, 63, 645, 73,
    64, 83, 93
]