[Javascript] delete関数を使う時は気をつけろ!

2020年5月25日

Javascript テクノロジー プログラミング

t f B! P L
プログラミングをしている時に、不要になったデータを削除するのは、deleteだと信じて疑わなかった、ユゲタです。 不要になったデータ(object)をdeleteすると、メモリ上から削除されて、スマートフォンなどで閲覧しているページでは、バッテリー容量を無駄に消費することを削減できると思って、 これまでバンバンdeleteしてきたんですが、実は配列内のデータをdeleteすると、不思議な状態になったので、気をつけるポイントがあることに、気がついた感じです。

本日のIT謎掛け

「delete操作」と、かけまして・・・ 「少し不要かもと思ったけど、ECサイトで高額な買い物をした時」と、ときます。 そのココロは・・・ 失敗したと気がついたけど、取り消せないと知った時に、愕然とします。

配列内のデータをdeleteすると、何が起きる?

実際に注意ポイントを確認するために、サンプルコードを見て見たほうが早いでしょう。 var arr1 = [0,1,2,3,4,5,6,7,8,9]; 上記のような配列と連想配列のデータを用意してみました。 配列の2番めのデータをdeleteしてみます。 delete a[1]; > true arr1 > [0, empty, 2, 3, 4, 5, 6, 7, 8, 9] deleteした箇所がemptyとなっている状態なのが確認できます。 この状態で、配列内の情報を変更せずに、データの削除ができていることがわかります。

lengthとemptyの関係

arr1.length > 10 lengthも確かにdeleteした分も含めて10個保持しているようになっていますが、loopで配列にアクセスすると、 for(var i=0; i<arr1.length; i++){ console.log(i +":"+ arr1[i]); } > 0:0 > 1:undefined > 2:2 > 3:3 > 4:4 > 5:5 > 6:6 > 7:7 > 8:8 > 9:9 該当箇所は、"undefined"になっていることがわかります。 for(var i in arr1){ console.log(i +":"+ arr1[i]); } > 0:0 > 2:2 > 3:3 > 4:4 > 5:5 > 6:6 > 7:7 > 8:8 > 9:9 for~inでloopさせると、undefinedはすっ飛ばされることもわかりますが、処理回数とlengthが食い違ってくるので、javascriptの配列情報でlengthを鵜呑みで信じてはいけないという事も理解できます。

連想配列とdeleteは相性がいい

配列のdelete状況がわかったところで、次に連想配列の内容をdeleteしてみます。 var arr2 = {"a":"aa","b":"bb","c":"cc","d":"dd","e":"ee"}; delete arr2.b > true arr2 > {a: "aa", c: "cc", d: "dd", e: "ee"} 対象のkey箇所がキレイに抜けているのがわかります。 どうやら連想配列には、emptyは発生しないようです。 このdeleteという機能は、配列などのobjectの順番を崩さないように行われている機能のようですが、同時にobjectが不思議な状態になっていしまうので、使う時には気をつけることと、 javascriptのobjectデータに、こうした状態があると、疑ってプログラミングするほうが、バグの発生率を低くすることになるでしょう。 自分も、古いブログデータをdeleteすることにしよう!!!

このブログを検索

プロフィール

自分の写真
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出で、出来高は無限大です。

ブログ アーカイブ

QooQ