第1章 JavaScript導入ガイド

配列の基本

リスト

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

[1, 2, 3]

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

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

配列

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

var arr = [1, 2, 3];

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

配列の書式

JavaScriptには、リスト以外にもArrayオブジェクトを使った作成方法が用意されています。

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

インデックス

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

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];

配列の値を参照

配列の要素はインデックスを使って参照します。

var list = ["A", "B", "C"];
// list の3番目の要素を表示
console.log( list[2] );
C

配列のインデックスは0から始まるので、list[2] は3つめの要素 C を参照します。

配列の要素数

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

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

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

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

配列のループ処理

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)には積み重ねるという意味があり、皿を上に重ねるような構造をしています。
重なった皿に追加したいときは一番上、山から1枚取りたいときも1番上。置いた順番で言えば一番下が一番最初なので、最後に対して追加したり、取り出すのがスタックです。

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

キュー

キュー(queue)には順番待ちの列の意味があり、待ち行例のような構造をしています。
追加したものは先頭に並び、先頭から先に取り出されます。

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

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

先頭に追加 - unshift()

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

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

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

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

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

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

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

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

console.log( list );
["B", "C"]

末尾に追加 - push()

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

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

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

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

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

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

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

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

console.log( list );
["A", "B"]

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

配列の結合 - concat()

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

var list1 = ["A", "B", "C"];
var list2 = ["D", "E", "F"];
var list = list1.concat(list2);
console.log(list);
["A", "B", "C", "D", "E", "F"]
console.log(list1);
console.log(list2);
["A", "B", "C"]
["D", "E", "F"]

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

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

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

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

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

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

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

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

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

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

構文
splice(インデックス, 削除する数, [追加要素][, ..., 追加要素]);
引数
インデックス
配列に追加、もしくは削除したい要素のインデックスを指定します。値がマイナスの場合、配列の末尾から指定した値を引いた数になります。
削除する数
配列から削除する要素の数を指定します。0 の場合は要素を削除しません。
要素
配列に追加したい要素を指定します。
戻り値
削除した要素の配列を返します。

splice() を使って、配列の要素は削除せず、2番めに値を追加してみます。

var list = ["A", "B", "C"];
// 要素の2番めに - を追加
list.splice(1, 0, "-");
console.log( list );

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

追加する要素は3つ目の引数以降に指定することで複数指定することができます。

var list = ["A", "B", "C"];
// 要素の2番めに - を複数追加
list.splice(1, 0, "-", "-", "-");
console.log( list );

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

要素を削除した場合、削除した要素の配列が返されます。このとき、追加する要素を指定しなければ削除だけが行われます。

var list = ["A", "B", "C"];
// 要素の2番めを削除
console.log( list.splice(1, 2) );

["B", "C"]

var list = ["A", "B", "C"];
// 要素の2番めに - を複数追加
list.splice(1, 0);

配列の一部を取得 - slice()

splice() は第一引数で指定した要素から、第二引数で指定した要素までを返します。元の配列に影響はありません。

構文
slice(開始インデックス, [終了インデックス]) 
引数
開始インデックス
取得したい要素の開始位置をインデックスで指定します。マイナスを使って配列の末尾からのオフセットを指定することもできます。-2 は配列の末尾から 2 番目の要素を意味します。 開始インデックスを省略した場合は、0 番目の要素から開始します。
終了インデックス
取得したい要素の終了位置をインデックスで指定します。マイナスを使って配列の末尾からのオフセットを指定することもできます。-2 は配列の末尾から 2 番目の要素を意味します。 開始インデックスを省略した場合は、要素の末尾までとなります。

インデックスを指定して要素を取得してみましょう。

var list = ["A", "B", "C"];
// インデックスの1から2の要素を取得
console.log( list.slice(1, 2) );

["B"]

// インデックスの1から3の要素を取得
console.log( list.slice(1, 3) );

["B", "C"]

// 元の要素に変更ありません
console.log( list );

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

要素のソート - sort()

sort() は配列の要素をソートします。

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

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

要素を逆順にする - reverse()

reverse() は配列の要素を逆順に入れ替えます。

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

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

配列のコピー

配列を複製しようと単純に配列を変数に代入しても、参照渡しになってしまいます。
要素をコピーしたい場合は slice() を使うと簡単です。

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

要素をランダムに取得

配列の値をランダムに取得したい場合、Math オブジェクトの random() を使います。random() に配列の要素数をかけることで、配列のインデックスの範囲の数字をランダムに取得することができます。

var list	= ["A", "B", "C", "D", "E"];
// 0から4までの数字がランダムに返される
var ret = Math.floor(Math.random() * list.length);
console.log(list[ret]);

最大値、最小値を取得

Math オブジェクトを使って配列の要素の最大値や、最小値が取得できます。

var list	= [100, 10, 50, 25, 0];
console.log( Math.max.apply(null, list) );

100

console.log( Math.min.apply(null, list) );

0

全ての要素に対して処理する - map()

map() は配列の要素全てに対し、引数に指定した関数の処理を行ってその結果の配列を返します。元の要素に影響はありません。

var list= [1, 2, 3, 4];
var ret = list.map(function(X){
return X * 2;
});
console.log(ret);

[2, 4, 6, 8]

多次元配列

多次元配列とは、配列を要素とした配列のことです。例えば、次のような表であれば2次元配列で表現できます。

Y/X 0 1 2
0 A B C
1 D E F
2 G H I
var list	=[
["A", "B", "C"],
["D", "E", "F"],
["G", "H", "I"],
];
console.log( list[0] );
console.log( list[1] );
console.log( list[2] );

["A", "B", "C"] ["D", "E", "F"] ["G", "H", "I"]

要素にピンポイントでアクセスしたい場合、次のようにインデックスを2つ指定します。最初のインデックスがY軸、次のインデックスがX軸の位置を指定しています。

console.log( list[1][1] );

E

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!