この記事はJavaScriptのdelete演算子について学習し疑問に思ったことをまとめて書いてみました。
delete演算子の前に配列について簡単に説明します。
配列とは？
- 配列：順番に並んだデータの集まり。
- インデックス：配列の各要素には番号がついていて、最初の要素は0番、次は1番というように番号が続きます。
delete演算子とは？
- delete演算子：配列の特定の要素を削除するために使います。
deleteを使う例
var animals = ["dog", "cat", "rabbit"];
delete animals[1];
console.log(animals); // ["dog", undefined, "rabbit"]
animals[1]（"cat"）を削除しました。削除された場所はundefinedになり、他の要素（"dog" と "rabbit"）はそのままです。
なぜ削除しても他の要素は動かないのか？
-
配列の要素は特定の場所にある：配列の要素は、それぞれ特定の場所（インデックス）にあります。
deleteはその場所を空っぽにするだけで、他の要素を動かしません。 - 動かすと時間がかかる：もし削除した場所を詰める（繰り上げる）とすると、残りのすべての要素を動かす必要があります。大きな配列になればなるほどもっと時間がかかります。
動かすと時間がかかる具体例
配列の大きさと時間：要素の削除と繰り上げ処理にかかる時間は、要素数に比例します。
小さな配列（10要素）
var smallArray = Array.from({ length: 10 }, (_, i) => i); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.time('smallArrayDelete');
smallArray.splice(5, 1); // 5番目の要素を削除
console.timeEnd('smallArrayDelete');
結果：繰り上げ処理にかかる時間は非常に短く、ミリ秒未満です（ほぼ瞬間的）。
中くらいの配列（1,000要素）
var mediumArray = Array.from({ length: 1000 }, (_, i) => i); // [0, 1, 2, ..., 999]
console.time('mediumArrayDelete');
mediumArray.splice(500, 1); // 500番目の要素を削除
console.timeEnd('mediumArrayDelete');
結果：繰り上げ処理にかかる時間は数ミリ秒です。
大きな配列（1,000,000要素）
var largeArray = Array.from({ length: 1000000 }, (_, i) => i); // [0, 1, 2, ..., 999999]
console.time('largeArrayDelete');
largeArray.splice(500000, 1); // 500,000番目の要素を削除
console.timeEnd('largeArrayDelete');
結果：繰り上げ処理にかかる時間は数百ミリ秒から数秒です。
具体例は分かったけど、どうすればよいのか・・・？
解決策
要素を削除して他の要素を詰めたい場合は、spliceメソッドを使います。
spliceを使う例
var animals = ["dog", "cat", "rabbit"];
animals.splice(1, 1); // 1番目の要素を1つ削除
console.log(animals); // ["dog", "rabbit"]
"cat"が削除され、"rabbit"が1番目に詰められます。
まとめ
-
delete演算子：要素を削除するとその場所が
undefinedになり、他の要素は動かない。 - なぜ動かないのか：配列の要素は特定の場所にあり、動かすのに時間がかかるから。
- 具体例：小さな配列では瞬間的、中くらいの配列では数ミリ秒、大きな配列では数百ミリ秒から数秒かかる。
- spliceメソッド：要素を削除して他の要素を詰めたいときに使う。
このように、delete演算子は効率を保つために要素を削除しても他の要素を動かさず、spliceメソッドを使うことで必要に応じて詰めることで解決できます。