複数の変数をまとめて、一つの配列名で管理する考え方です。
配列の中の各一つ一つは要素と呼ばれ、それぞれは変数として扱えてます。
生成方法は次の2通りです。
var a = new Array(3); // (3の数を省略すると、空の配列が作れます)
var b = new Array("abc", 345 , "345");
これで、配列の変数a b はそれぞれ3つ要素持ちます。各要素は[と ]で囲む位置を指定してアクセスします。
例えば、aの配列の2番目要素に、123を記憶する場合は、次のように書きます。
a[1] = 123;
先頭要素は[0]の指定なので、2番目要素は[1] で指定します。この[ ]の指定する表現の番号は添え字またはインデックスと呼ばれます。
以下で、各要素をアクセスした結果を表示するボタンを用意しました。実験できます。
このボタンのソースを右に示す。<input type="button"value="alert( b[0] )"onclick="alert(b[0])">
上記例から分かるように、一つの配列で、種類が異なるデータを管理できます。その例を示します。
b[1]が数値、b[2]文字列なので、+1 の演算が数値加算、文字列連結と処理がことなる結果が得られます。
また 未設定の要素の値は変数と同じで、 undefined になることが確認できるでしょう。
なお 配列には、length というプロパティで、配列の要素の数が参照できます。
javascriptの配列の要素数は可変長で、追加や抜き出しが可能です。
aの配列の要素末尾に'xzy'の要素を追加する場合は、pushメソッドを使います。次で実験できます。
a.push('xzy'); このボタンのソースを下に示す。
<input type="button"value="a.push('xzy'); alert( a.length )"onclick="a.push('xzy'); alert( a.length )">
そして、末尾要素を取り出すにはpopメソッドを使います。変数c 取り出した例で示します。(これにより配列の要素数は1とつ減ります。)
var c=a.pop(); このボタンのソースを下に示す。
<input type="button"value="c=a.pop(); alert( c ); alert( a.length )"onclick="c=a.pop(); alert( c ); alert( a.length )">
このpush , pop メソッドでスタック操作が容易に可能です。
他に古いIEに対応していませんが、先頭に要素を追加するunsshift, 先頭要素を取り出すshiftメソッドもあります。
また bの配列でb[1]の要素を抜き出した新しい配列を得る場合は、sliceを使います。変数 c に記憶して表示確認している例です。(bの配列は変化していません。)
var c = b.slice(1,2); このボタンのソースを下に示す。
<input type="button"value="c = b.slice(1,2); alert(c[0]); alert(b.length)"onclick="c = b.slice(1,2); alert(c[0]); alert(b.length)">
Array.slice は配列の一部を切り出すが、要素全てを切り出すことで結果的に配列のコピーが作成される。
var b = new Array("abc", 345 , "345");
var b2 = b.slice(0);//bを複製したb2を作る
(Array.concat は配列に要素を追加した配列を返すものであるが、要素を追加しなければ 元々の配列のコピーが返される)
var b = new Array("abc", 345 , "345");
var b2 = b.concat();//bを複製したb2を作る