JavaScript 配列 新しいページはコチラ

提供: yonewiki
移動: 案内, 検索
(→‎配列ソート＋ソート方法指定 sort)
 
1行: 1行:
 
[[JAVA Script#リファレンス]]に戻る。
 
[[JAVA Script#リファレンス]]に戻る。
 +
 +
'''1ページで配列が丸わかり。'''
 
　
 
　
  
47行: 49行:
  
 
サンプルプログラムは以下のとおりです。
 
サンプルプログラムは以下のとおりです。
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
93行: 95行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</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メソッドによって要素数が拡張されつつ、データが格納できるようになっていて、宣言のときに要素数を決定したり、配列の大きさを調整するような処理があまり重要ではないことが伺い知れます。このことから、要素番号を管理することはあえて実施せずに適当にくっつけたり、切り離したりしても、要素数が自動で管理されている状態になっていることが多いため、配列要素数の状態については、あまり意識しなくてもよいでしょう。複雑な操作をしたときに状態がどうなっているか確認することは必要になるかもしれません。
+
上記サンプルのData2Arrは要素数2でpopメソッドで要素を追加できますが、要素番号2以降に格納され、要素番号0と1の最初に準備された要素はカラのまま要素番号2にデータとしての数値1が要素番号3にデータとしての数値4が格納されます。また、要素数0で定義した配列Data1ArrとData4Arrもpopメソッドによって要素数が拡張されつつ、データが格納できるようになっていて、宣言のときに要素数を決定したり、配列の大きさを調整するような処理があまり重要ではないことが伺い知れます。このことから、要素番号を管理することはあえて実施せずに適当にくっつけたり、切り離したりしても、要素数が自動で管理されている状態になっていることが多いため、配列要素数の状態については、あまり意識しなくてもよいでしょう。複雑な操作をしたいときに状態がどうなっているか確認することは必要になるかもしれません。
  
 
== '''要素数の取得・設定 length''' ==
 
== '''要素数の取得・設定 length''' ==
116行: 118行:
  
 
サンプルは以下のとおりです。
 
サンプルは以下のとおりです。
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
138行: 140行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Array length.html|サンプル実行結果]]
 
[[Media:JavaScript Array length.html|サンプル実行結果]]
151行: 153行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
236行: 238行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Array concat.html|サンプル実行結果]]
 
[[Media:JavaScript Array concat.html|サンプル実行結果]]
250行: 252行:
  
 
という感じで指定します。サンプルは以下の通りです。
 
という感じで指定します。サンプルは以下の通りです。
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
301行: 303行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Array slice.html|サンプル実行結果]]
 
[[Media:JavaScript Array slice.html|サンプル実行結果]]
329行: 331行:
  
 
具体的な利用サンプルは以下のとおりです。
 
具体的な利用サンプルは以下のとおりです。
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
380行: 382行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Array splice.html|サンプル実行結果]]
 
[[Media:JavaScript Array splice.html|サンプル実行結果]]
401行: 403行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
452行: 454行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Array unshift.html|サンプル実行結果]]
 
[[Media:JavaScript Array unshift.html|サンプル実行結果]]
466行: 468行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
517行: 519行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Array shift.html|サンプル実行結果]]
 
[[Media:JavaScript Array shift.html|サンプル実行結果]]
537行: 539行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
588行: 590行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Array push.html|サンプル実行結果]]
 
[[Media:JavaScript Array push.html|サンプル実行結果]]
608行: 610行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
681行: 683行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Array pop.html|サンプル実行結果]]
 
[[Media:JavaScript Array pop.html|サンプル実行結果]]
698行: 700行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
750行: 752行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Array toString.html|サンプル実行結果]]
 
[[Media:JavaScript Array toString.html|サンプル実行結果]]
764行: 766行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
816行: 818行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Array join.html|サンプル実行結果]]
 
[[Media:JavaScript Array join.html|サンプル実行結果]]
836行: 838行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
888行: 890行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Array reverse.html|サンプル実行結果]]
 
[[Media:JavaScript Array reverse.html|サンプル実行結果]]
973行: 975行:
 
例えば、以下のようにするとソート方法を制御する関数を指定することができます。
 
例えば、以下のようにするとソート方法を制御する関数を指定することができます。
  
−
 
+
:://降順ソート
 
*Data1Arr.sort(function(BeforeElement,AfterElement){
 
*Data1Arr.sort(function(BeforeElement,AfterElement){
 
:::if(BeforeElement < AfterElement) return 1;
 
:::if(BeforeElement < AfterElement) return 1;
987行: 989行:
 
*Data1Arr.sort(SortFunc);
 
*Data1Arr.sort(SortFunc);
 
::…
 
::…
−
::function SortFunc(BeforeElement,AfterElement) = {
+
:://降順ソート
 +
::function SortFunc(BeforeElement,AfterElement) = {  
 
:::if(BeforeElement < AfterElement) return 1;
 
:::if(BeforeElement < AfterElement) return 1;
 
:::if(BeforeElement > AfterElement) return -1;
 
:::if(BeforeElement > AfterElement) return -1;
1,001行: 1,004行:
  
  
 +
:://連想配列priceプロパティ基準の降順ソート
 
*Data1Arr.sort(function(BeforeElement,AfterElement){
 
*Data1Arr.sort(function(BeforeElement,AfterElement){
 
:::if(BeforeElement.price < AfterElement.price) return 1;
 
:::if(BeforeElement.price < AfterElement.price) return 1;
1,013行: 1,017行:
  
 
昇順ソートや降順ソートを、ソート関数の引数の中で指定した方が処理速度的にも早くなるし、スマートだとされていますが、いろいろな理由で昇順ソートしてから、それをreverseした方が早いという結果になる場合も発生してくるかもしれません。大きなシステムを作るわけでもない限り、あまり気にしなくてもよいと思いますが、都度、どのようにするのが速度向上につながるのか？そういうことは調べた方が良いかもしれません。
 
昇順ソートや降順ソートを、ソート関数の引数の中で指定した方が処理速度的にも早くなるし、スマートだとされていますが、いろいろな理由で昇順ソートしてから、それをreverseした方が早いという結果になる場合も発生してくるかもしれません。大きなシステムを作るわけでもない限り、あまり気にしなくてもよいと思いますが、都度、どのようにするのが速度向上につながるのか？そういうことは調べた方が良いかもしれません。
 +
 +
 +
サンプルプログラムは以下のとおりです。
 +
 +
 +
<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|サンプル実行結果]]
 +
 +
 +
　こんな所ですね。ここまで理解した人は、多分国語力も高い、この分かりにくい説明で理解できたのだから次から次へと理解していけるでしょう。冒頭で丸わかりと書いたのは誇張表現だったかも知れない。管理人が実は反省していることも、此処まで来たあなただから、分かってもらえる。
  
 
[[JAVA Script#リファレンス]]に戻る。
 
[[JAVA Script#リファレンス]]に戻る。

2020年11月2日 (月) 00:00時点における最新版

「https://www.yo-net.jp/yonewiki/index.php?title=JavaScript_%E9%85%8D%E5%88%97&oldid=9272」から取得

個人用ツール
名前空間

変種
操作
案内
ツールボックス