配列の使い方 - 未経験のwebサイト制作の勉強

配列とは複数の値を入れる事が出来る箱の事です。
今まで使っていた変数は1つにつき、1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまう、という特徴がありましたが、配列を使う事で同時に複数の値を収納出来るようになります。

配列の使い方
f:id:study-aaa:20190930221709p:plain

配列をArrayオブジェクトというオブジェクトとして扱います。
変数と同様「var」を記述。

基本形

var fruit =  new Array ('りんご', 'バナナ', 'みかん', 'もも');

省略形

var fruit = ['りんご', 'バナナ', 'みかん', 'もも'];

配列の値をすべて取得

<script>
var fruit =  new Array ('りんご', 'バナナ', 'みかん', 'もも');
console.log(fruit);
</script>

配列の値の一部を取得

<script>
var fruit =  new Array ('りんご', 'バナナ', 'みかん', 'もも');
console.log(fruit[1]);
</script>

配列に収納されている値の数を取得

<script>
var fruit =  new Array ('りんご', 'バナナ', 'みかん', 'もも');
console.log(fruit.length);
</script>

コンストラクタ関数を使用した記述

・引数には、配列の要素数を指定

<script>
var fruit = new Array(4);
fruit[0] = 'りんご';
fruit[1] = 'バナナ';
fruit[2] = 'みかん';
fruit[3] = 'もも';

</script>

配列はfor文などのループと組み合わせる事で、すべてのデータを一括処理でき非常に便利です。

<script>
var names = new Array(5);
names[0] = '山田太郎';
names[1] = '鈴木一郎';
names[2] = '佐藤花子';
names[3] = '田中健一';
names[4] = 'ロバート';

for (i = 0; i < names.length; i++) {
  document.write('<h2>こんにちは' + names[i] + 'さん</h2>');
}

</script>

一部のデータだけ呼び出す場合

<script>
var names = new Array(5);
names[0] = '山田太郎';
names[1] = '鈴木一郎';
names[2] = '佐藤花子';
names[3] = '田中健一';
names[4] = 'ロバート';

for (i = 0; i < names.length; i++) {
  document.write('<h2>こんにちは' + names[0] + 'さん</h2>');
  document.write('<h2>こんにちは' + names[4] + 'さん</h2>');
}

</script>

配列とfor文を組み合わせ、以下の表を作ってみましょう。
f:id:study-aaa:20190930221928p:plain

<br />