JavaScript | deleteで消した後、配列を詰める方法

2022-03-31JavaScript 配列,JavaScript

JavaScript | deleteで消した後、配列を詰める方法

JavaScriptのdelete演算子を使って配列から削除した値を完全に削除して列を詰める方法を紹介しています。

delete演算子はオブジェクト(連想配列)で指定した場合は、値をキー名ごと削除します。

配列の値をdeleteで消した後、詰める方法

配列の値をdelete演算子で消した後、配列を詰める動作サンプルとサンプルコードになります。

動作サンプルでは、空白の値を削除して詰めた場合とそうでない場合の2つをHTMLに出力しています。

See the Pen JavaScript | Check if it is an object by yochans (@yochans) on CodePen.

配列の値をdelete演算子で削除した場合、配列の長さ(length)には影響しません。

削除した値は「undefined」となりますが例えば「= undefined」とした場合と処理が少し違うようですので注意が必要です。

参考:delete 演算子 – JavaScript | MDN

delete演算子で値を消した後に、配列を詰めるにはfilter()メゾッドに「Boolean」を指定して空白の値を削除します。

let data = [`apple`, `pine`, `banana`];

delete data[1];
data = data.filter(Boolean);

console.log(data);
// ['apple', 'banana']

splice()メゾッドを利用して配列の値を削除する

違う方法の案としてdelete演算子ではなくsplice()メゾッドを使って配列の値を削除する方法があります。

let data = [`apple`, `pine`, `banana`];

trees.splice(1,1);

console.log(data);
// ['apple', 'banana']

splice()メゾッドはオプション引数に削除を開始する位置と削除する値の数を指定しますが、削除をする値の数を1とする事でひとつだけ値を削除する方法として利用できます。