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とする事でひとつだけ値を削除する方法として利用できます。
ディスカッション
いつも勉強させていただいています。
一年前の記事に恐縮ですが、filterの部分について、
data = data.filter(v=>true);
にしたほうが良いのではないでしょうか。
Booleanだと配列の要素がfalsyな値だった場合、コンストラクタはfalseを返すと予想します。
filterはemptyを飛ばしてループするようなので常にtrueを渡してあげれば十分かと。
例
***
let data = [0,1,2,,,3];
data = data.filter(Boolean);
console.log(data);
// [ 1, 2, 3 ]
***
let data = [0,1,2,,,3];
data = data.filter(v=>true);
console.log(data);
// [ 0, 1, 2, 3 ]
***
(あと、名前とメールアドレス欄の文字が白いのは私の環境だけでしょうか、、、)