JavaScript - 配列

公開日:2018-11-29 更新日:2019-05-13

1. 概要

配列を使うと、1つの変数名で複数の値を保持できます。

2.1 配列

list と言う配列に対して、文字の設定と取得を行います。

var list = ['a', 'b', 'c', 'd', 'e'];

//設定
list[0] = 'A';
list[1] = 'B';

//取得
console.log( list[0] );
console.log( list[1] );
console.log( list[2] );
console.log( list[3] );
console.log( list[4] );
##src|A B c d e ##/e##
Array を使っても同じことができます。
var list = new Array('a', 'b', 'c', 'd', 'e');

console.log( list[0] ); //a
console.log( list[1] ); //b
console.log( list[2] ); //c
console.log( list[3] ); //d
console.log( list[4] ); //e

2.2 ループによる要素の取得

length で配列の要素数を取得して、for で全ての要素を取得しています。
また、for ~ in で取得することもできます。

var list = ['a', 'b', 'c', 'd', 'e'];

for (var i = 0; i < list.length; i++) {
	console.log( list[i] );
}

console.log("-----");

for (var i in list) {
	console.log( list[i] );
}
a
b
c
d
e
-----
a
b
c
d
e

2.3 要素の追加

配列の最後に要素を追加します。
追加するには、push() による方法と、未使用のインデックスを指定して追加する方法があります。
但し後者は、指定したインデックスまで配列が確保されるため、大きな値を指定する場合は要注意です。

var list = ['a', 'b', 'c', 'd', 'e'];
list.push('f');    //要素の追加
list[100] = ['g']; //要素の追加

for (var i in list) {
	console.log( "[" + i + "]" + list[i] );
}

console.log( "要素数 = " + list.length );
[0]a
[1]b
[2]c
[3]d
[4]e
[5]f
[100]g
要素数 = 101

2.4 要素の削除

配列の最後の要素を削除します。
削除するには、pop() を使用します。
pop() は削除するだけでなく、削除した要素の値を取得できます。

push() と pop() を併せて使用すると、
配列をスタック(後入れ先出し、LIFO:Last In First Out)として使用できます。

var list = [];

list.push('a');
list.push('b');
list.push('c');
console.log( list.pop() ); //最後に追加された値を取得する。リストからも削除される。
console.log( list.pop() );
console.log( list.pop() );
console.log( list.length );
c
b
a
0

2.5 先頭の要素を削除して、全体を左にずらす

shift() で、先頭の要素を削除して、配列全体の要素を左にずらします。
また、シフトした時に削除された値を取得できます。
shift() と push() を併せて使用すると、
配列をキュー(先入れ先出し、FIFO:First In, First Out)として使用できます。

インデックス 0 1 2 3 4
----------------------
シフト前     a b c d e
シフト後     b c d e    //先頭の要素が削除され、配列全体が左にずれる

var list = ['a', 'b', 'c', 'd', 'e'];

console.log( list.shift() ); //a
console.log("-----");

var s = "";
for (var i in list) {
	s += list[i];
}
console.log( s ); 
a
-----
bcde

2.6 先頭に要素を追加して、全体を右にずらす

unshift() で、先頭に要素を追加して、配列全体の要素を右にずらします。

インデックス 0 1 2 3 4
----------------------
シフト前     b c d e
シフト後     a b c d e  //先頭に要素が追加され、配列全体が右にずれる

var list = ['b', 'c', 'd', 'e'];

list.unshift("a");

var s = "";
for (var i in list) {
	s += list[i];
}
console.log( s ); 
abcde

2.7 配列の途中の要素の削除

splice() で配列の途中の要素を削除します。
戻り値は、削除した要素の配列です。
引数は、開始インデックスと削除する個数です。

//splice : 継ぎ合わせる  保持してる値が影響を受ける。
var list1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

//インデックス 1 から 3 つの要素を削除します
//戻り値として、削除した要素の配列を取得します
var list2 = list1.splice(1, 3);

var s;
s = "";	for (var i in list1) s += list1[i];
console.log( s ); //aefg

s = "";	for (var i in list2) s += list2[i];
console.log( s ); //bcd

aefg
bcd

2.8 配列の途中の要素の取得

slice() で配列の途中の要素を取得します。
引数は、開始インデックスと終了インデックスです。

splice() は配列の途中の要素を削除するのに対して、
slice() は配列の途中の要素を取得のみを行います。
また、引数が微妙に異なるので要注意です。

var list1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

//インデックス 1 から 3 つの要素を削除します
//戻り値として、削除した要素の配列を取得します
var list2 = list1.slice(1, 3);

var s;
s = "";	for (var i in list1) s += list1[i];
console.log( s ); //abcdefg  元の配列は影響を受けない

s = "";	for (var i in list2) s += list2[i];
console.log( s ); //bc

abcdefg
bc

2.9 配列の要素の検索

indexOf() で配列の要素の検索をします。

var list = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
var index = list.indexOf('d');
console.log(      index  ); //3
console.log( list[index] ); //d

console.log( list.indexOf('Z') ); //-1 見つからない場合
3
d
-1