JavaScript Multidimensional Array (日本語)

Summary: このチュートリアルでは、JavaScriptの多次元配列の扱い方を学びます

Introduction to JavaScript multidimensional array

JavaScriptは多次元配列をネイティブには提供していません。

このことから、JavaScriptの多次元配列は、配列の配列であると言えます。 多次元配列を定義する最も簡単な方法は、配列リテラル記法を使うことです。

空の多次元配列を宣言するには、一次元配列を宣言するのと同じ構文を使います。

let activities = ;
Code language: JavaScript (javascript)

次の例では、activitiesという名前の二次元配列を定義しています。

let activities = , , , , ];
Code language: JavaScript (javascript)

activitiesの配列では、1つ目の次元がアクティビティを表し、2つ目の次元がそれぞれの1日あたりの時間数を表しています。

コンソールでactivitiesconsole.table()メソッドを使用します。

console.table(activities);
Code language: JavaScript (javascript)

以下はその出力例です。

┌─────────┬─────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼─────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Eat' │ 1 ││ 2 │ 'Commute' │ 2 ││ 3 │ 'Play Game' │ 1 ││ 4 │ 'Sleep' │ 7 │└─────────┴─────────────┴───┘
Code language: JavaScript (javascript)

(index) の列は、内側の配列のインデックスを示す説明のためのものであることに注意してください。

多次元配列の要素にアクセスするには、まず角括弧を使って、内側の配列を返す外側の配列の要素にアクセスし、次に別の角括弧を使って内側の配列の要素にアクセスします。

次の例では、上記のactivities配列の最初の内側の配列の2番目の要素を返します。

console.log(activities); // 9
Code language: JavaScript (javascript)

JavaScriptの多次元配列に要素を追加する

多次元配列の要素を操作するには、push()splice()などのArrayメソッドを使用することができます。

例えば、多次元配列の最後に新しい要素を追加するには、次のようにpush()のメソッドを使用します。

activities.push();console.table(activities);
Code language: CSS (css)

┌─────────┬─────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼─────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Eat' │ 1 ││ 2 │ 'Commute' │ 2 ││ 3 │ 'Play Game' │ 1 ││ 4 │ 'Sleep' │ 7 ││ 5 │ 'Study' │ 2 │└─────────┴─────────────┴───┘
Code language: JavaScript (javascript)

配列の途中に要素を挿入するには、splice()メソッドを使用します。

activities.splice(1, 0, );console.table(activities);
Code language: CSS (css)

以下は出力です:

┌─────────┬───────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼───────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Programming' │ 2 ││ 2 │ 'Eat' │ 1 ││ 3 │ 'Commute' │ 2 ││ 4 │ 'Play Game' │ 1 ││ 5 │ 'Sleep' │ 7 ││ 6 │ 'Study' │ 2 │└─────────┴───────────────┴───┘
Code language: JavaScript (javascript)

この例では、各アクティビティに費やした時間の割合を計算し、その割合を内側の配列に追加します。

activities.forEach(activity => { let percentage = ((activity / 24) * 100).toFixed(); activity = percentage + '%';});console.table(activities);
Code language: JavaScript (javascript)

コンソールでの出力を以下に示します。

┌─────────┬───────────────┬───┬───────┐│ (index) │ 0 │ 1 │ 2 │├─────────┼───────────────┼───┼───────┤│ 0 │ 'Work' │ 9 │ '38%' ││ 1 │ 'Programming' │ 2 │ '8%' ││ 2 │ 'Eat' │ 1 │ '4%' ││ 3 │ 'Commute' │ 2 │ '8%' ││ 4 │ 'Play Game' │ 1 │ '4%' ││ 5 │ 'Sleep' │ 7 │ '29%' ││ 6 │ 'Study' │ 2 │ '8%' │└─────────┴───────────────┴───┴───────┘
Code language: JavaScript (javascript)

JavaScriptの多次元配列から要素を削除する

配列から要素を削除するには、pop()splice()メソッドを使用します。

例えば、以下の記述は、activitiesの配列の最後の要素を削除します。

activities.pop();console.table(activities);
Code language: CSS (css)

Output:

┌─────────┬───────────────┬───┬───────┐│ (index) │ 0 │ 1 │ 2 │├─────────┼───────────────┼───┼───────┤│ 0 │ 'Work' │ 9 │ '38%' ││ 1 │ 'Programming' │ 2 │ '8%' ││ 2 │ 'Eat' │ 1 │ '4%' ││ 3 │ 'Commute' │ 2 │ '8%' ││ 4 │ 'Play Game' │ 1 │ '4%' ││ 5 │ 'Sleep' │ 7 │ '29%' │└─────────┴───────────────┴───┴───────┘
Code language: JavaScript (javascript)

同様に、pop()activitiesの配列の内側の配列からパーセンテージの要素を削除しています。

activities.forEach((activity) => { activity.pop(2);});console.table(activities);
Code language: JavaScript (javascript)

Output:

┌─────────┬───────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼───────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Programming' │ 2 ││ 2 │ 'Eat' │ 1 ││ 3 │ 'Commute' │ 2 ││ 4 │ 'Play Game' │ 1 ││ 5 │ 'Sleep' │ 7 │└─────────┴───────────────┴───┘
Code language: JavaScript (javascript)

JavaScriptの多次元配列の要素を反復する

多次元配列を反復するには、以下の例のように入れ子になったforループを使用します。

// loop the outer arrayfor (let i = 0; i < activities.length; i++) { // get the size of the inner array var innerArrayLength = activities.length; // loop the inner array for (let j = 0; j < innerArrayLength; j++) { console.log(' = ' + activities); }}
Code language: JavaScript (javascript)

最初のループは外側の配列の要素を繰り返し処理し、入れ子になったループは内側の配列の要素を繰り返し処理します。

コンソールにスクリプトの出力が表示されます。

 = Work = 9 = Eat = 1 = Commute = 2 = Play Game = 1 = Sleep = 7 = Study = 2

または、forEach()メソッドを2回使用することもできます。

activities.forEach((activity) => { activity.forEach((data) => { console.log(data); });});
Code language: JavaScript (javascript)

Output:

Work9Eat1Commute2Play Game1Sleep7Study2

このチュートリアルでは、配列の配列を使ってJavaScriptの多次元配列を作成する方法を学びました。