JavaScript講座

配列

複数の値をまとめて扱うときには配列を用いる。

配列

宣言・初期化
  • const 配列名 = new Array();
  • const 配列名 = [配列の中身1,配列の中身2,…]
  • const 配列名 = [];
    配列名[インデックス] = 値1;
    配列名[インデックス] = 値2;
const members = new Array();
members[0] = '高橋' //membersの0番（最初）に「高橋」を代入
document.write (members[0]); //「高橋」が出力
配列自体（入れ物)
配列名
配列の中の入れ物
配列名[インデックス]
一度に初期化する
const members = new Array('高橋','新垣');
document.write (members[0]); //高橋が出力
ABCD
1nums出力
25=nums
32
43
54
62
76
87
9

この例では7つの値を1つの変数numsで扱える。

配列numsの中身
0123456
A2
5		A3
2		A4
3		A5
4		A6
2		A7
6		A8
7

配列要素には0から連番が振られる。たとえば前から4番目の値を指示したいときにはnums[3]とする。

  • 配列の初期化…const 配列名 = [配列の中身1,配列の中身2,…]
  • 配列の箱の数(長さ)は配列名.lengthで取得できる。
htmlテンプレート
<script>
const nums = [5, 2, 3, 4, 2, 6, 7];
document.write('出力:');
for(let i = 0; i < nums.length; i++){
document.write('[' + i + ':' + nums[i] + ']');
}
</script>
<script>
nums[3] = 10000;
document.write('出力:');
for(let i = 0; i < nums.length; i++){
document.write('[' + i + ':' + nums[i] + ']');
}
</script>

課題:配列の反転

実習用ファイル
ABCD
1elements反転
9
input_elements

A2:A8…<input name="rev">

document.getElementsByName('rev')

elements
input_elementsの値配列 
const elements = [];
const input_elements = document.getElementsByName('rev');
for(let i=0;i<input_elements.length; i++){
  if(input_elements[i].value!=""){
    elements[i]=input_elements[i].value;
  }
}

ダウンロードしたhtmlファイルの「//配列が反転する用にプログラムを記せ。」の後に得られた配列が反転されるように足りないコードを記せ。

elements
01234567
abcdefgh
アルゴリズム
  1. elements[0]とelements[配列の最後]を交換する
  2. elements[1]とelements[配列の最後 - 1]を交換する
  3. elements[2]とelements[配列の最後 - 2]を交換する
  4. elements[3]とelements[配列の最後 - 3]を交換する

ただし実際にはループを回して実行する。

  • elements[ i ]とelements[配列の最後 - i ]を交換する
値の交換
  1. 2つの箱(変数）は詰まっている
    a
    値1
    b
    値2
  2. 空の箱(tmp)を用意する
    tmp
    空
    a
    値1
    b
    値2
  3. 箱tmpに箱aの中身(値1)を詰める。
    tmp
    値1
    a
    値1
    b
    値2
  4. 箱aに箱bの中身(値2)を詰める。
    tmp
    値1
    a
    値2
    b
    値2
  5. 箱bに箱tmpの中身(値1)を詰める。
    a
    値2
    b
    値1
    tmp
    値1
  6. 箱aと箱bの中身が入れ替わった。
    a
    値2
    b
    値1

課題:ミーティング

実習用ファイル

ミーティングの予定を立てたい。そこで予定表に出席可能な日に「○」を付けることにした。ミーティング開催可能な日に「可」と表示されるようにせよ。

ミーティング開催条件
  • 部長が出席し、それ以外に出席可能である人が2人以上いること
  • 部長がいない場合、4人以上出席者がいること
ABCD
1名前役職出欠
2小片副部長
3山岸部長
4新沼
5谷本
6岸本
7浅倉
8小野
9小野田
10秋山
11開催可否
12
input_elements

C2:C10…<select name="yes"></select>

document.getElementsByName('yes')

const input_elements = document.getElementsByName('yes');
部長の出欠manager
  • = parseInt(input_elements[1].value);
それ以外の部員出席者数members
  • = parseInt(input_elements[0].value);
  • += parseInt(input_elements[2].value);
  • += parseInt(input_elements[3].value);
  • …
  • 出席…1,欠席…0
  • parseInt(char_num)…文字を数値に変換する(cf.ExcelのVALUE関数)

連想配列のようなもの

インデックスを文字列
const 配列名 = new Object();
あるいは
const 配列名 = {};
  • 配列名[インデックス] = 値1;
  • 配列名.インデックス = 値2;
const members = new Object();
members[leader] = '高橋''
members.center = '高橋';

※membersの「leader」箱に「高橋」を代入

一度に初期化する
members = {leader: '高橋',subleader : '新垣'};
値の取り出し
document.write (members[leader]);
array2.html
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8" />
   <title>いわゆる連想配列</title>
   <script>
const groups = {'モ' : 'モーニング娘。', 'ベ' : 'Berryz工房', 'キ' : '℃-ute',
 'マ' : '真野恵里菜', 'ス' : 'スマイレージ'};
const members = new Object();
//const members = {};でもよい。
members['leader'] = '飯田';
members.center = '安倍';
   </script>
</head>
<body>
<h1>いわゆる連想配列</h1>
<dl>
<script>
    document.write(groups['ス'] + '<br>');
    document.write(groups.モ + '<br>');
    document.write(members['leader'] + '<br>');
    document.write(members.center);
</script>
</dl>
</ul>
</body>
</html>

配列をすべて取り出す

配列の取り出し
const members = new Array('高橋','新垣');
for(let i = 0; i < members.length; i++){
    document.write(members[i]);
}
const members = new Array('高橋','新垣');
for(let index in members){
    document.write(members[index]);
}
連想配列の取り出し
const members = {leader: '高橋',subleader : '新垣'};
for(let index in members){
    document.write(members[index]);
}
array3.html
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8" />
   <title>配列取り出し</title>
<script>
const members = new Array();

members[0] = '藤本';
members[1] = '高橋';
members[2] = '新垣';
members[3] = '亀井';
members[4] = '道重';
members[5] = '田中';
members[6] = '久住';
members[7] = '李';
members[8] = '銭';

const groups = {モ : 'モーニング娘。', ベ : 'Berryz工房', キ : '℃-ute', マ : '真野恵里菜', ス : 'スマイレージ'};
</script>
</head>
<body>
<h1>配列取り出し</h1>
<ul>
<script>
//配列groupsの取り出し
for(let i = 0; i < members.length; i++){
    document.write ("<li>"+members[i]+"</li>");
}
</script>
</ul>
<dl>
<script>
//連想配列groupsの取り出し
for(let index in groups){
    document.write ("<dt>" + index + "</dt>");
    document.write ("<dd>" + groups[index] + "</dd>");
}
</script>
</dl>
</body>
</html>