JavaScript

配列

2017年7月27日

配列の基本
- リスト
- 配列
配列のループ処理
- for文を使って配列にアクセス
- for文以外の方法で配列にアクセス
配列のメソッド
- 配列をスタックやキューとして使う
- 配列のメソッドを使った逆引きテクニック
多次元配列

配列の基本

数値や文字列など複数の値を並べた構造をリストといいます。リストの書き方はとても簡単で、値をカンマで区切り、その全体をカッコで囲むだけです。たとえば1、2、3の 3 つの値のリストは、以下のように記述します。

[1, 2, 3]

文字列の場合は値をダブルクォーテーションやシングルクオーテーションで囲みます。

["A", "B", "C"]

配列

リストを変数に代入したものを配列と呼びます。

var arr = [1, 2, 3];

配列の値は要素とも呼ばれ、上記では数字の1、2、3が要素にあたります。

配列の書式

配列の作成はリストの代入だけではなく、Array オブジェクトを使った作成方法も用意されています。次の3行はどれも同じ配列を作ります。

var arr = new Array(値0, 値1, ..., 値N);
var arr = Array(値0, 値, ..., 値N);
var arr = [値0, 値1, ..., 値N];

インデックス

配列は要素ごとにインデックスと呼ばれる番号を持っていて、その番号を使って各要素にアクセスすることができます。配列のインデックスは 1 ではなく、 0 から始まるので注意してください。1番目の要素のインデックスは 0 、2番目の要素は 1 になります。要素を参照するには、ブラケット（ [] ）でインデックスを囲みます。

変数[インデックス]

それでは、インデックスを使って配列の要素を参照してみましょう。

要素の参照

var list = ["A", "B", "C"];

// list の3番目の要素を表示
console.log( list[2] );

C

配列のインデックスは0から始まるので､list[2] は3つめの要素 C を参照します｡配列の要素に値を代入する際も、この参照方法を使います。

要素への代入

var list = [];
list[0] = "A";
list[1] = "B";

要素に変数や式を指定する

配列の要素には、数値や文字列の代わりに変数を指定することもできます。

要素に変数を指定

var v1 = "A";
var v2 = "B";
var list= [v1, v2];

これは次の文と同じ意味になります。

var list= ["A", "B"];

要素に式を指定することもできます。

要素で式を使う

var v = 10;
var arr = [v, v * 2];

これは次の文と同じ意味になります。

var arr = [10, 20];

配列の要素数

配列の要素数は length プロパティで取得できます。

要素数を取得

var list = ["A", "B", "C"];
console.log( list.length );

インデックスは0から始まるので、最後の要素のインデックスは length プロパティの値から 1 を引いた値になります。

最後の要素を参照

var list = ["A", "B", "C"];
console.log( list[list.length - 1] );

配列のループ処理

for文を使って配列にアクセス

配列のすべての要素にアクセスするには for 文が便利です。後述の for..in 文などに比べると記述量が多いですが、速度や安全性では一番おすすめです。基本、配列であれば for、オブジェクトであれば for..of という使い分けで良いと思います。

var list = ["A", "B", "C"];
for( var i=0 ; i <= list.length; i++ ){
	console.log(list[i]);
}

A
B
C

for 文の条件式内にある list.length で配列の要素数を指定すると、list の要素数に合わせて for 文が終了するので便利です。

for文以外の方法で配列にアクセス

for 文以外にも、for 系の繰り返し処理でしたら for..in 文、for..of 文、forEach 文などが用意されています。
どれも for 文の代わりとして使うことが可能ですが、違いを理解しておくことが必要です。

for..in

先程の for 文を for..in 文に書き直したものが次の例です。

var list = ["A", "B", "C"];
for( var key in list ){
	console.log( list[key] );
}

変数 key にはインデックスが代入されます。

for..in 文はオブジェクトの要素にアクセスするために用意されており、要素がなくなれば繰り返し処理を自動的に終了してくれます。そのため for よりもシンプルに書くことができます。

ただし、for..in 文はプロトタイプを使って追加されたメソッドも一緒に取得するので、利用する際は注意が必要です。例えば次のように、オブジェクトにメソッドが含まれる場合、for..in 文でループさせるとプロパティと同様にメソッドも取得されます。

var list = { A:1, B:2, C:3 };

// プロトタイプを使ったメソッドの追加
Object.prototype.meth = function() {};
// list の要素にアクセス
for( var key in list ) {
	console.log( key + ":" + list[key] );
}

A:1
B:2
C:3
meth:function () {}

for..of

先程の for文、for..in 文を for..of 文に書き直したものが次の例です。

var list = ["A", "B", "C"];
for( var val of list ){
	console.log( val );
}

A
B
C

for..in の場合 key にインデックスが代入されましたが、for..of の場合は要素の値が代入されます。そのため、今までのように list[key] で要素の値にアクセスする必要がなくなり、直接 key を出力しています。

for..in、for..of の詳しい使い方は制御構文の章を参照してください。

forEach

Array.forEach の構文は以下になります。

構文

array.forEach( コールバック関数, [オブジェクト] )

forEach文に書き直したものが次の例です。

var list = ["A", "B", "C"];
list.forEach(function( val ){
	console.log( val );
});

配列に値が割り当てられていない要素がある場合、処理されずに飛ばされるので注意ください。

var list = ["A", , "C"];
list.forEach(function( val ){
	console.log( "[" + val + "]" );
});

[A]
[C]

配列のメソッド

Arrayオブジェクトには数多くのプロパティ、メソッドが用意されていますが、ここではよく使うメソッドをいくつか紹介します。

配列をスタックやキューとして使う

スタックは後入れ先出し、キューは先入れ先出しのデータ構造です。Array オブジェクトには、スタックを実装した push()、pop()、キューを実装した shift()、unshift() という4つのメソッドが用意されています。

スタック

スタック（stack）には積み重ねるという意味があります。積み重ねた皿のように、皿を取りたいときは山の一番上から、追加したいときも一番上になります。

配列の要素の一番最後に追加するメソッドが push() 、一番最後から取り出すメソッドが pop() です。このとき、取り出された要素は配列から削除されます。

キュー

キュー（queue）には順番待ちの列の意味があり、先頭に対して操作します。

配列の要素の一番最初に追加するメソッドが unshift()、先頭から取り出すのが shift() です。このとき、取り出された要素は配列から削除されます。

	要素を追加	要素を取り除く
先頭に	unshift	shift
末尾に	push	pop

先頭に追加 - unshift()

unshift() は配列の先頭に要素を追加し、追加後の配列の長さを返します。

var list = ["A", "B", "C"];

// unshift() を使って先頭に要素を追加
console.log( list.unshift( "S" ) );

追加後の配列には、先頭に指定した要素が追加されています。

console.log( list );

["S", "A", "B", "C"]

先頭から取り出す - shift()

shift() は配列の先頭の要素を削除し、その要素を返します。

var list = ["A", "B", "C"];
console.log( list.shift() );

shift() 後、配列から最初の要素が削除されます。

console.log( list );

["B", "C"]

末尾に追加 - push()

push() は配列の末尾に要素を追加し、追加後の配列の長さを返します。

var list = ["A", "B", "C"];
console.log( list.push( "S" ) );

追加後の配列には末尾に追加された要素が入ります。

console.log( list );

["A", "B", "C", "S"]

末尾から取り出す - pop()

pop() は配列の末尾の要素を削除し、その要素を返します。

var list = ["A", "B", "C"];
console.log( list.pop() );

pop() 後の配列は最後の要素が削除されます。

console.log( list );

["A", "B"]

配列のメソッドを使った逆引きテクニック

配列の結合 - concat()

concat() は引数に指定した配列を結合し、新しい配列を返します。
もとの2つの配列には影響を及ぼしません。

var list1 = ["A", "B", "C"];
var list2 = ["D", "E", "F"];

// concat() を使って list1 に list2 を結合
var list = list1.concat( list2 );

// 結合結果が代入された list を出力
console.log( list );

["A", "B", "C", "D", "E", "F"]

// list1、list2 は変化なし
console.log( list1 );
console.log( list2 );

["A", "B", "C"]
["D", "E", "F"]

配列の要素を文字列として結合 - join()

join() は配列の要素を文字列に結合します。

var list = ["A", "B", "C"];

// join() を使って配列を文字列に結合
console.log( list.join( "-" ) );

A-B-C

要素の値からインデックスを取得 - indexOf() / lastIndexOf()

indexOf() は引数に指定した値とマッチする要素を探し、最初にマッチした要素のインデックスを返します。

var list = ["A", "B", "C", "A"];

// indexOf() を使って要素を検索
console.log( list.indexOf( "A" ) );

lastIndexOf() は indexOf() とほぼ同じですが、複数の要素にマッチした場合、最後にマッチした要素のインデックスを返します。マッチしなかった場合は -1 を返します。

var list = ["A", "B", "C", "A"];

// lastIndexOf() を使って最後にマッチした要素を検索
console.log( list.lastIndexOf( "A" ) );

指定した位置に要素を追加 - splice()

splice()は配列の任意の場所に要素を削除、追加できるメソッドです。

構文

splice( インデックス, 削除する数, [追加要素][, ..., 追加要素] );

引数

インデックス: 配列に追加、もしくは削除したい要素のインデックスを指定します。値がマイナスの場合、配列の末尾から指定した値を引いた数になります。

削除する数: 配列から削除する要素の数を指定します。0 の場合は要素を削除しません。

要素: 配列に追加したい要素を指定します。

戻り値: 削除した要素の配列を返します。