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 要素数)を取得してループで回します。

ループを使った具体的なコードは、上の2つのサンプルで見た通りです。

連番で初期化

[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()メソッドは配列の末尾に要素を追加するメソッドですが、 使い方によっては配列の初期化に使用することもできます。

次のサンプルコードは固定値「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次元配列を作成・初期化します。

000
000

配列リテラルで作成・初期化

配列リテラルを使って2次元配列を作成・初期化する場合は次のようになります。


// 配列リテラルで作成+初期化
var arr_multi = [
	[0, 0, 0],	 
	[0, 0, 0]
];

配列の行数や列数が少ない場合は、 このように配列リテラルを使うとシンプルに記述できます。

Array()コンストラクタで作成・初期化

作成部分と、初期化部分に分けて記述します。

★ 作成部分のサンプルコードは次の通りです。


// 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」で列を管理しています。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする