JavaScript 配列を作成するサンプル |

JavaScriptの配列を作成するサンプルです。

配列
配列リテラルで配列を作成する
Arrayオブジェクトで配列を作成する
要素の追加と更新
二次元配列を作成する
入れ子の構造の配列を作成する
配列をループで処理する(for...of文)

配列

ひとつの変数に複数の値を設定することができます。
要素の順序をインデックス(添字)で管理します。上記図では[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); //(3) ["赤", "黄", "青"]

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


const b = ["赤",1,true];

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

</script>

3行目は、リテラルで配列を作成しています。リテラルとはコード中に記述された値です。
後述のArrayオブジェクトより、配列リテラルのほうがわかりやすいです。
12行目は、配列の値に文字列型、数値型、論理型を指定しています。JavaScriptの配列では可能です。

Arrayオブジェクトで配列を作成する

Arrayオブジェクトで配列を作成するサンプルです。

<script>

const a = new Array("あ","い","う");

console.log(a[0]); // あ
console.log(a[1]); // い
console.log(a[2]); // う

const b = new Array(3);

b[0] = "A";
b[1] = "B";
b[2] = "C";

console.log(b); // ["A", "B", "C"]
</script>

3行目は、Arrayオブジェクトのコンストラクタで配列を作成しています。
9行目は、Arrayオブジェクトのコンストラクタで配列の数を定義し、11-13行目で値をセットしています。

要素の追加と更新

要素の追加と更新のサンプルです。

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

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

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

</script>

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

二次元配列を作成する

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

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

</script>

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

入れ子の構造の配列を作成する

入れ子の構造の配列を作成するサンプルです。

<script>

const a = [
	"色の種類",
	["赤","黄","青"],
	["緑","白","黒"]
];

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

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

</script>

3-7行目は、入れ子の構造の配列を作成しています。
13-15行目は、インデックス番号を2つ使用して配列の値を参照しています。

配列をループで処理する(for...of文)

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

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

for(const c of color1 ){
	console.log(c); //赤 黄 青
}
</script>

2行目は、配列です。
4-7行目は、for...of文で値を取得しています。