JavaScript - 配列
公開日:2018-11-29 更新日:2019-05-13
1. 概要
配列を使うと、1つの変数名で複数の値を保持できます。
2.1 配列
list と言う配列に対して、文字の設定と取得を行います。
Array を使っても同じことができます。
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 で取得することもできます。
また、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() による方法と、未使用のインデックスを指定して追加する方法があります。
但し後者は、指定したインデックスまで配列が確保されるため、大きな値を指定する場合は要注意です。
追加するには、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)として使用できます。
削除するには、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)として使用できます。
また、シフトした時に削除された値を取得できます。
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() は配列の途中の要素を取得のみを行います。
また、引数が微妙に異なるので要注意です。
引数は、開始インデックスと終了インデックスです。
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