JavaScriptで配列から空白（undefined）の要素を削除する方法

はじめに

JavaScriptでは、次のような「穴（ホール）」を含む配列を扱うことがあります。

const arr = [4, 6, , 45, 3, 345, , 56, 6];

この配列には、値が代入されていない空の要素（未定義要素）が含まれています。ここでは、元の配列をその場（in place）で書き換えながら、undefined や空の要素だけを取り除くJavaScript関数を作成します。

なお、今回の目的は falsy（偽と評価される）な値をすべて削除することではなく、undefined および空の要素のみを対象とする点に注意してください。0 や false、空文字列などの falsy 値は配列に残ります。

実装の考え方

基本となるアプローチは以下の通りです。

• for ループで配列を走査する
• Array.prototype.splice() を使って該当要素をその場で削除する

重要なポイントは、要素を削除したときにインデックスを進めないことです。splice() で要素を1つ取り除くと後続の要素が前にずれるため、削除を行った場合は i++ を実行せず、同じ位置を再チェックする必要があります。

サンプルコード

const arr = [4, 6, , 45, 3, 345, , 56, 6];
const eliminateUndefined = arr => {
    for(let i = 0; i < arr.length; ){
       if(typeof arr[i] !== 'undefined'){
          i++;
          continue;
       };
       arr.splice(i, 1);
    };
};
eliminateUndefined(arr);
console.log(arr);

実行結果

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

[
    4,  6, 45, 3,
  345, 56,  6
]

補足：filter() メソッドとの比較

同様の処理は、filter() メソッドを使っても実現できます。

const cleaned = arr.filter(el => el !== undefined);

ただし filter() は新しい配列を返すため、元の配列そのものを書き換えたいケースでは、上記の splice() を使った方法が適しています。用途に応じて使い分けるとよいでしょう。