配列
複数の値をまとめて扱うときには配列を用いる。
配列
- 宣言・初期化
-
- 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]); //高橋が出力
A | B | C | D | |
---|---|---|---|---|
1 | nums | 出力 | ||
2 | 5 | =nums | ||
3 | 2 | |||
4 | 3 | |||
5 | 4 | |||
6 | 2 | |||
7 | 6 | |||
8 | 7 | |||
9 |
この例では7つの値を1つの変数numsで扱える。
0 | 1 | 2 | 3 | 4 | 5 | 6 |
---|---|---|---|---|---|---|
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>
- 配列はconstで定義しても、中身は入れ替えることができる。
<script>
nums[3] = 10000;
document.write('出力:');
for(let i = 0; i < nums.length; i++){
document.write('[' + i + ':' + nums[i] + ']');
}
</script>
課題:配列の反転
- 実習用ファイル
- 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ファイルの「//配列が反転する用にプログラムを記せ。」の後に得られた配列が反転されるように足りないコードを記せ。
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
---|---|---|---|---|---|---|---|
a | b | c | d | e | f | g | h |
- アルゴリズム
-
- elements[0]とelements[配列の最後]を交換する
- elements[1]とelements[配列の最後 - 1]を交換する
- elements[2]とelements[配列の最後 - 2]を交換する
- elements[3]とelements[配列の最後 - 3]を交換する
ただし実際にはループを回して実行する。
- elements[ i ]とelements[配列の最後 - i ]を交換する
- 値の交換
-
- 2つの箱(変数)は詰まっている
a 値1 b 値2 - 空の箱(tmp)を用意する
tmp 空 a 値1 b 値2 - 箱tmpに箱aの中身(値1)を詰める。
tmp 値1 a 値1 b 値2 - 箱aに箱bの中身(値2)を詰める。
tmp 値1 a 値2 b 値2 - 箱bに箱tmpの中身(値1)を詰める。
a 値2 b 値1 tmp 値1 - 箱aと箱bの中身が入れ替わった。
a 値2 b 値1
- 2つの箱(変数)は詰まっている
課題:ミーティング
- 実習用ファイル
ミーティングの予定を立てたい。そこで予定表に出席可能な日に「○」を付けることにした。ミーティング開催可能な日に「可」と表示されるようにせよ。
- ミーティング開催条件
-
- 部長が出席し、それ以外に出席可能である人が2人以上いること
- 部長がいない場合、4人以上出席者がいること
- 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]);
<!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]);
}
<!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>