【JavaScript】配列の要素を削除して空きを詰める方法
更新日:2023/07/11
JavaScriptの配列はインデックスを削除できます。
削除するとその番号が空くので、空きを詰める方法をお伝えします。
配列要素を削除する方法
配列の要素を削除するときは、次のように delete を使用します。
const ary = [1,2,3,4,5];
delete ary[2];
console.log( ary ); // 結果1: [ 1, 2, <1 empty item>, 4, 5 ]
console.log( ary[2] ); // 結果2: undefined
結果1の <1 empty item> は、その位置に要素が存在していないという意味です。
削除した要素をコンソール出力したら undefined と表示されました(結果2)。
JavaScriptでは存在していないという意味で undefined を使用することがあります。
そこで、次のように削除したい要素に undefined をセットしてもよさそうな気がしますね。
const ary = [1,2,3,4,5];
ary[2] = undefined;
console.log( ary ); // 結果1: [ 1, 2, undefined, 4, 5 ]
console.log( ary[2] ); // 結果2: undefined
結果2を見ると、undefined と表示されています。
しかし結果1を見ると、<1 empty item>ではなくて undefined と表示されています。
これは、その位置の要素が持っている値が undefined である、という意味です。
要素が存在しないときは undefined が出力されます。
要素が存在していて、値がundefined の時もあります。
ややこしいですが、この二つのパターンを把握しておく必要があります。
意図的に空きを作る方法
配列は初期化時にカンマのみを記述すると、その位置が空き要素となります。
const ary = [1,2,,4,5];
console.log( ary ); // 結果1: [ 1, 2, <1 empty item>, 4, 5 ]
また、代入で要素をスキップできます。
const ary = [1,2];
ary[3] = 4;
ary[4] = 5;
console.log( ary ); // 結果1: [ 1, 2, <1 empty item>, 4, 5 ]
空きを詰める方法:非破壊
JavaScriptは配列の空き要素を詰める関数が用意されていません。
そこで、他のメソッドを上手く利用します。
方法は無数にありますが、次のようにfilter()メソッドを使用する方法が一番簡単だと思います。
const ary = [1,2, ,undefined,5,6];
const ary2 = ary.filter( ()=>true );
console.log( ary ); // 結果: [ 1, 2, <1 empty item>, undefined, 5, 6 ]
console.log( ary2 ); // 結果: [ 1, 2, undefined, 5, 6 ]
filter()メソッドは、コールバック関数で真値を返した要素のみで新しい配列を作成して返します。
このとき、存在するインデックスのみコールバック関数が呼び出されます。
そのため、コールバック関数でtrueを返すだけで、空きを詰めることができます。
なおこの方法は、元の配列を変更しません。
空きを詰める方法:破壊
元の配列の空きを詰めたい場合、一番手っ取り早いのはfilter()メソッドの結果を元の変数またはプロパティにセットする方法です。
let ary = [1,2, ,undefined,5,6];
ary = ary.filter( ()=>true );
console.log( ary ); // 結果: [ 1, 2, undefined, 5, 6 ]
constで宣言していたり、インデックス以外のプロパティを追加しているときは、少し面倒です。
元の配列のインデックスをクリアした後、上記コードで生成した配列をコピーします。
const ary = [1,2, ,undefined,5,6];
ary.prop1 = "a";
const ary2 = ary.filter( ()=>true );
ary.length = 0; // 配列クリア
ary2.forEach( e=>ary.push( e ) ); // 配列コピー
console.log( ary ); // 結果: [ 1, 2, undefined, 5, 6, prop1: 'a' ]
または、splice()メソッドを使用することもできます。
const ary = [1,2, ,undefined,5,6];
ary.prop1 = "a";
ary.splice( 0 , ary.length, ...ary.filter( ()=>true ));
console.log( ary ); // 結果: [ 1, 2, undefined, 5, 6, prop1: 'a' ]
splice()メソッドは、開始位置(第一引数)から第二引数個の要素を削除して、第三引数からの要素を追加するメソッドです。
上のコードは配列要素を全部消して、filter()の結果を追加しています。
ここまでの方法は、filter()で一時的な配列を作成していました。
次の方法は、配列を中身を直接変更しています。
const ary = [1,2, ,undefined,5,6];
ary.prop1 = "a";
ary.length = ary.reduce( (p,e,index,a)=>{
if( p === index ) return p+1;
a[p]=e;
delete a[index];
return p+1;
},0);
console.log( ary ); // // 結果: [ 1, 2, undefined, 5, 6, prop1: 'a' ]
こちらの方が効率がよさそうですが、どこかに落とし穴があるかも...
削除と詰めを同時に行う
ここまでは空きがある配列を詰める方法をお伝えしましたが、要素を削除するのと同時に空きを詰めたいケースの方が多いかもしれません。
この場合は、splice()メソッドを使用します。
前項で解説をしていますが、splice()メソッドは、第一引数で削除開始位置を、第二引数で削除する個数を指定します。
const ary = [1,2,3,4,5];
ary.splice( 2,1 );
console.log( ary ); // 結果: [ 1, 2, 4, 5 ]
複数の範囲を削除する場合はdelete後に前項の方法を使用した方が効率なケースもあるので、十分な検討が必要ですね。
更新日:2023/07/11
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。