JavaScript 配列の使い方のサンプル

JavaScriptの配列の使い方のサンプルです。

確認環境
・Google Chrome

配列とは
配列を作成/参照する
配列の値を追加/更新する
配列の各値をfor文のループで取得する
二次元配列を作成する

配列とは

１つの変数で複数の値を保持できます。
要素の順序をインデックス(添字)で管理します。上記図では[0]、[1]、[2]、[3]がインデックスです。
インデックスは0から始まります。
JavaScriptの配列は、要素ごとにデータ型が異なっていても格納可能です。
配列のオブジェクトとしてArrayオブジェクトがあります。
以下はMDNのArrayオブジェクトのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

配列を作成/参照する

配列の作成と参照のサンプルです。

<script>

const a = ["赤","黄","青"];
console.log(a[0]); // 赤
console.log(a[1]); // 黄
console.log(a[2]); // 青

const b = ["赤",1,true];
console.log(b); //(3) ["赤", 1, true]

const c = new Array("あ","い","う");
console.log(c); // (3) ["あ", "い", "う"]

const d = new Array(3);
d[0] = "A";
d[1] = "B";
d[2] = "C";
</script>

3行目は、リテラルで配列を作成しています。リテラルとはコード中に記述された値です。
4～6行目は、配列の各値を表示しています。
8行目は、配列の値に文字列型、数値型、論理型を指定しています。JavaScriptの配列では可能です。
11行目は、Arrayオブジェクトのコンストラクタで配列を作成しています。
14行目は、Arrayオブジェクトのコンストラクタで配列の数を定義し、その後、各値をセットしています。

配列の値を追加/更新する

配列の値の追加と更新のサンプルです。

<script>
const a = ["赤","黄","青"];

//追加
a[3] = "白";
console.log(a); //["赤","黄","青","白"]

//更新
a[1] = "オレンジ";
console.log(a); //["赤","オレンジ","青","白"]

</script>

5行目は、2行目に存在しないインデックスの3を指定してるので新しい要素として追加されます。赤、黄、青のインデックスはそれぞれ0,1,2です。
9行目は、2行目に存在するインデックスの1(黄)を指定して代入しているので更新します。

配列の各値をfor文のループで取得する

配列の各値をfor文のループで取得するサンプルです。

<script>
const color = ["赤","黄","青"];

for(const c1 of color ){
	console.log(c1); //赤 黄 青
}

for (let i = 0; i < color.length; i++) {
	console.log(color[i]); //赤 黄 青
}
</script>

4～6行目は、for...of文で値を取得しています。for...of文は書きやすいですがIE11は未対応なので注意して下さい。
8～10行目は、for文で配列の各値を取得しています。
以下は、MDNのfor...ofのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of

二次元配列を作成する

二次元配列を作成するサンプルです。

<script>

const a = [
	["赤","黄","青"],
	["緑","白","黒"]
];

console.log(a[0][0]); //赤
console.log(a[0][1]); //黄
console.log(a[0][2]); //青
console.log(a[1][0]); //緑
console.log(a[1][1]); //白
console.log(a[1][2]); //黒

//入れ子の構造
const b = [
	"色の種類",
	["赤","黄","青"],
	["緑","白","黒"]
];

console.log(b[0]); // 色の種類
console.log(b[1]); // (3) ["赤", "黄", "青"]
console.log(b[2]); // (3) ["緑", "白", "黒"]
console.log(b[1][0]); // 赤
console.log(b[1][1]); // 黄
console.log(b[1][2]); // 青
</script>

3～6行目は、二次元の配列を作成しています。
8～13行目は、インデックス番号を2つ使用して配列の値を参照しています。

16～20行目は、入れ子の構造の配列を作成しています。