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

提供: yonewiki
移動: 案内, 検索
(→‎要素数の取得・設定 length)
 
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行:
  
 
サンプルは以下のとおりです。
 
サンプルは以下のとおりです。
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript Array</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript Array<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
 +
Data1Arr = new Array(1,2,3,4);
 +
 +
document.write("Data1Arr = ", Data1Arr[0], ",",Data1Arr[1], ",", Data1Arr[2], ",", Data1Arr[3], "," , Data1Arr[4] , ",", Data1Arr[5], "<br />Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
Data1Arr.length = 2;
 +
 +
document.write("Data1Arr = ", Data1Arr[0], ",",Data1Arr[1], ",", Data1Arr[2], ",", Data1Arr[3], "," , Data1Arr[4] , ",", Data1Arr[5], ",<br />Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 +
[[Media:JavaScript Array length.html|サンプル実行結果]]
  
 
== '''連結 concat''' ==
 
== '''連結 concat''' ==
 +
二つの配列をくっつけるメソッドで、以下のように
 +
*RenketsuArr = MaeArr.concat(UshiroArr);
  
 +
 +
というような記述でMaeArrとUshiroArrが連結され、MaeArrの最終要素の後ろにUshiroArrの先頭要素が来るように連結されます。結果、RenketsuArrの配列が連結された結果の内容になります。MaeArrもUshiroArrはなくなりません。concatは英語のcon･catenate=連結から来ていると思います。
 +
 +
 +
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript Array concat</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript Array concat<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
RenketsuDataArr = new Array();
 +
Data1Arr = new Array(1,2,3,4); //定義
 +
Data2Arr = new Array(10,20,30,40); //定義
 +
 +
document.write("RenketsuDataArr = ",
 +
    RenketsuDataArr[0], ",",
 +
    RenketsuDataArr[1], ",",
 +
    RenketsuDataArr[2], ",",
 +
    RenketsuDataArr[3], ",",
 +
    RenketsuDataArr[4], ",",
 +
    RenketsuDataArr[5], ",",
 +
    RenketsuDataArr[6], ",",
 +
    RenketsuDataArr[7], "<br />",
 +
    "RenketsuDataArr.length = ", RenketsuDataArr.length, "<br />");
 +
   
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
document.write("Data2Arr = ",
 +
    Data2Arr[0], ",",
 +
    Data2Arr[1], ",",
 +
    Data2Arr[2], ",",
 +
    Data2Arr[3], "," ,
 +
    Data2Arr[4] , ",",
 +
    Data2Arr[5], ",",
 +
    Data2Arr[6], ",",
 +
    Data2Arr[7], "<br />",
 +
    "Data2Arr.length = ", Data2Arr.length, "<br />");
 +
 +
RenketsuDataArr = Data1Arr.concat(Data2Arr);
 +
 +
document.write("RenketsuDataArr = ",
 +
    RenketsuDataArr[0], ",",
 +
    RenketsuDataArr[1], ",",
 +
    RenketsuDataArr[2], ",",
 +
    RenketsuDataArr[3], ",",
 +
    RenketsuDataArr[4], ",",
 +
    RenketsuDataArr[5], ",",
 +
    RenketsuDataArr[6], ",",
 +
    RenketsuDataArr[7], "<br />",
 +
    "RenketsuDataArr.length = ", RenketsuDataArr.length, "<br />");
 +
   
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
document.write("Data2Arr = ",
 +
    Data2Arr[0], ",",
 +
    Data2Arr[1], ",",
 +
    Data2Arr[2], ",",
 +
    Data2Arr[3], "," ,
 +
    Data2Arr[4] , ",",
 +
    Data2Arr[5], ",",
 +
    Data2Arr[6], ",",
 +
    Data2Arr[7], "<br />",
 +
    "Data2Arr.length = ", Data2Arr.length, "<br />");
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 +
[[Media:JavaScript Array concat.html|サンプル実行結果]]
  
 
== '''抽出 slice''' ==
 
== '''抽出 slice''' ==
 +
配列の要素を部分的に取り出した構造を新たな配列変数に設定するメソッドがsliceです。例えば以下のように利用します。
 +
*NewDataArr = DataArr.slice(1,2);
  
 +
引数に指定する値は
 +
*第一引数 抽出開始の要素番号
 +
*第二引数 抽出終了の要素番号
 +
 +
 +
という感じで指定します。サンプルは以下の通りです。
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript Array slice</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript Array slice<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
NewDataArr = new Array();
 +
Data1Arr = new Array("今日は","大安","吉日","です。"); //定義
 +
 +
 +
document.write("NewDataArr = ",
 +
    NewDataArr[0], ",",
 +
    NewDataArr[1], ",",
 +
    NewDataArr[2], ",",
 +
    NewDataArr[3], ",",
 +
    NewDataArr[4], ",",
 +
    NewDataArr[5], ",",
 +
    NewDataArr[6], ",",
 +
    NewDataArr[7], "<br />");
 +
 +
document.write("Data2Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], "<br />");
 +
 +
NewDataArr = Data1Arr.slice(1,3);
 +
 +
document.write("NewDataArr = ",
 +
    NewDataArr[0], ",",
 +
    NewDataArr[1], ",",
 +
    NewDataArr[2], ",",
 +
    NewDataArr[3], ",",
 +
    NewDataArr[4], ",",
 +
    NewDataArr[5], ",",
 +
    NewDataArr[6], ",",
 +
    NewDataArr[7], "<br />");
 +
 +
document.write("Data2Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], "<br />");
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 +
[[Media:JavaScript Array slice.html|サンプル実行結果]]
  
 
== '''複数要素の置換 splice''' ==
 
== '''複数要素の置換 splice''' ==
 +
配列の複数の要素を特定の文字列要素に置換することができます。複数要素を置換する前提なので、配列の要素の個数を指定する必要があります。
  
 +
 +
配列要素1から3要素を文字列"●"にする場合は以下のようにして利用します。
 +
*strHoshitoriArr.splice(1, 3, "●");
 +
 +
 +
上記の場合、要素1の次の2および3の置換文字列が指定されていないので、要素が削除され、要素番号4が配列要素1の後ろに連結され、以降の番号もずれます。あらかじめ用意していた配列の後ろから2つは配列の中身を定義していない状態になります。
 +
 +
 +
*第一引数
 +
:置換開始要素番号
 +
 +
 +
*第二引数
 +
:複数の要素を指定する場合は、カンマ区切りで、置換する要素の大きさを指定する。とびとびの要素の置換は出来ません。
 +
 +
 +
*第三引数以降ブロック群
 +
:置換する値や文字列、要素数の数だけ指定します。足りない場合は配列要素は削除され、指定されていない分だけシフトして、結合するような処理がなされます。
 +
 +
 +
具体的な利用サンプルは以下のとおりです。
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript Array splice</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript Array splice<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
 +
 +
Data1Arr = new Array("○", "○", "○", "○", "○", "○", "○", "○", "○", "○", "○"); //定義
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
Data1Arr.splice(1, 5, "●", "●", "●");
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 +
[[Media:JavaScript Array splice.html|サンプル実行結果]]
  
 
== '''要素先頭追加 unshift''' ==
 
== '''要素先頭追加 unshift''' ==
 +
配列の先頭に新しい値や文字列を入れ、一番最後の要素は押し出されて、消えてしまうようなことはありません。配列全体の大きさが一つ増えて、最後の要素も残ります。
 +
 +
 +
以下のように使います。
 +
 +
 +
*DataArr.unshift(1);
 +
*DataArr.unshift("3222歩");
 +
 +
 +
という具合です。引数には値もしくは文字列を指定します。
 +
 +
 +
サンプルプログラムは以下のとおりです。
 +
 +
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript Array unshift</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript Array unshift<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
 +
 +
Data1Arr = new Array("☆", "○", "♪", "▽", "□", "◇", "～"); //履歴定義
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
Data1Arr.unshift("※");
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
  
 +
[[Media:JavaScript Array unshift.html|サンプル実行結果]]
  
 
== '''要素先頭の削除 shift''' ==
 
== '''要素先頭の削除 shift''' ==
 +
配列の先頭の要素を削除して、配列全体の要素番号が前側にひとつづつ詰められて、1小さい要素番号に変更されます。unshiftのときは追加するため引数の値が必要でしたが、このメソッドは、削除するだけの処理なので、引数は必要としません。以下のように利用します。
  
 +
 +
*DataArr.shift();
 +
 +
 +
これだけです。サンプルプログラムは以下のとおりです。
 +
 +
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript Array shift</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript Array shift<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
 +
 +
Data1Arr = new Array("☆", "○", "♪", "▽", "□", "◇", "～"); //履歴定義
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
Data1Arr.shift();
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 +
[[Media:JavaScript Array shift.html|サンプル実行結果]]
  
 
== '''要素末尾追加 push''' ==
 
== '''要素末尾追加 push''' ==
 +
スタック(積み重ね)をイメージしたような配列で、よくビュッフェなんかにある積み重ねられたトレイつまりはお盆に例えられるような配列の操作になります。一番最初にトレイ台(配列の先頭が台側です。)に置く操作も含めて、トレイ置き場にトレイを置くような操作がpushです。上に置かれているトレイほど要素番号は大きく積み重ねれば積み重ねるほどpushされたことになります。そして、トレイを取って配列を減らすような操作が次の項目で出てくるpopになります。配列といえばスタック操作というくらい頻繁に出てくる考え方です。pushとpopだけでスタック配列を操作する場合は一番最初の配列を取得するには全部のトレイを取り切らないといけないので、なんか不便そうに感じますが、そういうことではなく、一番最後に置いたデータを先に取り出す必要があるような手法と考えて下さい。
  
 +
 +
空の配列あるいは既存の配列に対しての、pushは以下のように記述します。
 +
 +
 +
*DataArr.push("下地");
 +
 +
 +
pushは配列の最後の要素に値を積み重ねる、つまりは配列要素を継ぎ足す操作ですので、第一引数には、積み重ねるデータを引数にします。
 +
 +
 +
サンプルプログラムは以下のとおりです。
 +
 +
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript Array push</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript Array push<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
 +
 +
Data1Arr = new Array(); //履歴定義
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
Data1Arr.push("下地");
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 +
[[Media:JavaScript Array push.html|サンプル実行結果]]
  
 
== '''要素末尾の取得と削除 pop''' ==
 
== '''要素末尾の取得と削除 pop''' ==
 +
前の項目でも少し触れましたがpushが積み込み処理であったのに対して、popは取り出し、つまり、一番上(配列要素番号が最大)のトレイを取って、配列そのものであったトレイ台からトレイが一つなくなるような動作になります。
  
 +
 +
使い方は以下のとおりです。
 +
 +
 +
*NewData = DataArr.pop();
 +
 +
 +
取り出して、配列から削除するだけなので、引数はありませんが、取り出した値を新たな変数に取り込むようにして、代入して格納するのが普通です。
 +
 +
 +
サンプルプログラムは以下のとおりです。
 +
 +
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript Array pop</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript Array pop<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
 +
 +
Data1Arr = new Array(); //履歴定義
 +
strData = new String();
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
Data1Arr.push("下地バンズ");
 +
Data1Arr.push("レタス");
 +
Data1Arr.push("パテ");
 +
Data1Arr.push("上地バンズ");
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
strData = Data1Arr.pop();
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
   
 +
    document.write("strData = ", strData, "<br />");
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 +
[[Media:JavaScript Array pop.html|サンプル実行結果]]
  
 
== '''配列全要素の文字列化出力＋カンマ区切り toString''' ==
 
== '''配列全要素の文字列化出力＋カンマ区切り toString''' ==
 +
配列にいろいろな値を格納した後にテスト用に画面に配列に格納されている内容をカンマ区切りで出力したりすることができるメソッドです。もちろん変数にカンマ区切りの文字列を格納してもよいです。
  
 +
 +
以下のようにして利用します。
 +
 +
 +
*strData = Data1Arr.toString();
 +
 +
 +
具体的なサンプルプログラムは以下のとおりです。
 +
 +
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript Array toString</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript Array toString<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
 +
 +
Data1Arr = new Array("☆", "○", "♪", "▽", "□", "◇", "～"); //履歴定義
 +
strData = new String();
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
strData = Data1Arr.toString();
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
   
 +
    document.write("strData = ", strData, "<br />");
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 +
[[Media:JavaScript Array toString.html|サンプル実行結果]]
  
 
== '''配列全要素の文字列化出力＋区切り文字指定 join''' ==
 
== '''配列全要素の文字列化出力＋区切り文字指定 join''' ==
 +
前の項目のtoStringは "," カンマ区切りで配列を接続した形式で出力するのに対して、このjoinでは、引数で指定する任意の文字列で配列を接続できます。例えば "→"で接続する場合は以下のようにします。
  
 +
 +
*strData = DataArr.join("→");
 +
 +
 +
サンプルプログラムは以下のとおりです。
 +
 +
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript Array join</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript Array join<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
 +
 +
Data1Arr = new Array("☆", "○", "♪", "▽", "□", "◇", "～"); //履歴定義
 +
strData = new String();
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
strData = Data1Arr.join("→");
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
   
 +
    document.write("strData = ", strData, "<br />");
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 +
[[Media:JavaScript Array join.html|サンプル実行結果]]
  
 
== '''配列反転 reverse''' ==
 
== '''配列反転 reverse''' ==
 +
読んで字のごとくですが、配列が反転します。つまり配列要素の先頭が、一番後ろに、一番後ろにあった要素はもちろん先頭にと、配列全体の要素が入れ替わります。単純ですが、このメソッドは自分でイチから作ろうとすると大変です。ありがたいことです。
  
 +
 +
以下のようにして利用します。
 +
 +
 +
*DataArr.reverse();
 +
 +
 +
これだけです。
 +
 +
 +
サンプルは以下のとおりです。
 +
 +
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript Array reverse</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript Array reverse<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
 +
 +
Data1Arr = new Array("☆", "○", "♪", "▽", "□", "◇", "～"); //履歴定義
 +
strData = new String();
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
 +
 +
strData = Data1Arr.reverse();
 +
 +
 +
document.write("Data1Arr = ",
 +
    Data1Arr[0], ",",
 +
    Data1Arr[1], ",",
 +
    Data1Arr[2], ",",
 +
    Data1Arr[3], ",",
 +
    Data1Arr[4], ",",
 +
    Data1Arr[5], ",",
 +
    Data1Arr[6], ",",
 +
    Data1Arr[7], ",",
 +
    Data1Arr[8], ",",
 +
    Data1Arr[9], ",",
 +
    Data1Arr[10], "<br />",
 +
    "Data1Arr.length = ", Data1Arr.length, "<br />");
 +
   
 +
    document.write("strData = ", strData, "<br />");
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 +
[[Media:JavaScript Array reverse.html|サンプル実行結果]]
  
 
== '''配列ソート＋ソート方法指定 sort ''' ==
 
== '''配列ソート＋ソート方法指定 sort ''' ==
 +
前の項目の配列の反転reverseの上を行く、実装の難しさ(自分で作ろうとすると大変な処理)を誇るメソッドです。これを使うだけでそれなりにいろいろな順番で配列の中身に沿った昇順・降順ソートができるようになります。どのようなソートができるのか？
 +
 +
 +
#数値順・昇順(数値がだんだん 大きくなっていくUp！ 英語ではascend、ascと略すことも多い)
 +
#数値順・降順(数値がだんだん 小さくなっていくDown！ 英語ではdescend、dscと略すことも多い)
 +
#文字コード順・昇順
 +
#文字コード順・降順
 +
#連想配列キー値・連想配列バリュー値の昇順/降順
 +
 +
 +
と、こんな感じです。引数には関数を書くこともできます。引数の関数のさらにその引数にはaやbといった二つの任意の名前の引数を指定することができます。この場合aが小さい要素番号の値をbが大きい要素番号の値を示していて、関数で処理される比較の結果として-1が帰ってきたなら、小さい値や文字コード番号値を後ろの要素番号に入れ替えるように処理され、要するに降順になります。sort関数の引数に比較用の引数として、関数を指定しない場合は単純な文字コードや数値の昇順ソートになります。
 +
 +
 +
つまり？
 +
 +
 +
降順にするには、そのあとreverseするか、関数で指定しないとダメってことになりますし、連想配列という方式のソートでも関数を指定しないといけないので、sort関数の引数として関数をあたえないと複雑なソートはできないってことになります。
 +
 +
 +
つまり？
 +
 +
 +
この関数、使いこなすには意外とややこしいです。
 +
 +
 +
と、ところで連想配列って何？
 +
 +
 +
ふむふむ、そうでした。説明していませんでした。それは単純に言うとobjectのプロパティ値を付けるようなもので、それが、配列のような形式で簡単に指定できるということなのです。今まで、要素番号には数値を設定していました。これを文字列にするとobjectのプロパティ値になるということです。それが配列になっているという、そんな構造です。
 +
 +
 +
つまり？
 +
 +
 +
以下のような表を配列として表現できることになります。
 +
 +
 +
{| class="wikitable sortable"
 +
|-
 +
! 配列要素番号!! 商品名 !! 価格 円
 +
|-
 +
| 0 || ボールペン || 100
 +
|-
 +
| 1 || 3色ボールペン(黒、赤、青) || 250
 +
|-
 +
| 2 || 1+2色ボールペン(シャーペン、黒、赤) || 400
 +
|}
 +
 +
 +
実は、連想配列は以下のようにして、初期化できます。
 +
*連想配列の初期化例
 +
:var Data1Arr = [
 +
:{goods_name:'ボールペン', price:100},
 +
:{goods_name:'3色ボールペン(黒、赤、青)', price:250},
 +
:{goods_name:'1+2色ボールペン', price:400}
 +
:];
 +
 +
 +
上記の連想配列の場合は、
 +
 +
 +
*Data1Arr[0].goods_name
 +
*Data1Arr[0].price
 +
 +
 +
という、Data1Arr[0]に文字出力はできない二つのプロパティをもったオブジェクトがぶら下がっていて、Data1Arr[0].goods_nameとData1Arr[0].priceの二つのプロパティの中身には文字列や数値が格納されています。要素0番には、"ボールペン" そして、100という数値がそれぞれ格納されています。これが連想配列です。他にも、配列ではない変数にすべてのキー値が異なるユニークなキー値をもった連想配列も作れます。ここでは上記のような配列の中に連想配列を保有している例を多用したいと思います。
 +
 +
 +
 +
で、なんでしたっけ？そうそう、sortです。おやじギャグ？ダジャレ？違います。sortです。配列に連想配列ではないデータがはいっていたとして単純には以下のように利用します。
 +
 +
 +
*Data1Arr.sort();
 +
 +
 +
これで、文字列データ順、あるいは数値データ順の昇順でソートがされます。これに引数をつけて、つまり引数に関数を指定して、ソートする方法について解説したいのでした。
 +
 +
 +
例えば、以下のようにするとソート方法を制御する関数を指定することができます。
 +
 +
:://降順ソート
 +
*Data1Arr.sort(function(BeforeElement,AfterElement){
 +
:::if(BeforeElement < AfterElement) return 1;
 +
:::if(BeforeElement > AfterElement) return -1;
 +
:::return 0
 +
::}
 +
:);
 +
 +
 +
と、関数の中身をがっつりと引数の中に書き込みする方法が一つです。もう一つは、以前の項目で説明したように[[JavaScript 関数|関数]]に名前をつけて
 +
 +
 +
*Data1Arr.sort(SortFunc);
 +
::…
 +
:://降順ソート
 +
::function SortFunc(BeforeElement,AfterElement) = {
 +
:::if(BeforeElement < AfterElement) return 1;
 +
:::if(BeforeElement > AfterElement) return -1;
 +
:::return 0
 +
::}
 +
::…
 +
 +
 +
のように、関数を別で定義してもよいです。関数には二つの引数をうけとり前の要素番号と後ろの要素番号を比較した場合に-1もしくは1もしくは0を返却するような関数を作ります。-1が返却される場合は小さい要素番号と大きい要素番号は入れ替わるように動作します。上記の例では、小さい要素番号と大きい要素番号を比較した結果、前の要素の方が小さい値なら、要素番号の大きい方に小さい値がくるように入れ替えなさいという命令になっていて、逆なら前の要素の方が大きい値なら小さい要素番号にくるように入れ替えしなさい。それ以外(同じ値)なら何もしない。という降順ソートを指定しています。昇順の場合は、ソート関数の引数を省略してよいので、何も書かなくてよいでしょう。
 +
 +
 +
そして、連想配列の場合は、どのプロパティ値を比較して、ソートするのかを関数を使って指定することができて、以下のように指定します。
 +
 +
 +
:://連想配列priceプロパティ基準の降順ソート
 +
*Data1Arr.sort(function(BeforeElement,AfterElement){
 +
:::if(BeforeElement.price < AfterElement.price) return 1;
 +
:::if(BeforeElement.price > AfterElement.price) return -1;
 +
:::return 0
 +
::}
 +
:);
 +
 +
 +
と、このように特定のプロパティ値を比較した結果に絞ることができます。ソート関数の引数は、他の配列に対してはあまり有効にはならないことがあるので、使いまわしにくいですが、特定のプロパティ値に集中してソートするようなソート関数の引数の関数は名前を付けて繰り返し再利用するような形式の記述を使うことも一つの手段になります。
 +
 +
 +
昇順ソートや降順ソートを、ソート関数の引数の中で指定した方が処理速度的にも早くなるし、スマートだとされていますが、いろいろな理由で昇順ソートしてから、それを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」から取得

個人用ツール
名前空間

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