jQueryで「空の配列」を判定したい

Question

かなり初歩的なことで恐縮です。

次のようにして自分なりにいろいろ挑戦してみたのですが、どうしてもできません！

「空の配列」はどのように判定するのでしょうか？

コメントアウトしてあるあたり（奮闘してあるあたり笑）について、正しい書き方を教えてください。

<div arr="[]"></div>

<scritp>
var arr = $('div').data('arr');

//if( arr == [""] ){
//if( empty(arr) ){
//if( arr == empty ){
//if( arr == null ){
//if( arr == '' ){
//if( arr !== 0 ){

	alert(' <div> の arr は空です。 ');
}else{
	alert(' <div> の arr に値があります。 ');
}
</script>

Comments

[miyabi-sun]

> <scritp>
(　ﾟдﾟ)
( ﾟдﾟ )

> <div arr="[]"></div>
(　ﾟдﾟ)
( ﾟдﾟ )

[ninjanin]

汗汗

Answer 1

「arr="[]"」属性「data('arr')」ではありません

sample

<script>
$(function(){
  console.log($('#d1').data('arr').length>0);
  console.log($('#d2').data('arr').length>0);
  console.log($('#d3').data('arr').length>0);
  console.log($('#d4').data('arr').length>0);
});
</script>
<div id="d1" data-arr="[]"></div>
<div id="d2" data-arr="[1,2,3]"></div>
<div id="d3" data-arr="[0]"></div>
<div id="d4" data-arr="[null]"></div>

数値をチェック

isNaNのチェックでは数値で構成される文字列を弾けません

<script>
$(function(){
  var arr=[];
  arr=$('#d1').data('arr').filter(function(x){return typeof x=="number";});console.log(arr);
  arr=$('#d2').data('arr').filter(function(x){return typeof x=="number";});console.log(arr);
  arr=$('#d3').data('arr').filter(function(x){return typeof x=="number";});console.log(arr);
  arr=$('#d4').data('arr').filter(function(x){return typeof x=="number";});console.log(arr);
});
</script>
<div id="d1" data-arr="[]"></div>
<div id="d2" data-arr="[1,2,3]"></div>
<div id="d3" data-arr='["a","b","c"]'></div>
<div id="d4" data-arr='["1",2,"c"]'></div>

Comments

[ninjanin]

いつもありがとうございます。

一度「arr」という変数に入れてからifを使いたいのですが、「length>0」は次のようにしてはいけませんか？

<div data-arr="[]"></div>
<script>
var arr = $('div').data('arr');
if( arr.length>0 ){
alert('あります');
}else{
alert('空です');
}
</script>

[miyabi-sun]

変数に入れても問題ありません。
色んな所で使い回せるので変数として保存を試してみてください。

[ninjanin]

miyabi-sun様
ありがとうございます。安心しました。

[ninjanin]

yambejp様

あと先ほどのご回答（https://teratail.com/questions/182991）で、「整数の場合だけ」という判定方法(parseInt)を教えていただきましたので、今回もそれを使ってみたいと思ったのですが、その場合ですと、下のコードは何がいけませんでしょうか？

<div data-arr="[]"></div>
<script>
var arr = $('div').data('arr');
if( arr.length>0 && parseInt(arr) ){ //「整数の場合」という条件を追加
alert('整数の配列が入ってます');
}else{
alert('それ以外です');
}
</script>

[yambejp]

変数に受けるかどうかはロジックに大きな影響はありません
$(function(){
var arr=[];
arr=$('#d1').data('arr');console.log(arr.length>0);
arr=$('#d2').data('arr');console.log(arr.length>0);
arr=$('#d3').data('arr');console.log(arr.length>0);
arr=$('#d4').data('arr');console.log(arr.length>0);
});

[ninjanin]

ありがとうございます。あれから「数字の場合だけ」について調べてみたところ、「parseInt」ではなく「isNaN」を使うと良さそうだとわかりました。

しかし、下のコードですと、「1」のときは判定できるのいに、「１,2」のときにできません。整数なのに「それ以外です」がアラートされてしまいます。これは何がいけませんでしょうか？

<div data-arr="[1,2]"></div>
<script>
var arr = $('div').data('arr');
if( arr.length>0 && !isNaN(arr) ){
alert('整数の配列が入ってます');
}else{
alert('それ以外です');
}
</script>

[m.ts10806]

こちらにぶら下がらせてもらいますが、マニュアル読んでいろいろ動作確認してみると良いです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN

console.log(isNaN([]));
console.log(isNaN([1]));
console.log(isNaN([1,2]));
console.log(isNaN(1));
console.log(isNaN(2));
console.log(isNaN(1234));

そもそも変数arrは配列なので「それぞれが数値かどうか」を確認するのであればforなどでループして取り出して個々にチェックする必要があります。

[yambejp]

整数を含むをチェックする要件には以下3つのどれを正とするかによります
・データが空
・整数を１つ以上含む
・整数だけで構成されている（整数しか含まない）

[ninjanin]

ありがとうございます。いろいろ読むうちにまとまってきました。大変助かりました。また機会がありましたらよろしくお願い致します。

Answer 2

これは初歩らしく最初の歩き方を解説した方が良いですかね。
配列周りは他言語でブイブイ言わせてる中級者でも容易にハマる難解ポイントですからね。

まずはデベロッパーツールを開きましょう。
GoogleやFirefoxならF12キー等で開けます。
コンソールのタブを開きます。

下記のようなコードならば、console.log(arr)という行に従って、
arr変数がこの場で何を所持しているのかが画面上に表示されるはずです。

var arr = $('div').data('arr');
console.log(arr);

表示されましたか？
<div data-arr="[]"></div>にHTMLを修正すれば無事取得出来てるんじゃないかと思います。
これの値は何になっていますか？

console.log("[]");
// []

console.log([]);
// ▶ []

本物の配列ならば展開可能を示す右矢印が表示されるはずです。

---

質問文の試行錯誤で使った条件式をレビューしていきましょう。

arr == [""]

JavaScriptの配列は比較演算子で比較することは不可能です。
PHPならば[] == []はtrueになるのに、
JavaScriptの[] == []はfalseです。

意味わかりませんね？
JavaScriptのオブジェクトや配列は、メモリ空間上に実態を作ってから、そのアドレス番地を返して来ます。
なので[] == []はアドレス番地A == アドレス番地Bの比較になるので当然違うのでfalseとなります。

arr == empty

Uncaught ReferenceError: empty is not defined
JavaScriptはemptyという予約語はないのでエラーになります。
PHPにはemptyという関数がありましたっけ？

arr == null

JavaScriptの配列は作った時点でArrayクラスのインスタンスという存在になる為true的な存在となります。
従ってnullと比較するとfalse

arr == ''

これはあんまり良くないですが動くはずです。
質問文では<div arr=[]>だったのでHTML5のdataではないので値が取れなかっただけです。

配列を暗黙の型変換で文字列にしようとすると
各要素をカンマ区切りにしながらの文字列になります。

ですが、[""]は要素数1個、[]は要素数0個なので、
何も入ってない事を証明する為にこのコードを使うのは誤りです。

arr !== 0

なんでここだけ厳密な型指定なの？
配列と数値の0はそもそも型が違うので必ずfalseになります。

---

この辺のJavaScriptの配列というモノの仕様の問題で、
配列が空であるか否かを判断することは困難です。

JavaScriptはオブジェクト指向言語なので
全ての値はオブジェクトであり、オブジェクトなのでプロパティやメソッドを所持しています。
Array - JavaScript | MDN

配列を示すArrayはlengthプロパティを所持しているので、
arr.lengthというコードを書けば0や1等の要素数の数値が帰ってきます。
なのでarr.length === 0という条件式で空配列ということを証明できます。

Comments

[ninjanin]

めっっちゃありがとうございます。大変恐縮です。
こんなにたくさんのこと↓を勉強できました。感動しました。

【感動したこと】
・JavaScriptの配列は比較演算子で比較することは不可能！
・開発ツールでは本物の配列ならば展開可能を示す右矢印が表示される！
・emptyはPHPだけ！
・あらかじめ設定されている関数（emptyとかprependとか？）は「予約語」という！
・[""]は要素数1個、[]は要素数0個になる！
・配列と数値の0はそもそも型が違う！

【さらなる疑問】
・アドレス番地とはなんでしょうか？

[miyabi-sun]

> ・アドレス番地とはなんでしょうか？
パソコンに入っているメモリの事を指します。
パソコンが0と1しか認識出来ないように、メモリも内部的には0と1がひたすら書いてあるモノなので、
「座標Aから10文字切り取って使います！」という風な予約をしながら使います。

今回の解凍のアドレス番地は、このメモリ空間上に書き込んだ実体が何処にあるのかが書かれているアドレスの事を指しています。
JavaScript上からは閲覧することは出来ません。

[ninjanin]

JavaScriptとはパソコンのメモリを使っていろいろな処理をするものなんですね。（いわれてみれば当たり前ですけどｗ）
それに対してPHPはサーバーがそのアドレスみたいなの枠割をするということですか。
ありがとうございました。なんだか成長しちゃった気がします。

[miyabi-sun]

PHPもメモリ使いますよ。
サーバーマシンというインターネット上に広く公開しているパソコンの中なので場所が違うんです。
そのマシンにHTTPリクエストが飛んでくると実行開始！
PHPが変数を使いたい！となったときは、そのインターネット上にあるマシン内のメモリを利用します。

JavaScriptはChrome等のブラウザを使って、
まずWebサーバに「HTMLファイル下さーい」と問い合わせにいきます。
持って帰ってきたHTMLファイルを解析して「おっ、JavaScriptあるやんけ実行したろ」と実行し始めます。
なので閲覧者のスマホ端末、パソコンの中で実行するわけです。

[ninjanin]

なるほどー。そのあたりの仕組み、まるで不勉強でした。良い機会なのでいくつか見てみます。どうもありがとうございました。

Answer 3

data()でとりたいならhtmlのほうの属性はdata-arr="" のように data-を接頭辞としてつける必要があります。

• data-* グローバル属性

あとは「空の配列」なのでArray.lengthで0かどうかを判定すれば良いです。

※そもそも　<scritp>　と書かれているのでJavaScriptコードは認識されませんよ。

Comments

[ninjanin]

接頭辞の件、scriptの件、すみませんでした。ありがとうございます。
Array.lengthですか、調べてみます。

[m.ts10806]

回答にドキュメント貼ってますので仕様確認からしてみてください。(というか既に別回答にサンプルつきましたね)

あとはヒントにやってみてください。

[ninjanin]

みてみました。「Array.length」というのは、「そういう関数」があるのではなく、「配列にlength」という意味でよろしかったでしょうか？

するとこちらの書き方であっていますか？

<div data-arr="[]"></div>
<script>
var arr = $('div').data('arr');
if( arr.length>0 ){
alert('あります');
}else{
alert('空です');
}
</script>

[m.ts10806]

専門用語で言うと「プロパティ」です。変数や配列などにもっている参照可能な情報のひとつです。
(つまりjQueryに限った話ではないです)

コードを組めたのでしたらまず動かしてみましょう。やり方はひとつではないので、まず動かして想定通り動かない場合に聞いてください

[ninjanin]

できたっぽいのですが不安だったのでお聞きしました。すみませんでした。プロパティ覚えておきます。ありがとうございました。

[m.ts10806]

はい。まずはできたっぽいことを素直に喜んで良いと思います。
よほど長いロジックが必要な要件でない限りは「が、一転」はないと思います

Answer 4

<div data-arr="[]"></div>

var arr = $('div').data('arr');
if ($.isArray(arr) && !arr.length) {
    // Array かつ 空。
}

https://api.jquery.com/jQuery.isArray/

cf.
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

Comments

[ninjanin]

申し訳ございません、確認が遅くなりました。「Arrayかつ空」いいですね。ありがとうございます。