JavaScript 配列 新しいページはコチラ
提供: yonewiki
(→配列ソート+ソート方法指定 sort) |
|||
1行: | 1行: | ||
[[JAVA Script#リファレンス]]に戻る。 | [[JAVA Script#リファレンス]]に戻る。 | ||
+ | |||
+ | '''1ページで配列が丸わかり。''' | ||
47行: | 49行: | ||
サンプルプログラムは以下のとおりです。 | サンプルプログラムは以下のとおりです。 | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
93行: | 95行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array declare.html|サンプル実行結果]] | [[Media:JavaScript Array declare.html|サンプル実行結果]] | ||
− | + | 上記サンプルのData2Arrは要素数2でpopメソッドで要素を追加できますが、要素番号2以降に格納され、要素番号0と1の最初に準備された要素はカラのまま要素番号2にデータとしての数値1が要素番号3にデータとしての数値4が格納されます。また、要素数0で定義した配列Data1ArrとData4Arrもpopメソッドによって要素数が拡張されつつ、データが格納できるようになっていて、宣言のときに要素数を決定したり、配列の大きさを調整するような処理があまり重要ではないことが伺い知れます。このことから、要素番号を管理することはあえて実施せずに適当にくっつけたり、切り離したりしても、要素数が自動で管理されている状態になっていることが多いため、配列要素数の状態については、あまり意識しなくてもよいでしょう。複雑な操作をしたいときに状態がどうなっているか確認することは必要になるかもしれません。 | |
== '''要素数の取得・設定 length''' == | == '''要素数の取得・設定 length''' == | ||
116行: | 118行: | ||
サンプルは以下のとおりです。 | サンプルは以下のとおりです。 | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
138行: | 140行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array length.html|サンプル実行結果]] | [[Media:JavaScript Array length.html|サンプル実行結果]] | ||
151行: | 153行: | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
236行: | 238行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array concat.html|サンプル実行結果]] | [[Media:JavaScript Array concat.html|サンプル実行結果]] | ||
250行: | 252行: | ||
という感じで指定します。サンプルは以下の通りです。 | という感じで指定します。サンプルは以下の通りです。 | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
301行: | 303行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array slice.html|サンプル実行結果]] | [[Media:JavaScript Array slice.html|サンプル実行結果]] | ||
329行: | 331行: | ||
具体的な利用サンプルは以下のとおりです。 | 具体的な利用サンプルは以下のとおりです。 | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
380行: | 382行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array splice.html|サンプル実行結果]] | [[Media:JavaScript Array splice.html|サンプル実行結果]] | ||
401行: | 403行: | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
452行: | 454行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array unshift.html|サンプル実行結果]] | [[Media:JavaScript Array unshift.html|サンプル実行結果]] | ||
466行: | 468行: | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
517行: | 519行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array shift.html|サンプル実行結果]] | [[Media:JavaScript Array shift.html|サンプル実行結果]] | ||
537行: | 539行: | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
588行: | 590行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array push.html|サンプル実行結果]] | [[Media:JavaScript Array push.html|サンプル実行結果]] | ||
608行: | 610行: | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
681行: | 683行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array pop.html|サンプル実行結果]] | [[Media:JavaScript Array pop.html|サンプル実行結果]] | ||
698行: | 700行: | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
750行: | 752行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array toString.html|サンプル実行結果]] | [[Media:JavaScript Array toString.html|サンプル実行結果]] | ||
764行: | 766行: | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
816行: | 818行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array join.html|サンプル実行結果]] | [[Media:JavaScript Array join.html|サンプル実行結果]] | ||
836行: | 838行: | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
888行: | 890行: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
− | </ | + | </syntaxhighlight2> |
[[Media:JavaScript Array reverse.html|サンプル実行結果]] | [[Media:JavaScript Array reverse.html|サンプル実行結果]] | ||
1,020行: | 1,022行: | ||
− | < | + | <syntaxhighlight2 lang="javascript" line start="1"> |
+ | <HTML> | ||
+ | <HEAD> | ||
+ | <TITLE>JavaScript Array sort</TITLE> | ||
+ | </HEAD> | ||
+ | <BODY> | ||
+ | JavaScript Array sort<br /> | ||
+ | <SCRIPT Language="JavaScript"> | ||
+ | <!-- | ||
− | </ | + | |
+ | var Data1Arr = [{goods_name:'ボールペン', price:100},{goods_name:'3色ボールペン(黒、赤、青)', price:250},{goods_name:'1+2色ボールペン', price:400}]; | ||
+ | |||
+ | strData = new String(); | ||
+ | |||
+ | document.write("Data1Arr(初期値)= ","<br />", | ||
+ | " Data1Arr[0].goods_name->",Data1Arr[0].goods_name, ",Data1Arr[0].price->",Data1Arr[0].price,"<br />", | ||
+ | "Data1Arr[1].goods_name->",Data1Arr[1].goods_name, ",Data1Arr[1].price->",Data1Arr[1].price,"<br />", | ||
+ | "Data1Arr[2].goods_name->",Data1Arr[2].goods_name, ",Data1Arr[2].price->",Data1Arr[2].price,"<br />", | ||
+ | "<br />", | ||
+ | "Data1Arr.length = ", Data1Arr.length, "<br /><br />"); | ||
+ | |||
+ | |||
+ | //昇順 連想配列 キー goods_name | ||
+ | Data1Arr.sort(function(BeforeElement,AfterElement){ | ||
+ | if(BeforeElement.goods_name < AfterElement.goods_name) return -1; | ||
+ | if(BeforeElement.goods_name > AfterElement.goods_name) return 1; | ||
+ | return 0; | ||
+ | }); | ||
+ | |||
+ | |||
+ | document.write("Data1Arr(昇順 連想配列 キー goods_name)= ","<br />", | ||
+ | " Data1Arr[0].goods_name->",Data1Arr[0].goods_name, ",Data1Arr[0].price->",Data1Arr[0].price,"<br />", | ||
+ | "Data1Arr[1].goods_name->",Data1Arr[1].goods_name, ",Data1Arr[1].price->",Data1Arr[1].price,"<br />", | ||
+ | "Data1Arr[2].goods_name->",Data1Arr[2].goods_name, ",Data1Arr[2].price->",Data1Arr[2].price,"<br />", | ||
+ | "<br />", | ||
+ | "Data1Arr.length = ", Data1Arr.length, "<br /><br />"); | ||
+ | |||
+ | //降順 連想配列 キー price | ||
+ | Data1Arr.sort(function(BeforeElement,AfterElement){ | ||
+ | if(BeforeElement.price < AfterElement.price) return 1; | ||
+ | if(BeforeElement.price > AfterElement.price) return -1; | ||
+ | return 0; | ||
+ | }); | ||
+ | |||
+ | document.write("Data1Arr(降順 連想配列 キー price)= ","<br />", | ||
+ | " Data1Arr[0].goods_name->",Data1Arr[0].goods_name, ",Data1Arr[0].price->",Data1Arr[0].price,"<br />", | ||
+ | "Data1Arr[1].goods_name->",Data1Arr[1].goods_name, ",Data1Arr[1].price->",Data1Arr[1].price,"<br />", | ||
+ | "Data1Arr[2].goods_name->",Data1Arr[2].goods_name, ",Data1Arr[2].price->",Data1Arr[2].price,"<br />", | ||
+ | "<br />", | ||
+ | "Data1Arr.length = ", Data1Arr.length, "<br /><br />"); | ||
+ | |||
+ | --> | ||
+ | </SCRIPT> | ||
+ | </BODY> | ||
+ | </HTML> | ||
+ | </syntaxhighlight2> | ||
[[Media:JavaScript Array sort.html|サンプル実行結果]] | [[Media:JavaScript Array sort.html|サンプル実行結果]] | ||
+ | |||
+ | |||
+ | こんな所ですね。ここまで理解した人は、多分国語力も高い、この分かりにくい説明で理解できたのだから次から次へと理解していけるでしょう。冒頭で丸わかりと書いたのは誇張表現だったかも知れない。管理人が実は反省していることも、此処まで来たあなただから、分かってもらえる。 | ||
[[JAVA Script#リファレンス]]に戻る。 | [[JAVA Script#リファレンス]]に戻る。 |