質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

9135閲覧

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

ninjanin

総合スコア26

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/04/05 04:56

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

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

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

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

html

1<div arr="[]"></div> 2 3<scritp> 4var arr = $('div').data('arr'); 5 6//if( arr == [""] ){ 7//if( empty(arr) ){ 8//if( arr == empty ){ 9//if( arr == null ){ 10//if( arr == '' ){ 11//if( arr !== 0 ){ 12 13 alert(' <div> の arr は空です。 '); 14}else{ 15 alert(' <div> の arr に値があります。 '); 16} 17</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun

2019/04/05 05:04

> <scritp> ( ゚д゚) ( ゚д゚ ) > <div arr="[]"></div> ( ゚д゚) ( ゚д゚ )
guest

回答4

0

ベストアンサー

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

sample

javascript

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

数値をチェック

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

javascript

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

投稿2019/04/05 05:00

編集2019/04/05 06:01
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ninjanin

2019/04/05 05:30 編集

いつもありがとうございます。 一度「arr」という変数に入れてからifを使いたいのですが、「length>0」は次のようにしてはいけませんか? <div data-arr="[]"></div> <script> var arr = $('div').data('arr'); if( arr.length>0 ){ alert('あります'); }else{ alert('空です'); } </script>
miyabi-sun

2019/04/05 05:16

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

2019/04/05 05:34 編集

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

2019/04/05 05:44 編集

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

2019/04/05 05:21

変数に受けるかどうかはロジックに大きな影響はありません $(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

2019/04/05 05:31 編集

ありがとうございます。あれから「数字の場合だけ」について調べてみたところ、「parseInt」ではなく「isNaN」を使うと良さそうだとわかりました。 しかし、下のコードですと、「1」のときは判定できるのいに、「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

2019/04/05 05:43 編集

こちらにぶら下がらせてもらいますが、マニュアル読んでいろいろ動作確認してみると良いです。 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

2019/04/05 06:05

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

2019/04/06 02:51

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

0

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

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

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

JavaScript

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

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

JavaScript

1console.log("[]"); 2// [] 3 4console.log([]); 5// ▶ []

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


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

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という条件式で空配列ということを証明できます。

投稿2019/04/05 05:35

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ninjanin

2019/04/05 05:51

めっっちゃありがとうございます。大変恐縮です。 こんなにたくさんのこと↓を勉強できました。感動しました。 【感動したこと】 ・JavaScriptの配列は比較演算子で比較することは不可能! ・開発ツールでは本物の配列ならば展開可能を示す右矢印が表示される! ・emptyはPHPだけ! ・あらかじめ設定されている関数(emptyとかprependとか?)は「予約語」という! ・[""]は要素数1個、[]は要素数0個になる! ・配列と数値の0はそもそも型が違う! 【さらなる疑問】 ・アドレス番地とはなんでしょうか?
miyabi-sun

2019/04/05 06:02

> ・アドレス番地とはなんでしょうか? パソコンに入っているメモリの事を指します。 パソコンが0と1しか認識出来ないように、メモリも内部的には0と1がひたすら書いてあるモノなので、 「座標Aから10文字切り取って使います!」という風な予約をしながら使います。 今回の解凍のアドレス番地は、このメモリ空間上に書き込んだ実体が何処にあるのかが書かれているアドレスの事を指しています。 JavaScript上からは閲覧することは出来ません。
ninjanin

2019/04/05 06:09

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

2019/04/05 06:13 編集

PHPもメモリ使いますよ。 サーバーマシンというインターネット上に広く公開しているパソコンの中なので場所が違うんです。 そのマシンにHTTPリクエストが飛んでくると実行開始! PHPが変数を使いたい!となったときは、そのインターネット上にあるマシン内のメモリを利用します。 JavaScriptはChrome等のブラウザを使って、 まずWebサーバに「HTMLファイル下さーい」と問い合わせにいきます。 持って帰ってきたHTMLファイルを解析して「おっ、JavaScriptあるやんけ実行したろ」と実行し始めます。 なので閲覧者のスマホ端末、パソコンの中で実行するわけです。
ninjanin

2019/04/06 02:45

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

0

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

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

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

投稿2019/04/05 05:08

編集2019/04/05 05:09
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ninjanin

2019/04/05 05:11

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

2019/04/05 05:14

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

2019/04/05 05:16

みてみました。「Array.length」というのは、「そういう関数」があるのではなく、「配列にlength」という意味でよろしかったでしょうか? するとこちらの書き方であっていますか? <div data-arr="[]"></div> <script> var arr = $('div').data('arr'); if( arr.length>0 ){ alert('あります'); }else{ alert('空です'); } </script>
m.ts10806

2019/04/05 05:23 編集

専門用語で言うと「プロパティ」です。変数や配列などにもっている参照可能な情報のひとつです。 (つまりjQueryに限った話ではないです) コードを組めたのでしたらまず動かしてみましょう。やり方はひとつではないので、まず動かして想定通り動かない場合に聞いてください
ninjanin

2019/04/05 05:27 編集

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

2019/04/05 05:29

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

0

HTML

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

jQuery

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

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

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

投稿2019/04/05 06:34

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ninjanin

2019/04/06 02:46

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問