目次

オブジェクトなJavaScriptの基礎講座

Array(配列)オブジェクト

◆ はじめに

Array は1次配列のクラスです。インスタンス(配列名)とインデックス(添字)を用いてデータを管理するためのものです。

◆ 概説

Arrayクラスと new演算子を用いてArrayオブジェクトの作成を行います。配列の数は、( )の中に指定します。
尚、[ ] の中の文字をインデックスと言います。インデックスは 0 オリジン(はじまり)です。

例、

配列名(Arrayオブジェクトのインスタンス):a

配列サイズ:5

     var a = new Array(5) 

     for(i = 0; i < 5; i++)
         a[i] = i;

とすれば、a[0]〜a[4]へ以下の様にデータが入ります。

a[0]は0、a[1]は1、a[2]は2、a[3]は3、a[4]は4になります。

また、宣言時に初期化データを指定することもできます。

var boy = new Array("Hiro", "Yasu", "Macha");

boy[0]は "Hiro"、boy[1]は "Yasu"、boy[2]は "Macha"になります。 また、宣言されていない要素に対して代入すると自動的に配列要素が拡張されます。

boy[3] = "chaichanPAPA"

例1、色の値(RGB)をcol[0]〜col[5]に設定し、文字列を各々の色で表示する。

<script type="text/javascript">
     var col = new Array("0000FF", "00FF00", "00FFFF", "FF0000", "FF00FF", "FFFF00");
     for (i = 0; i < 6; i++){
         document.write("<span style=\"COLOR:#" + col[i] + "\">");
         document.write("Welcome To ChaichanPaPa's World.<BR>\n");
         document.write("</span>");
     }
     document.write("col.length="+col.length+"<br>");// lengthプロパティ
     col.reverse();                                        // reverseメソッド
     for (i = 0; i < 6; i++){
         document.write("<span style=\"COLOR:#" + col[i] + "\">");
         document.write("Welcome To ChaichanPaPa's World.<BR>\n");
         document.write("</span>");
     }
</script>

尚、document.writeはdocumentオブジェクトを参照してください。今回はブラウザ出力です。
例1の処理結果

◆ Arrayオブジェクトのプロパティ

  length      : 配列の長さ(要素の数)、手動で設定すると、配列の長さが強制的に変更されます。

サンプルは、例1を参照のこと。

◆ Arrayオブジェクトのメソッド

  join(separator)   : 配列の要素を順に連結した文字列を返します。
  reverse()         : 配列に対して、それを反転操作します。
 sort(sort関数)    : 配列を指定された規則にしたがってソートします。

joinメソッドの例

  // 配列の宣言&同時に初期化
  var a = new Array( "私達は" , "ちゃいちゃんと" , "いつも" , "一緒です!" );
  // 配列 a の連結
  var s = a.join( "、" );
  document.write( s );
実行結果

reverseメソッドの例

サンプルは、例1を参照のこと。

sortメソッドの例

sort(sort関数) 

sort関数は、次のようなルールに基づいてユーザーが作成します。

  1. 2つの引数を持ち。
  2. 1つ目の引数を、2つ目の引数より後方に持って来たい場合は、正の値を返す。
  3. 1つ目の引数と、2つ目の引数の順番を変えない場合は、0 を返す。
  4. 1つ目の引数を、2つ目の引数より前方に持って来たい場合は、負の値を返す。

小さい順に並べる。

<script type="text/javascript">
    var a = new Array ( 3 , 2 , 6 , 4 , 3);
    a.sort( Smaller );
      
    function Smaller( _num1 , _num2 )
    {
      return _num1 - _num2;
    }
    for (i = 0; i < 5; i++){
         document.write("a[" + i + "]=" + a[i] +"<BR>\n");
    }
</script>
実行結果

◆ 多次元配列

配列 a を2次配列 a[0][0] , a[0][1] , ..., a[x-1][y-1] にするには次のようにします。
尚、多次元配列も同様な感じで...。

  var a = new Array(x);
    for ( var i = 0 ; i < x ; i++ )
      a[i] = new Array(y);    

例、3×4の配列

<script type="text/javascript">
  var a = new Array(3);
   for ( var i = 0 ; i < 3 ; i++ ){
      a[i] = new Array(4);
   }
   a[0][0] = "0の0";
   a[2][0] = "2の0";
   a[0][3] = "0の3";
   a[2][3] = "2の3";
   for ( var i = 0 ; i < 3 ; i++ ){
      for ( var j = 0 ; j < 4 ; j++ ){
	document.write("a["+i+"]["+j+"]="+a[i][j]+"<br>");
      }
   }
</script>
実行結果

◆ 連想配列

連想配列は、Array配列と違い、配列のインデックスに文字を使ったものです。また、new演算子やコンストラクタは使用せず、以下のように定義します。

 var 連想配列名 = { "インデックスキー1":"値1" , "インデックスキー2":"値2" , "インデックスキー3":"値3" , .... };

連想配列の要素にアクセスするためには、次のようにします。 

連想配列名[ "インデックスキー名" ];

<script type="text/javascript">
    var a = { "key1":"value1" , "key2":"value2" , "key3":"value3" };
  
    document.write( a["key1"] +"<BR>")
    document.write( a["key2"] +"<BR>")
    document.write( a["key3"] +"<BR>")

    a["key4"] = "value4"; // 新しいキーと値を追加1
    a.key5 = "value5";    // 新しいキーと値を追加2
    document.write( a["key4"] +"<BR>");
    document.write( a["key5"] +"<BR>");
</script>
実行結果
補足

既存の連想配列に新しいキーと値を追加するのには、上記のようにします。
また、先ほど、new演算子やコンストラクタは使用せずと書きましたが、実際にはそれに相当する処理が行われている模様です。 それは、上記の通り、aそのものの振る舞いがオブジェクトそのものだからです...。

目次