javascript入門／配列編

hotty

2013.09.09

システムエンジニア

こんにちは、hottyです。

今回は「javascript入門／配列編」という事で、javascript初心者の方を対象に配列の基本について紹介していきたいと思います。

目次
Javascriptの配列とは
配列を生成（初期化）する
連想配列を作る
- 2重配列を作る
配列のプロパティ
配列の基本的な操作
最後に

Javascriptの配列とは

配列とは、例えるならデータを出し入れするタンスのようなものです。

データを入れた引き出しの場所は、連続的な数字(添字、インデックスと呼ばれます)によって管理されています。

大量のデータを繰り返し処理する時に、配列を使うことで効率的にデータを処理することができます。

配列を生成（初期化）する

まずは配列を作りましょう。配列を生成する方法はいくつかあります。（配列の生成は、初期化と記述してあるところもあります）

new演算子を使う

まずは、スタンダードなnew演算子を使う方法です。例として “apple”, “orange”, “lemon”, “peach” の4つ要素を持った配列を作ってみます。

var myArray = new Array("apple", "orange", "lemon", "peach");

1	var myArray = new Array("apple", "orange", "lemon", "peach");

new演算子により4つの要素を持つ配列を生成しました。

生成した配列は、下記の記述で呼び出すことができ、「n」は呼び出したい配列の任意の数値を入れます。

myArray[n]

1	myArray[n]

実際のjavascriptでのコード例は、下記のように記述します。

&lt;script type="text/javascript"&gt;
var myArray = new Array("apple", "orange", "lemon", "peach");
alert( myArray[3] );
&lt;/script&gt;

var myArray = new Array("apple", "orange", "lemon", "peach");

alert( myArray[3] );

</script>

すると、ブラウザには “peach” とアラートが表示されます。

3番目は “lemon” じゃないか、と思うかも知れませんが配列のキーとなる番号は 0から数えます。なので myArray[0] は “apple” となります。

上記のサンプルは、下記のように定義することもできます。これは、あらかじめn個の要素を持った配列を作るという意味で、nは省略することができ、その場合には要素を持たない空の配列が作られます。

var myArray = new Array(n);

1	var myArray = new Array(n);

実際のサンプルコードです。この例では2つの要素を持った配列が生成され、アラート画面には”アップル”と標示されます。

var myArray = new Array(2);
myArray[0] = "アップル";
myArray[1] = "オレンジ";
alert( myArray[0] );

var myArray = new Array(2);

myArray[0] = "アップル";

myArray[1] = "オレンジ";

alert( myArray[0] );

ちなみに、new演算子を省略する事も可能ですが、意味が若干変わってくる場合もあり、付ける癖をつけておいた方が良いと思います。

例： new String(“aaa”); と String(“aaa”); では返ってくる型が違います。

リテラルを使う

乱暴な説明ですが「リテラル」というのは、プログラム上に組み込まれた「〜と書かれていたら〜として扱う」と定義されたものです。

例えば下記例では “number” が表示されます。

var a = 1;
alert( typeof(a) );

1 2	var a = 1; alert( typeof(a) );

この例の「1」は、Number型として扱われています。なので、わざわざ new Number(1) というふうに数値を生成しなくても良いのです。

1をダブルクオーテーションで囲って “1″ にすれば今度は 1は String型として扱われます。

typeofは型を調べるメソッドです。

※注意より正確に言えば

var a = 1;

var b = new Number(1);

はまったく同じという訳ではありません。変数a はプリミティブ値であり Number型ですが変数bは Numberオブジェクトであり Object型です。

このようなリテラルが配列にもあり、下記のように定義して、呼び出すことができます。

var myArray = ["value1", "value2", "value3"];
alert ( myArray[0] );

1 2	var myArray = ["value1", "value2", "value3"]; alert ( myArray[0] );

文字列から生成する

Stringオブジェクトで定義されている split() というメソッドを使って文字列から配列を生成する事も可能です。その場合はこのように行います。

var myArray = "文字列".split("区切り文字");

1	var myArray = "文字列".split("区切り文字");

下記の実際の例では、”apple”が標示されます。

var target = "apple,orange,lemon,peach";
var myArray = target.split(",");
alert( myArray[0] );

var target = "apple,orange,lemon,peach";

var myArray = target.split(",");

alert( myArray[0] );

逆に配列を文字列に変換するには join() を使います。

以上で基本的な配列の生成はバッチリですね。

上記の例でメソッドやプロパティを持たないはずのプリミティブ値が、split() を呼び出せている仕組みは話が反れるので別の機会に解説できればと思います。

連想配列を作る

次は少し特殊な配列を作りましょう。

例えば、りんご、オレンジ、レモンという順番で果物の値段の情報を持った配列を作ったとします。

● var fluit = [100, 80, 60];

この中からレモンの値段を呼び出すにはこのようにしますね。

● alert( fluit[2] );

しかし、これではレモンの値段を呼び出しているというのが非常にわかり辛く、果物の種類が増えるともっとわかり辛くなります。

ですので、こういった場合は配列のkeyをインデックスでなくそのvalueと紐付いた文字列にすると便利です。

そういった場合の配列の作り方は、下記のように「連想配列(ハッシュ)」を使います。

var myHash = {"key1" : "value1", "key2" : "value2" ,...};

1	var myHash = {"key1" : "value1", "key2" : "value2" ,...};

連想配列のリテラルは配列と違い、中括弧「 { 」で囲い、コロン「 : 」で key と value を紐付けます。

連想配列を使えば上記の例はこうなり、lemonの値段は”60″と標示されます。

var fluitPrice = {"apple":100, "orange":80, "lemon":60};
alert( fluitPrice["lemon"] );

1 2	var fluitPrice = {"apple":100, "orange":80, "lemon":60}; alert( fluitPrice["lemon"] );

さて、これでレモンの値段を参照している事がすぐにわかるようになりました。これは javascript の配列を理解する上での重要な区別ですが、配列は Arrayオブジェクト、連想配列は Objectオブジェクトです。

Array型という型は javascript には存在しません、配列も連想配列も共にObject型です。

先ほど連想配列のリテラルと述べたものは、オブジェクトリテラルと表現するのがより正しいでしょう。

連想配列で “キー” と呼ばれていたものは、つまりは “プロパティ” なので、下記のように記述することができます。

var fluitPrice = {"apple":100, "orange":80, "lemon":60};
alert( fluitPrice.lemon  );

1 2	var fluitPrice = {"apple":100, "orange":80, "lemon":60}; alert( fluitPrice.lemon );

2重配列を作る

先ほどの果物の配列の例の続きですが、今度は果物に「値段」のほか「産地」の情報を持たせる必要が出てきたとします。

ここで2重配列を活用します。 2重配列とは、要素に配列を入れるという事です。

例を見てみます。

var apple = {"price":100, "area":"青森"};
var orange = {"price":80, "area":"愛媛"};
var lemon = {"price":60, "area":"宮城"};
var fluit = {"apple":apple, "orange":orange, "lemon":lemon};

var apple = {"price":100, "area":"青森"};

var orange = {"price":80, "area":"愛媛"};

var lemon = {"price":60, "area":"宮城"};

var fluit = {"apple":apple, "orange":orange, "lemon":lemon};

さて、2重の連想配列ができました。

ここからオレンジの産地を参照してみましょう。

alert( fluit["orange"]["area"] );
もしくは
alert( fluit.orange.area );

alert( fluit["orange"]["area"] );

もしくは

alert( fluit.orange.area );

いかがでしょうか。

“orange” の部分を “lemon ” に変えれば今度はピーチの産地になりますし、”area”を “price” に変えれば値段のデータになります。

果物に持たせたいデータが増えても2重配列を使えば柔軟に対応する事ができますね。

地域ごとに値段を変えたいという要件が出てきたらどうしましょうか。 “price” の値を地域ごとの値段の情報を持った配列にして 3重配列にしてしまえばOKです。

とはいえ、あまり多重な配列を作り過ぎるのもどうかと思います。その場合は設計を見直し配列のネストはほどほどにしたいところです。

配列のプロパティ

配列をドットと一緒につなげる事で配列のプロパティを呼び出すことができます。

例えば、下記例ではlengthプロパティは配列の要素数を返します。

var myArray = new Array("apple", "orange", "lemon", "peach");
alert( myArray.length );

1 2	var myArray = new Array("apple", "orange", "lemon", "peach"); alert( myArray.length );

ちなみに、プロパティはメソッドではないので括弧は付けません。

配列の基本的な操作

配列に要素を追加する

配列に要素を追加するにはpushメソッドを使用し、push()のパラメータに追加したい値を入れる事で追加することができます。

myArray = ["apple", "lemon"];
myArray.push("grape");
console.log(myArray);

myArray = ["apple", "lemon"];

myArray.push("grape");

console.log(myArray);

この例では、下記のように表示されます。

[“apple”, “lemon”, “grape”]

ご覧の通り、“grape”は配列の最後に追加されていますが、先頭に追加したい場合には、push(“grape”) でなく、unshift(“grape”) を使用します。

console.log() は配列の中身をブラウザのデバッグツールのコンソールに表示してくれます。

破壊的メソッド　push() は破壊的メソッドです。　破壊的メソッドというのは呼び出し元のオブジェクトの中身を更新するメソッドです。

指定の場所に要素を追加、又は置き換える

先頭や末尾でなく配列の指定した場所に要素を追加したい場合や、置き換えたい場合は splice() というメソッドを使います。

書式は、下記のようになります。

array.splice(【0から数えてn番目】,【 n番目以降から削除する要素の数】,【 追加する要素】);

1	array.splice(【0から数えてn番目】,【 n番目以降から削除する要素の数】,【追加する要素】);

例として、配列[“apple”, “lemon”, “grape”] の “lemon” を “peach” と “banana” に置き換えてみましょう。

myArray = ["apple", "lemon", "grape"] ;
myArray.splice(1, 1, "peach", "banana");
console.log(myArray);

myArray = ["apple", "lemon", "grape"] ;

myArray.splice(1, 1, "peach", "banana");

console.log(myArray);

myArrayの0から数えて1番目(つまり”lemon”)を始点に1つ要素を削除(つまり”lemon”)し、その埋め合わせに”peach”, “banana”を追加しなさいという意味になります。

コンソールに、下記のように標示されれば成功です。

[“apple”, “peach”, “banana”, “grape”]

連想配列に要素を追加する

連想配列は、下記のように要素の追加を行います。

myHash = {"apple" : 100, "lemon" : 80};
myHash["grape"] = 300;
console.log(myHash);

myHash = {"apple" : 100, "lemon" : 80};

myHash["grape"] = 300;

console.log(myHash);

push() は、Arrayオブジェクトのメソッドなので連想配列に使用はできません。

連想配列は、Objectオブジェクトでしたのでプロパティを参照して、下記のように追加するやり方でもOKです。

myHash.grape = 300;

配列から要素を削除する

配列から要素を取り除くにはこのように行います。

myArray = ["apple", "lemon", "grape"];
myArray.shift(); // 配列の先頭から要素を1つ削除
myArray.pop(); // 配列の末尾から要素を1つ削除

myArray = ["apple", "lemon", "grape"];

myArray.shift(); // 配列の先頭から要素を1つ削除

myArray.pop(); // 配列の末尾から要素を1つ削除

shift() も pop() も破壊的メソッドで、削除後の配列の要素数を返します。

連想配列から要素を削除する

連想配列はオブジェクトですので、オブジェクトからプロパティを削除する delete演算子を使います。

myHash = {"apple" : 100, "orange" : 80, "lemon" : 60, "peach" : 250};
isDeleted = delete myHash.lemon
console.log(myHash);
console.log(isDeleted);

myHash = {"apple" : 100, "orange" : 80, "lemon" : 60, "peach" : 250};

isDeleted = delete myHash.lemon

console.log(myHash);

console.log(isDeleted);

例では “lemon” を削除しました。

delete演算子も破壊的にオブジェクトを更新し、返り値はご覧の通りBoolean型です。

連想配列には配列のようにインデックスがないので、最初や最後という概念はありません。

最後に

他にも配列と配列をつなげて1つにしたり、配列の順番を逆にしたり色々なメソッドがありますが、ちょっと長くなってしまったので今回はこれで終わりにしようと思います。