JavaScript - 配列の初期化 まとめ
JavaScriptの配列の初期化についてのコンテンツです。
配列を、空、0、文字列、連番で初期化する方法や、 2次元配列の作成と初期化、ループやpush()、fill()を利用した初期化などを紹介します。
配列を初期化して空にする
配列を初期化して空にする場合は、2通りあります。新規配列
新規に配列を作成する場合は、配列リテラルかArrayコンストラクタで作成します。
宣言時に要素を指定しなければ、空になります。
// 配列リテラル
var arr = [];
console.log(arr); // Array [ ]
// Array() コンストラクタ
var arr2 = new Array();
console.log(arr2); // Array [ ]
すでに存在する配列
すでにある配列を空にする場合は、
「配列 = [];」とする方法と、「length プロパティを0にする」方法があります。
var arr = [1, 2, 3, 4, 5];
var arr2 = [1, 2, 3, 4, 5];
// 配列 = [];
arr = [];
console.log(arr); // Array [ ]
// length プロパティを0にする
arr2.length =0;
console.log(arr2); // Array [ ]
配列を「0」で初期化
ループ
「0」で初期化する場合は、要素数だけループを回して「0」を代入します。
var arr = [];
var len = 5; // 配列の要素数
for (var i = 0; i < len; i++){
arr[i] = 0; // 0 で初期化
}
console.log(arr); // Array [ 0, 0, 0, 0, 0 ]
fill()メソッド
fill()メソッドを使うと、もっとシンプルに「0」で初期化できます。
var arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // Array [ 0, 0, 0, 0, 0 ]
配列を「文字列」で初期化
ループ
特定の文字列で初期化する場合は、要素数だけループを回して「特定の文字列」を代入します。
var arr = ["a", "b", "c", "d", "e"];
var initial_value = "z"; // 初期化したい特定の文字列
var len = arr.length // 配列の長さを取得
for (var i = 0; i < len; i++){
arr[i] = initial_value;
}
console.log(arr); // Array [ "z", "z", "z", "z", "z" ]
fill()メソッド
fill()メソッドを使うとシンプルになります。
var arr = ["a", "b", "c", "d", "e"];
var initial_value = "z"; // 初期化したい特定の文字列
arr.fill(initial_value);
console.log(arr); // Array [ "z", "z", "z", "z", "z" ]
fill()メソッドで初期化
上の2つの例で見たように、特定の値で初期化する場合は fill()メソッドを使うとコードがシンプルになります。
fill()メソッドの書式は次の通りです。
配列.fill(値);
fill()メソッドは最大3つの引数を指定でき、 開始インデックスや終了インデックスを指定することもできます。
配列の長さを取得して初期化
fill()メソッドを使わない場合は、 配列の長さ（length 要素数）を取得してループで回します。
ループを使った具体的なコードは、上の２つのサンプルで見た通りです。
連番で初期化
[0,1,2,3]のような連番で初期化する場合は、ループ(for文）を使う方法と、 keys()メソッドを使う方法があります。ループ(for文）
連番用の変数を用意して、ループで回る度に変数に「1」を足します。
var arr = new Array(10);
var serial_num = 1; // 連番用
for (var i = 0; i < arr.length; i++){
arr[i] = serial_num;
serial_num++;
}
console.log(arr); // Array [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
keys()メソッド
keys() メソッドはES2015で追加されたメソッドです。
連番が0から始まる場合は次のように記述します。
var arr = [...Array(10).keys()];
console.log(arr); // Array [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
0から始まらない場合は、map()メソッドも使います。
var arr = [...Array(10).keys()].map(i => ++i);
console.log(arr); // Array [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
このように keys() メソッドを使うと1行でシンプルに記述できます。
push()メソッドで追加（初期化）
push()メソッドは配列の末尾に要素を追加するメソッドですが、 使い方によっては配列の初期化に使用することもできます。
次のJavaScriptサンプルコードは固定値「0」で配列を初期化。
最初に配列を空にして、その後にpush()で追加します。
var arr = [1,1,2,2,3];
var len = arr.length; // 配列の要素数
var initial_value = 0; // 初期化する固定値
arr = []; // 配列を空にする
for (var i = 0; i < len; i++){
arr.push(initial_value); // 追加
}
console.log(arr); // Array [ 0, 0, 0, 0, 0 ]
2次元配列の作成と初期化
ここでは次のような2行3列の2次元配列を作成・初期化します。
| 0 | 0 | 0 |
| 0 | 0 | 0 |
配列リテラルで作成・初期化
配列リテラルを使って2次元配列を作成・初期化する場合は次のようになります。
// 配列リテラルで作成＋初期化
var arr_multi = [
[0, 0, 0],
[0, 0, 0]
];
配列の行数や列数が少ない場合は、 このように配列リテラルを使うとシンプルに記述できます。
Array()コンストラクタで作成・初期化
作成部分と、初期化部分に分けて記述します。
★ 作成部分のJavaScriptサンプルコードは次の通りです。
// 2次元配列の「行」部分を作成
var arr_multi = new Array(2);
for (var i = 0; i < arr_multi.length; i++){
// 2次元配列の「列」部分を作成
arr_multi[i] = new Array(3);
}
Array()コンストラクタで2次元配列を作成する場合のポイントは、 「まず行の配列を作成して、次に列の配列を作成」することです。
★ 次は初期化部分のコードです。
var initial_value = 0; // 初期化する固定値
// 行のループ
for (var i = 0; i < arr_multi.length; i++){
// 列のループ
for (var k = 0; k < arr_multi[i].length; k++){
arr_multi[i][k] = initial_value; // 初期化
}
}
console.log(arr_multi);
// 実行結果
/*
(2) [Array(3), Array(3)]
0: (3) [0, 0, 0]
1: (3) [0, 0, 0]
length: 2
*/
行のループを回し、その中で列のループを回します。
変数「i」で行を管理し、変数「k」で列を管理しています。