複数のデータを楽に管理する

2015年10月29日

配列とは、添え字と呼ばれる番号を使用して、１つの変数名で複数のデータをまとめて管理できるようにしたものです。

例をあげると、５０人分の名前を管理したいとき、通常の変数を使用する場合、５０個分の変数を用意しなければいけません。それに対し、今回紹介する配列を使えば、nameのような１つの変数名だけで５０個のデータをまとめて管理できます。

サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>配列管理</title>
   
</head>
<body>
    
<script>
    var members = new Array(4);
    members[0] = "犬";
    members[1] = "猫";
    members[2] = "猿";
    members[3] = "鳥";
    
    for( var i=0 ; i <= (members.length-1);i++){
        document.write("メンバー：",members[i],"<br>");
    }
</script>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

var members = new Array(4);

members[0] = "犬";

members[1] = "猫";

members[2] = "猿";

members[3] = "鳥";

for( var i=0 ; i <= (members.length-1);i++){

document.write("メンバー：",members[i],"<br>");

}

</script>

</body>

</html>

配列名と添え字

配列の格納された個々の数値のことを要素といいます。それぞれの要素には次の形式でアクセスします。

　配列名[添え字]

　配列名[添え字]

上記のように、配列名の後に添え字を角括弧「[ ]」で囲って書きます。このとき添え字は「０」から始めます。最初の要素の添え字は絶対に「０」になります。今回だと５０個の要素があるので、最後の要素の添え字は「４９」です。

配列はArrayオブジェクト

javaScriptでは、配列をArrayオブジェクトというオブジェクトして使います。配列を生成するにはnew演算子とArrayコンストラクタを使います。Arrayコンストラクタの引数には、要素数を設定します。

　var members;
　members = new Array(100);

1 2	var members; 　members = new Array(100);

配列を使うと処理が楽になります

データの塊を配列として管理する利点の１つが、for文などのループが絡むときです。すべてのデータを一括処理できる点です。この記事の上にも書いていますが、50個のデータを50個の変数に個別に格納していた場合、全てをブラウザに出力するにはdocument.writeを50個書かなければいけません。

それに対して、配列とfor文を組み合わせると上記同様の処理が数行でできます。Arrayオブジェクトに用意されているメソッドを利用すると、配列内の要素の並び替えなど手軽に行うことができます。

Arrayコンストラクタ

Arrayコンストラクタに要素数を引数として設定し、Arrayオブジェクトのインスタンスを生成します。

　var member = new Array(4);

1	var member = new Array(4);

これで、空の要素が４つの配列が生成されます。空と書きましたが、何も入っていないというわけではなく、各要素には「undefined」という特別な値が入っています。undefinedは「未定義」という意味です。

Arrayコンストラクタの引数に、直接要素の値を指定することができます。その場合要素をカンマ「,」で区切ります。

　var ken = new Array("神奈川県","千葉県","埼玉県");

1	var ken = new Array("神奈川県","千葉県","埼玉県");

lengthプロパティとfor文

配列の要素数は、lengthプロパティに格納されています。例えば、配列hairetsuの要素数は以下のようにして取得します。

　var hairetsu = members.length;

1	var hairetsu = members.length;

サンプルコードではfor文を使い配列membersの要素の0番目から順に出力しています。添え字が「０」から「lengthプロパティの数値 -1」という点が注意が必要です。