求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

配列の使い方

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


配列の使い方
f:id:yachin29:20160901003454j: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:yachin29:20160901013406j:plain


f:id:yachin29:20160901014814j:plain

広告を非表示にする