配列についていろいろまとめ

個人的によく使うものを中心に、
JavaScriptの配列の使い方について色々まとめ。

配列の生成

配列を生成するには、

var array = [];

または、

var array = new Array();

のように行います。
　

生成の時点でデータを格納しておく場合は、カッコ内に格納するデータを指定します。

var array = ['data1', 'data2', 'data3', ...];
var array = new Array('data1', 'data2', 'data3', ...);

文字列を分割して配列を作成することもできます。

var url = 'https://cly7796.net/blog/javascript/how-to-use-javascript-array/';
var array = url.split('/'); // ['http:', '', 'cly7796.net', 'wp', 'how-to-use-javascript-array', '']

配列の取得

配列取得のサンプルコード

var array = ['data1', 'data2', 'data3', 'data4', 'data5'];

// 2番目の配列を取得
console.log(array[1]); // 'data2'

// 3番目のデータを「data7」に変更
array[2] = 'data7';
console.log(array); // ['data1', 'data2', 'data7', 'data4', 'data5']

// 配列の個数取得
console.log(array.length); // 5

// 2番目から4番目までの配列取得
console.log(array.slice(1, 4)); // ['data2', 'data7', 'data4']

// 3番目から最後までの配列取得
console.log(array.slice(2)); // ['data7', 'data4', 'data5']

配列の取得のデモページ

配列の追加・削除

配列追加・削除のサンプルコード

var array = ['data1', 'data2', 'data3', 'data4', 'data5'];

// 配列の先頭に「data0」を追加
array.unshift('data0');
console.log(array); // ['data0', 'data1', 'data2', 'data3', 'data4', 'data5']

// 配列の最後に「data8」を追加
array.push('data8');
console.log(array); // ['data0', 'data1', 'data2', 'data3', 'data4', 'data5', 'data8']

// 配列の先頭を削除
array.shift();
console.log(array); // ['data1', 'data2', 'data3', 'data4', 'data5', 'data8']

// 配列の最後を削除
array.pop();
console.log(array); // ['data1', 'data2', 'data3', 'data4', 'data5']

// 配列の3番目を削除
delete array[2];
console.log(array); // ['data1', 'data2', undefined, 'data4', 'data5']

// 配列の2番目から2つ削除
array.splice(1, 2);
console.log(array); // ['data1', 'data4', 'data5']

// 配列の2番目に「data7」「data8」を追加
array.splice(1, 0, 'data7', 'data8');
console.log(array); // ['data1', 'data7', 'data8', 'data4', 'data5']

// 配列を空にする
array = [];
console.log(array); // []

配列の追加・削除のデモページ

その他

サンプルコード

var array = ['data3', 'data2', 'data5', 'data1', undefined, 'data4'];

// 配列の連結
console.log(array.join()); // 'data3,data2,data5,data1,,data4'
console.log(array.join('')); // 'data3data2data5data1data4'
console.log(array.join('-')); // 'data3-data2-data5-data1--data4'

// 配列内から'data5'を探す
console.log(array.indexOf('data5')); // 2
// 配列内から'data7'を探す
console.log(array.indexOf('data7')); // -1

// 配列内の最後から'data1'を探す
console.log(array.lastIndexOf('data1')); // 3

// 配列の並び順を逆にする
array.reverse();
console.log(array); // ['data4', undefined, 'data1', 'data5', 'data2', 'data3']

// 配列をアルファベット順にソートする
array.sort();
console.log(array); // ['data1', 'data2', 'data3', 'data4', 'data5', undefined]

その他のデモページ

多次元配列

JavaScriptでは多次元配列はサポートしていません。
しかし、配列の値に配列を格納することで、近いことができます。

通常の配列が以下のような構造だとすると、

var array = ['data1', 'data2', 'data3', 'data4'];

多次元配列(2次元配列)は以下のような構造になります。

var array = [
	['data1-1', 'data1-2', 'data1-3', 'data1-4'],
	['data2-1', 'data2-2', 'data2-3', 'data2-4'],
	['data3-1', 'data3-2', 'data3-3', 'data3-4']
];

多次元配列取得のサンプルコード

// 多次元配列(2次元配列)の生成
var array = [
	['data1-1', 'data1-2'],
	['data2-1', 'data2-2'],
	['data3-1', 'data3-2']
];

// 配列全体の取得
console.log(array); // [['data1-1', 'data1-2'], ['data2-1', 'data2-2'], ['data3-1', 'data3-2']]

// arrayの1番目を取得
console.log(array[0]); // ['data1-1', 'data1-2']

// arrayの2番目の中の2番目を取得
console.log(array[1][1]); // 'data2-2'

// 配列内の個数を取得
console.log(array.length); // 3

// arrayの1番目内の個数を取得
console.log(array[0].length); // 2

// arrayの最後に配列を追加
array.push(['data6-1', 'data6-2']);
console.log(array); // [['data1-1', 'data1-2'], ['data2-1', 'data2-2'], ['data3-1', 'data3-2'], ['data6-1', 'data6-2']]

// arrayの2番目の配列の先頭の配列を削除
array[1].shift();
console.log(array); // [['data1-1', 'data1-2'], ['data2-2'], ['data3-1', 'data3-2'], ['data6-1', 'data6-2']]

多次元配列のデモページ

連想配列

連想配列とは、配列格納時に値ごとに名前を付けることが出来る配列です。

var array = {key1: 'data1', key2: 'data2', key3: 'data3'};

多次元配列取得のサンプルコード

// 連想配列の生成
var array = {key1: 'data1', key2: 'data2', key3: 'data3'};

// 配列の取得
console.log(array['key1']); // 'data1'

// 配列内の個数を取得
console.log(Object.keys(array).length); // 3

// 配列内の最後に要素を追加
array['key4'] = 'data4';
console.log(array); // {key1: 'data1', key2: 'data2', key3: 'data3', key4: 'data4'}

// 配列内のkey2を削除
delete array.key2;
console.log(array); // {key1: 'data1', key3: 'data3', key4: 'data4'}

※連想配列では.push()や.shift()は使用できません。
※Object.keys()はIE9からサポートのようです。

連想配列のデモページ

多次元配列+連想配列

配列の中に連想配列、連想配列の中に配列を入れ子にしたりもできます。

多次元配列+連想配列のサンプルコード

// 配列の生成
var array = [
	{
		key1: 'data1-1',
		key2: 'data1-2',
		key3: ['data1-3-1', 'data1-3-2']
	}, {
		key1: 'data2-1',
		key2: 'data2-2',
		key3: ['data2-3-1', 'data2-3-2']
	}
];

// 配列の取得
console.log(array[0]); // {key1: 'data1-1', key2: 'data1-2', key3: ['data1-3-1', 'data1-3-2']}
console.log(array[0]['key1']); // 'data1-1'
console.log(array[0]['key3'][1]); // 'data1-3-2'

// 配列内の個数を取得
console.log(Object.keys(array).length); // 2

// 配列内の最後に要素を追加
array.push({key1: 'data3-1', key2: 'data3-2', key3: ['data3-3-1', 'data3-3-2']});
console.log(array); // [{key1: 'data1-1', key2: 'data1-2', key3: ['data1-3-1', 'data1-3-2']}, {key1: 'data2-1', key2: 'data2-2', key3: ['data2-3-1', 'data2-3-2']}, {key1: 'data3-1', key2: 'data3-2', key3: ['data3-3-1', 'data3-3-2']}]

// 配列内の2番目の要素を削除
array.splice(1, 1);
console.log(array); // [{key1: 'data1-1', key2: 'data1-2', key3: ['data1-3-1', 'data1-3-2']}, {key1: 'data3-1', key2: 'data3-2', key3: ['data3-3-1', 'data3-3-2']}]

多次元配列+連想配列のデモページ