目次
1.はじめに
2.配列
3.配列の例題
4.多次元配列
5.多次元配列の例題
6.連想配列
7.連想配列の例題
8.おわりに
1. はじめに
本記事では、JavaScripの「配列」について記載する。
2. 配列
配列とは？
・複数のデータの集合を扱えるもの。
→1つの変数に対して、複数の値を格納できる。
・要素にインデックス番号(添字)でアクセスできる。
3. 配列の例題
(例)変数colorsを定義し、配列の中から要素を取り出す。
配列の区切り方
※添字は0から始まる。
・カンマ区切りの値をブラケット[...]で囲った形式で表現する。
配列の定義
例の図から、以下のように表記できる。
index.js
let colors = ['Red', 'Green', 'Blue', 'Yellow', 'Black'];
個々の要素の取り出し
index.js
配列名[インデックス番号];
例えば、配列からBlackを取り出してコンソールへ出力する場合は
index.js
console.log(colors[4]);
となる。コンソールの出力結果は以下のようになる。
4. 多次元配列
多次元配列とは？
配列の中に配列を入れるデータ構造を指す。
言い換えれば、配列の中に複数の配列を格納できるということ。
5. 多次元配列の例題
複数の配列から要素を取り出す
変数scoreとして配列を組んでいく。多次元配列のインデックス番号は下図の通り。
インデックス番号の見分け方は、
最初の[]の数値が行で、最後の[]の数値が列となる。
配列の作成
例題の図を参照しながら配列を組んでいくと以下のようになる。
index.js
let scores = [
[98, 100, 99],
[80, 81, 97],
[70, 96, 85]
];
※カンマ区切りを忘れないこと！！
値の取り出し
多次元配列も配列同様、値の取り出し方はほぼ一緒だが、念の為に取り出し方法を記載しておく。
index.js
配列名[インデックス番号][インデックス番号]
図より、1,2(97点のスコア)を取り出してコンソールへ出力する場合は
index.js
console.log(scores[1][2]);
となる。実際に出力された結果を見ると
となる。
6. 連想配列
連想配列とは？
・各要素を文字列キーでアクセス可能な配列
・Hash、Dictionary、Mapなどと呼ばれることもある。
7. 連想配列の例題
ユーザーの情報を取り出す
変数userとして個々の要素を取り出す。
配列の作成
表の中身を解説すると、
上段:key(キー)
下段:value(値)
となる。
記述方法として、以下のように記述する。
index.js
{キー名:値, キー名:値,・・・}
実際にJavaScriptで表記すると、
index.js
let user = { name: '山田太郎', gender: '男性', birth: '1990/3/4' };
と記述する。
個々の要素の取り出し
取り出し方法は以下のようにする。
index.js
オブジェクト名.プロパティ名
または
オブジェクト名['プロパティ名']
これをコンソールへ出力し、nameを取り出したい場合は
index.js
console.log(user.name);
// または
console.log(user['name']);
となる。
記述法は違うが出力される文字列は同じなので、同じ文字列が出力される。
8. おわりに
次項:はじめてのJavaScript⑬ 「配列の演習」に続く。
↧