JavaScript二次元配列の作成
2024-08-18
JavaScript での二次元配列の作成
JavaScript には厳密な二次元配列のデータ型はありませんが、配列の配列として表現することができます。つまり、各要素が配列であるような一次元配列を作成します。
方法
ネストされた配列リテラル
最もシンプルな方法です。
const array2d = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
for ループによる作成
より動的な配列を作成する場合に便利です。
const rows = 3;
const cols = 3;
const array2d = [];
for (let i = 0; i < rows; i++) {
array2d[i] = [];
for (let j = 0; j < cols; j++) {
array2d[i][j] = i * cols + j + 1; // 例えば、値を計算して設定
}
}
Array.from() メソッド
配列を作成する便利な方法です。
const rows = 3;
const cols = 3;
const array2d = Array.from({ length: rows }, () => new Array(cols));
アクセスと操作
二次元配列の要素にアクセスするには、インデックスを使用します。
console.log(array2d[1][2]); // 出力: 6
配列の要素を変更することもできます。
array2d[0][0] = 10;
注意点
- 配列の要素に
nullやundefinedが含まれる場合、注意が必要です。 - JavaScript の配列は可変長なので、行や列の数を事前に指定する必要はありません。
応用例
二次元配列は、行列計算、ゲームボード、画像処理など、さまざまな場面で使用されます。
例: ゲームボード
const board = [
[' ', ' ', ' '],
[' ', ' ', ' '],
[' ', ' ', ' ']
];
JavaScript で二次元配列を作成するには、配列の配列を使用します。ネストされた配列リテラル、for ループ、Array.from() メソッドなど、さまざまな方法があります。適切な方法を選択して、目的の二次元配列を作成してください。
JavaScript 二次元配列のコード解説
const array2d = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
- 解説
const array2dで、定数array2dを宣言し、初期化しています。[ ... ]は配列リテラルを表します。- 内側の
[1, 2, 3]などは、それぞれ配列の要素であり、これらが外側の配列の要素となっています。 - この方法では、直接的に二次元配列を定義することができます。
const rows = 3;
const cols = 3;
const array2d = [];
for (let i = 0; i < rows; i++) {
array2d[i] = [];
for (let j = 0; j < cols; j++) {
array2d[i][j] = i * cols + j + 1; // 例えば、値を計算して設定
}
}
- 解説
rowsとcolsに行数と列数をそれぞれ設定します。array2dを空の配列として初期化します。- 外側の
forループで、行を処理します。array2d[i]で、各行に対応する空の配列を作成します。
- 内側の
forループで、列を処理します。array2d[i][j]で、各要素に値を設定します。- ここでは、計算式
i * cols + j + 1を使用して値を生成していますが、任意の値を設定できます。
Array.from() メソッドによる作成
const rows = 3;
const cols = 3;
const array2d = Array.from({ length: rows }, () => new Array(cols));
- 解説
Array.from()メソッドを使用して、指定した長さの配列を作成します。- 第1引数のオブジェクトは、
lengthプロパティを持つ必要があります。 - 第2引数のコールバック関数は、各要素の初期値を返す関数です。
- ここでは、
new Array(cols)で、各行にcols個の要素を持つ配列を作成しています。
console.log(array2d[1][2]); // 出力: 6
array2d[0][0] = 10;
- 解説
array2d[1][2]で、2 行 3 列目の要素にアクセスします。array2d[0][0] = 10で、1 行 1 列目の要素を 10 に変更します。
Array.fill() を使った方法
const rows = 3;
const cols = 3;
const array2d = Array(rows).fill(Array(cols));
- 解説
Array(rows)で、長さrowsの配列を作成します。fill(Array(cols))で、すべての要素を長さcolsの配列で埋めます。
注意
この方法は、すべての行が同じ配列を参照するため、ある行を変更すると他の行にも影響が出ます。
const rows = 3;
const cols = 3;
const array2d = Array(rows).fill().map(() => Array(cols));
- 解説
Array(rows).fill()で、長さrowsの配列を作成し、すべての要素をundefinedで埋めます。map()メソッドで、各要素を長さcolsの配列に変換します。
カスタム関数による作成
function create2DArray(rows, cols) {
const array2d = [];
for (let i = 0; i < rows; i++) {
array2d[i] = new Array(cols);
}
return array2d;
}
const array2d = create2DArray(3, 3);
- 解説
create2DArray関数で、行数と列数を受け取り、二次元配列を作成します。forループを使用して、各行に長さcolsの配列を作成します。
性能とメモリ考慮点
- データ型
JavaScript の配列は柔軟ですが、数値計算など特定の用途では、他のデータ構造（例えば、TypedArray）の方が効率的な場合があります。 - 配列の作成コスト
forループやArray.from()は、多くの要素を作成する場合、パフォーマンスに影響を与える可能性があります。 - 配列の共有
Array.fill()を使用する場合、すべての行が同じ配列を参照するため、メモリ効率が良いように見えますが、変更の影響が他の行に及ぶため、注意が必要です。
JavaScript で二次元配列を作成する方法は複数ありますが、それぞれの方法には特徴と注意点があります。使用する状況に応じて、適切な方法を選択してください。また、性能やメモリ使用量も考慮することが重要です。
javascript arrays multidimensional-array
