JavaScript　２日目

投稿日：2021-12-03

更新日：2022-03-24

第３章：配列

配列の使い方

配列とは

複数の値を連番をつけて保存しておくデータの集合体のことを配列という。
通常一つの変数には一つの値しか入れることができないが、配列を使うと一つの変数に複数の値を入れ管理できる。

主に同じカテゴリーやグループに属する複数の値を管理する際に使用する

配列を作る：配列リテラル

var 変数= [];

「 [] 」を配列リテラルといい、変数に配列リテラルを代入するとその変数は配列として扱われる。（配列管理変数）

配列は複数の値を管理するため、変数内に直接値を管理せず、アドレス先にある広い場所（実際はメモリ領域）に値を管理する。

例）<var fruits = [];>

var fruits = [];
// ★例★
// 変数fruitsに配列領域用のアドレスを代入
// まだ複数の値は入れていない

console.log('１回目の出力');
console.log(fruits);
// 配列を管理している変数をコンソールに表示すると
// 配列内の内容をコンソールに表示

console.log(fruits.length);
// 配列作成時に自動的にできる「箱」みたいなもの
// 配列内の値の数（部屋数）が管理される

コンソールの表示結果がおかしい時は

コンソールの出力内容が「Array（数値）」と表示されている場合は
コンソールを再読み込みする。
ページ読み込み完了後にコンソールを表示すると起きる。

※これはプログラム実行後の最終的な配列情報。
　コンソール出力時点の配列ではないので注意。

配列内の部屋数を調べる

変数名.length;

配列はアドレス先に複数の値を管理する。
複数の値は0から始まる連番の部屋（要素）に管理される。

今現在配列管理している部屋数を調べるには「変数.length;」と記述する。

配列に値を入れる：代入

変数名[部屋番号]= 値;

変数に配列リテラルを代入した後、「変数名[部屋番号]」で配列の部屋番号を指定して値を代入する。部屋番号は要素番号やインデックス、番地と呼ぶこともある。
部屋番号は基本的に「0」から連番を振りながら使用していく。

fruits[0] = 'いちご';
fruits[1] = 'みかん';
fruits[2] = 'りんご';
// 配列内に複数の値を管理する時は
// 変数名の後に部屋番号を指定して、値を代入

配列内の値を使用（参照）する

変数名[部屋番号]

配列内の値を使用するには「変数名[部屋番号]」と記述する。変数名の後に部屋番号（インデックス）を記述するのを忘れないようにする。

※部屋番号は「0」から始まっている点にも注意

console.log('２回目の出力');
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
// 配列内の値を利用したい場合は
// 変数名の後に利用したい値の部屋番号を指定する

（例）「嵐（arashi）」で例えておさらい

// 嵐の名前を配列で管理する
var arashi = [];

arashi[0] = '大野';
arashi[1] = '松本';
arashi[2] = '相葉';
arashi[3] = '桜井';
arashi[4] = '二宮';

console.log(arashi);

// コンソールに何人Ｇか数値を表示する
console.log(arashi.length);

// コンソールにリーダーの名前を表示
console.log(arashi[0]);

まず「arashi」という箱を用意してから
各部屋にメンバーを配列する
誰が所属しているか表示
lengthでメンバーの数を表示
呼び出したい（表示したい）メンバーの部屋番号を指定する

配列内の値を変更する：代入

変数の時と同じように値の入っている配列の部屋にさらに値を代入すると配列内の値を変更できる。

fruits[1] = 'メロン';

console.log('３回目の出力');
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

配列内に新しい部屋を作る

配列内に部屋を追加する場合は新たな部屋番号を指定して値を代入する。新たな部屋番号は基本的に既存の部屋番号から連番で指定。
新しい部屋ができると部屋番号を管理している「length」の値も変更される。

fruits[3] = 'バナナ';

console.log('４回目の出力');
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[3]);

配列作成時に値を入れる：配列に初期値を入れる

var 変数名=[初期値, 初期値, 初期値, …];

配列作成時に値を代入する。「 [] 」の中にカンマ区切りで必要なだけ値を記述

記述した値は左から順番に0から連番で部屋番号が振られる

var areas = ['茨城', '栃木', '群馬'];

console.log('５回目の出力');
console.log(areas);
console.log(areas.length);
console.log(areas[0]);
console.log(areas[1]);
console.log(areas[2]);

配列内の値の変更も可能

areas[0] = '千葉';

console.log('６回目の出力');
console.log(areas);
console.log(areas.length);
console.log(areas[0]);
console.log(areas[1]);
console.log(areas[2]);

連番ではない部屋番号を指定して部屋を作成した場合

変数 areas に部屋番号「0」～「2」まで部屋ができている状態で部屋番号「4」を作成して値を代入してみる。既存の部屋番号と新しい部屋番号の間の部屋番号「3」が自動生成され連番が維持される。
※不要な部屋を作らないためにも部屋番号は連番で指定する。

areas[4] = '東京';

console.log('７回目の出力');
console.log(areas);
console.log(areas.length);
console.log(areas[0]);
console.log(areas[1]);
console.log(areas[2]);
console.log(areas[3]);
console.log(areas[4]);

改行で見やすい配列

var areas = [
  '茨城',
  '栃木',
  '群馬',
];

配列作成時に値を入れる場合、改行して記述すると見やすくなる。

部屋が追加されることを見越して最後の値の後に「,（カンマ）」を記述してもOK

【おさらい問題】好きな映画を3つ

①新しい配列を作成し好きな映画を三つ管理
②図を描いてみる
③「①」で作成した配列の部屋数をコンソールに表示
④「①」で作成した配列の最後の部屋にある映画をコンソールに表示

// 配列作成時に初期値を入れて作成
var movie = [
  '紅の豚',
  'Ｘ－ＭＥＮ',
  'ジャック',
];
console.log(movie);

console.log('3の解答');
console.log(movie.length);

console.log('4の解答');
console.log(movie[2]);
console.log(movie[movie.length - 1]);

<console.log(movie[movie.length - 1]);>
「 [] 」の中は結果的に部屋の「数字」になればOK

多次元配列の使い方

多次元配列とは

配列の部屋の中にさらに配列を入れて管理すること。
グループ化した大量のデータを一つの変数で扱えるため便利。

多次元配列を作る

例）３人の試験結果を多次元配列で管理する

　　合格点の80点に達するまで再試験があり、不合格者は合格するまで複数回
試験を受ける。

　　◆多次元配列で管理する試験結果は以下。

	１回目	２回目	３回目
１人目	60点	90点	―
２人目	20点	50点	95点
３人目	100点	―	―

var score = [
  [60, 90],      ← //0番地：１人目の試験結果
  [20, 50, 95],  ← //1番地：２人目の試験結果
  [100],         ← //2番地：３人目の試験結果
];

１次元目配列の値を使用（参照）する

１次元目配列は変数scoreのアドレス先にあるので、コンソールに表示するには
「console.log(score);」と記述する。
コンソールには「(3)[Array(2), Array(3), Array(1)]」と表示される

console.log('１次元の出力');
console.log(score);
console.log(score.length);

１次元目の各部屋には配列のアドレスが入っているため、「Array(部屋数)」という表示になる。（「Array」は配列を意味する）

１次元目配列の部屋数を調べる場合も変数 score が持つアドレス先の「length」を調べればいいので「console.log(score.length)」と記述する。
３人分の部屋があるので「3」と表示される。

２次元目配列の値を使用（参照）する

２次元目配列は１次元目の各部屋の先にあるので、１次元目の部屋番号を指定した上で使用する。

console.log('１人目の試験結果');
console.log(score[0]);

例えば１次元目の部屋番号0が持つ配列をコンソールに表示するには
「console.log(score[0]);」と記述する。
コンソールには「(2)[60,90]」と表示される。

コンソール出力内容

２次元目配列の各部屋の値を使用するには２次元目配列の部屋番号も指定する。
コンソールに表示するには下のように記述

console.log('１人目の試験結果');
console.log(score[0]);
console.log(score[0].length);
console.log(score[0][0]);
console.log(score[0][1]);

２次元目配列の部屋数を調べる

配列の部屋数を調べるには「length」を使用する。
今回は２次元目配列内の部屋数を調べるため１次元目の部屋番号を指定した上で
「length」を記述する。

console.log('１人目の試験結果');
console.log(score[0]);
console.log(score[0].length);

結果として表示される「値」には文字列が追加できる

数値だけでは、何の数値かわからないため文字列を表示させるとわかりやすい。

console.log('問題3-5');
console.log('１：２人目の試験回数をコンソール表示');
console.log(score[1].length + '回');

後ろにも前にも追加できる

console.log('２人目の試験回数' + score[1].length + '回');

追加問題

// 追加問題
// 2人目の合格時点数を表示すること
// 試験回数が減っても増えても合格時点数が表示されるようにする
console.log('追加問題');
// console.log(score[1][2]);
console.log('２人目の合格時点数');
console.log('v(゜∀゜)v  ' + score[1][score[1].length - 1] + '点');

◆追加問題の別解答

console.log('追加問題【別解答】');
var num = 1 ;
console.log(score[num][score[num].length - 1] + '点');

<var num>の右辺（試験を受けた人）を変更すると、その人の合格時点数が表示される

おさらい問題

４人の人がそれぞれドーナツ屋さんで買い物をした問題

var donut = [
  ['コーヒー', 'チョコファッション',],
  ['ポンデリング',],
  ['コーラ', 'オールドファッション', 'ポンデリング',],
  ['オレンジジュース', 'ハニーチュロ',]
]
 * 三人目が買った商品の個数をブラウザに出力させなさい。
*/
document.getElementById('answer4').innerHTML
  = '3人目が買った個数 ： ' + donut[2].length + '個';

// 応用
var num = 3;
document.getElementById('answer4').innerHTML
  = '★' + num + '人目が買った個数 ： ' + donut[num - 1].length + '個';

<var num>の右辺【購入した人】を変更すると、その人が買った個数が表示される

カテゴリー

ブログ一覧

コメントは受け付けていません。

JavaScript ２日目