(4) 配列変数

1.宣言と代入

配列は var 配列名 = new Array(添え字の最大値+1); と言う形で宣言する。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>1.宣言と代入</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--

var A = new Array(100);          //配列Aを宣言、添え字は0〜99まで
document.open();         //これと、最後のdocument.close()を入れないと、ブラウザによっては表示処理が終了しない

for (var I = 0; I < 100; I++) {
  A[I] = I * 10;
}
for (I = 0; I < 100; I+=2){
  document.write('A['+I+']='+A[I]+'<BR>');
}

document.close();

// -->
</SCRIPT>
<P align="center"><A href="jvs-4.html">戻る</A></P>
</BODY>
</HTML>


 




2.宣言と同時に代入

配列は var 配列名 = new Array(配列の要素をカンマで区切る); と言う形で宣言と同時に代入できる。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>2.宣言と同時に代入</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--

var A = new Array(1,2,3,'あ','い','う',7.5,8.6,9.7,10.8);          //配列Aを宣言し数字や文字を代入する。
document.open(); //これと、最後のdocument.close()を入れないと、ブラウザによっては表示処理が終了しない
for (var I = 0; I < 10; I++) {
  document.write('A['+I+']='+A[I]+'<BR>');
}
document.close();

// -->
</SCRIPT>
<P align="center"><A href="jvs-4.html">戻る</A></P>
</BODY>
</HTML>


 




3.多次元配列

JavaScriptの配列は他の言語と違って、Arrayオブジェクトのインスタンスとして扱うので、多次元配列は、1次元配列の全要素に新しい配列のインスタンスを代入することで宣言する。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>3.多次元配列</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--


var A = new Array(10);          //配列Aを宣言
for (var I = 0; I < 10; I++) {
  A[I] = new Array(10);         //Aの要素に配列のインスタンスを代入
}

for (var J = 0; J < 10; J++){
  for (I = 0; I < 10; I++){
    A[I][J]=I*J;
  }
}

document.open(); //これと、最後のdocument.close()を入れないと、ブラウザによっては表示処理が終了しない

document.write('<table border=1 width=800>')
for (var J = 0; J < 10; J++){
  document.write('<tr>');
  for (I = 0; I < 10; I++){
    document.write('<td>A['+I+']['+J+']='+A[I][J]+'</td>');
  }
  document.write('</tr>');
}
document.write('</table>');

document.close();

// -->
</SCRIPT>
<P align="center"><A href="jvs-4.html">戻る</A></P>
</BODY>
</HTML>


 




4.配列のメソッド

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

配列名.concat(追加したい要素の値をカンマで区切って並べる) 配列の要素を追加した新しい配列を返す。
元の配列は変わらない。
配列名.slice(添字1 , 添字2) 配列の「添字1」番目の要素から「添字2」番目の要素までの部分的な配列を返す。元の配列は変わらない。
配列名.pop() 配列の最後の要素を削除して、削除した要素の値を返す。
配列名.shift() 配列の最初の要素を削除して、削除した要素の値を返す。
2番目以降の要素は順に前にずれる。
配列名.unshift(追加したい要素の値をカンマで区切って並べる) 配列に要素を追加して、要素の数をを返す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>4.配列のメソッド</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--


var A = new Array(10);          //配列Aを宣言
for (var I = 0; I < 10; I++) {
  A[I] = new Array(10);         //Aの要素に配列のインスタンスを代入
}

for (var J = 0; J < 10; J++){
  for (I = 0; I < 10; I++){
    A[I][J]=I*J;
  }
}

document.open(); //これと、最後のdocument.close()を入れないと、ブラウザによっては表示処理が終了しない

document.write('<table border=1 width=800>')
for (var J = 0; J < 10; J++){
  document.write('<tr>');
  for (I = 0; I < 10; I++){
    document.write('<td>A['+I+']['+J+']='+A[I][J]+'</td>');
  }
  document.write('</tr>');
}
document.write('</table>');

document.close();

// -->
</SCRIPT>
<P align="center"><A href="jvs-4.html">戻る</A></P>
</BODY>
</HTML>


 



5.配列の並べ替え

配列名.reverse() 配列の順序を逆にする。
配列名.sort(順序関数) 先に「順序関数」を定義しておくとその関数のルールに従って配列を並べ替える。
「順序関数」を省略した場合はASCIIコード順?(未確認)

◆ 順序関数

通常の関数定義のルールに従って、引数が2つある関数を定義する。
例) Kuraberu(A,B)
返す値として、sort関数で並べ替えられる時に、Aの方を前に持っていきたい場合はマイナス、後ろに持っていきたい場合はプラス、どちらでも良い場合は0(ゼロ)を返す様に定義しておく。
関数定義については「(5) 関数の定義と使い方」を参照。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 7.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>5.配列の並べ替え</TITLE>
</HEAD>
<BODY>

<SCRIPT language="JavaScript">
<!--

MaxNum=100;
//---------------- 配列Aを宣言
var Ary = new Array(MaxNum);

//---------------- 比較関数を定義 (小さい順=昇順)
function compare(A,B){
    return A-B;
}

//---------------- 配列の要素に−100〜100までの乱数を代入
for(var I=0; I<MaxNum; I++){
Ary[I]=Math.floor(Math.random()*201-100);
}


//--------------- これと、最後のdocument.close()を入れないと、ブラウザによっては表示処理が終了しない
document.open();

//---------------- 配列の要素を表示

document.write('<table><tbody>');
document.write('<tr><td colspan="10" align="center">【乱数で生成した数字】</td></tr>');
for(I=0; I<MaxNum; I++){
    if ((I+1)%10==1){
        document.write('<tr>');
    }
    document.write('<td width="50" align="right">'+Ary[I]+'</td>');
    if ((I+1)%10==0){
        document.write('</tr>');    
    }
}

//---------------- 小さい順に並べ替える
Ary.sort(compare)
//---------------- 並べ替え後の配列の要素を表示
document.write('<tr><td colspan="10"><br></td></tr>');
document.write('<tr><td colspan="10" align="center">【並べ替えの結果】</td></tr>');
for(I=0; I<MaxNum; I++){
    if ((I+1)%10==1){
        document.write('<tr>');
    }
    document.write('<td width="50" align="right">'+Ary[I]+'</td>');
    if ((I+1)%10==0){
        document.write('</tr>');    
    }
}

//---------------- 順番を逆転させる
Ary.reverse()
//---------------- 逆転後の配列の要素を表示
document.write('<tr><td colspan="10"><br></td></tr>');
document.write('<tr><td colspan="10" align="center">【順番を逆転】</td></tr>');
for(I=0; I<MaxNum; I++){
    if ((I+1)%10==1){
        document.write('<tr>');
    }
    document.write('<td width="50" align="right">'+Ary[I]+'</td>');
    if ((I+1)%10==0){
        document.write('</tr>');    
    }
}

document.write('</tbody></table>');


//--------------- 表示処理終了
document.close();

// -->
</SCRIPT>
<P align="center"><A href="JavaScript:window.close()">閉じる</A></P>
</BODY>
</HTML>


 



戻る 進む