LoginSignup
1
0

More than 1 year has passed since last update.

はじめてのJavaScript⑫ 「配列と連想配列」

Last updated at Posted at 2021-10-26

1. はじめに

本記事では、JavaScripの
「配列」
について記載する。

2. 配列

配列とは?

複数のデータの集合を扱えるもの。 →1つの変数に対して、複数の値を格納できる。

要素にインデックス番号(添字)でアクセスできる。

3. 配列の例題

(例)変数colorsを定義し、配列の中から要素を取り出す。

配列の区切り方

※添字は0から始まる。
スクリーンショット 2021-10-26 15.26.07.png
・カンマ区切りの値をブラケット[...]で囲った形式で表現する。


配列の定義

例の図から、以下のように表記できる。

index.js
let colors = ['Red', 'Green', 'Blue', 'Yellow', 'Black'];


個々の要素の取り出し

index.js
配列名[インデックス番号];

例えば、配列からBlackを取り出してコンソールへ出力する場合は

index.js
console.log(colors[4]);

となる。コンソールの出力結果は以下のようになる。
スクリーンショット 2021-10-26 15.37.50.png

4. 多次元配列

多次元配列とは?

配列の中に配列を入れるデータ構造を指す。

言い換えれば、配列の中に複数の配列を格納できるということ。

5. 多次元配列の例題

複数の配列から要素を取り出す

変数scoreとして配列を組んでいく。多次元配列のインデックス番号は下図の通り。
スクリーンショット 2021-10-26 15.46.28.png
インデックス番号の見分け方は、
最初の[]の数値がで、最後の[]の数値がとなる。


配列の作成

例題の図を参照しながら配列を組んでいくと以下のようになる。

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]);

となる。実際に出力された結果を見ると
スクリーンショット 2021-10-26 16.05.13.png
となる。

6. 連想配列

連想配列とは?

・各要素を文字列キーでアクセス可能な配列 ・HashDictionaryMapなどと呼ばれることもある。

7. 連想配列の例題

ユーザーの情報を取り出す

変数userとして個々の要素を取り出す。

配列の作成

スクリーンショット 2021-10-26 17.16.59.png
表の中身を解説すると、

上段: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']);

となる。
スクリーンショット 2021-10-26 17.27.32.png
記述法は違うが出力される文字列は同じなので、同じ文字列が出力される。

8. おわりに

次項:はじめてのJavaScript⑬ 「配列の演習」に続く。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0