javascriptとjQueryの存在チェックの方法

javascript/jQueryのチェック方法はいくつかあります。
いろいろな方法でチェックできるため、どういう方法でチェックすれば最も簡単で確実なのかがいまいち不明だったのでチェック方法を調査してみました。。また、nullやundefinedの違いなど曖昧になっていることも一緒に調査したのでご紹介します。
nullとundefinedの違い
nullとは存在しないものの値です。
unndefinedとは定義されていないものの値です。
似たようなものかと思いますが、以下のように探した結果が存在しない場合は「null」となり、探しもしていない未定義の場合は「undefined」となります。
var ele = document.getElementById('ele'); // 存在しないID var func; // 未定義 if(ele === null) console.log("ele = null"); if(ele === undefined) console.log("ele = undefined"); // ele = null if(func === null) console.log("func = null"); if(func === undefined) console.log("func = undefined"); // func = undefined
またこのように、存在しないプロパティを参照した場合も「undefined」となります。
if(Math.test === null) console.log("Math.test = null"); if(Math.test === undefined) console.log("Math.test = undefined"); // Math.test = undefined
「null」とは結果として存在しない場合の値。「undefined」とは定義すらされていない場合の値となります。
各値のtrue/false
if文で比較をした場合の各値のtrue/falseは以下のようになります。
// null値のチェック if(null) console.log("if(null)=true"); if(!null) console.log("if(null)=false"); // if(null)=false // undefinedのチェック if(undefined) console.log("if(undefined)=true"); if(!undefined) console.log("if(undefined)=false"); // if(undefined)=false // Math.abs(オブジェクト)のチェック if(Math.abs) console.log("Math.abs=true"); if(!Math.abs) console.log("Math.abs=false"); // Math.abs=true // 数字(0)のチェック if(0) console.log("0=true"); if(!0) console.log("0=false"); // 0=false // 数字(1)のチェック if(1) console.log("1=true"); if(!1) console.log("1=false"); // 1=true // 数字(-1)のチェック if(-1) console.log("-1=true"); if(!-1) console.log("-1=false"); // -1=true // 文字(空文字)のチェック if('') console.log("''=true"); if(!'') console.log("''=false"); // ''=false // 文字(空白)のチェック if(' ') console.log("' '=true"); if(!' ') console.log("' '=false"); // ' '=true // 文字(空白以外)のチェック if('a') console.log("'a'=true"); if(!'a') console.log("'a'=false"); // 'a'=true
結果をまとめるとこのようになります。
null | : | false |
---|---|---|
undefined | : | false |
オブジェクト | : | true |
0 | : | false |
1 | : | ture |
-1 | : | true |
空文字 | : | false |
文字(任意の1文字以上) | : | true |
この結果から「null」「undefined」の存在チェックを行う場合は、そのまま変数/オブジェクトをif文の中に入れてやればチェックが出来ることがわかります。
if(変数/オブジェクト){ // 存在する場合の処理 } else{ // 存在しない場合の処理 }
jQueryの存在チェック
jQueryは、javascriptと違い単純にオブジェクトのチェックを行っても存在チェックが出来ません。
var $ele = $('#ele'); // 存在しないID if($ele) console.log("$ele = true"); if(!$ele) console.log("$ele = false"); // $ele = true
このように存在しないIDを参照しても「$ele」は存在すると判定されてしまします。
jQueryではたとえ、参照したIDやclassが無くてもjQueryオブジェクトが作成されるためチェックが出来ません。
そのため、jQueryのチェックを行うときは要素の数を調べる「length」「size()」を使用するか、「$ele[0]」で要素そのものにアクセスしnull/undefinedを調べる必要があります。
// 要素数のチェック if($ele.length) console.log("$ele.length != 0"); if(!$ele.length) console.log("$ele.length = 0"); // $ele.length = 0 // 要素数のチェック if($ele.size()) console.log("$ele.size() != 0"); if(!$ele.size()) console.log("$ele.size() = 0"); // $ele.size() = 0 // 要素がnull/undefinedかチェック if($ele[0]) console.log("$ele[0] != null/undefined"); if(!$ele[0]) console.log("$ele[0] = null/undefined"); // $ele[0] = null/undefined
複数のチェック方法がありますが、null/undefinedのチェックでもある「$ele[0]」が最も適切です。「$ele[0]」ならば、チェック方法がjavascriptのチェックと同じなので、js/jQuery間での同一のチェックが出来る上、各チェックの中では最も実行速度が速いチェック方法だからです。
参考:[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度
Related Posts

Trackback URL
http://webnonotes.com/javascript-2/exists/trackback/No Comments Yet