JavaScriptはJavaやCなどの言語と違って、少しわかりづらい部分があります。
「JavaやCはわかるけど、JavaScriptは何となく書ける程度かな……」という方に理解していただける事を目指して、JavaScriptの配列についてまとめてみました。
配列の宣言
JavaScriptでは以下のようにして配列を宣言できます。
// 配列リテラル
var array = ['data'];
// Arrayオブジェクトのコンストラクタで初期化
var array = new Array('data');
// Arrayオブジェクトのコンストラクタで領域だけを確保した後に代入
var array = new Array(1);
array[0] = 'data';
上記はすべて全く同じ結果になります。しかし、JavaScriptの配列の初期化はnew演算子を使わない - Ando.report(); // JavaScriptをもっと勉強したいブログ。でも書いたように、配列リテラルを用いて宣言するのがベターです。
配列の要素として配列を指定する事で、多次元配列を実現する事ができます。
var array = [
[1, 2, 3, 4, 5, 6, 7, 8, 9],
[2, 4, 6, 8, 10, 12, 14, 16, 18],
[3, 6, 9, 12, 15, 18, 21, 24, 27],
[4, 8, 12, 16, 20, 24, 28, 32, 36],
[5, 10, 15, 20, 25, 30, 35, 40, 45],
[6, 12, 18, 24, 30, 36, 42, 48, 54],
[7, 14, 21, 28, 35, 42, 49, 56, 63],
[8, 16, 24, 32, 40, 48, 56, 64, 72],
[9, 18, 27, 36, 45, 54, 63, 72, 81]
];
console.log(array[0][5]);
配列の参照
宣言した配列を参照する方法は、以下の通りです。
var array = ['data1', 'data2', 'data3']; console.log(array[0]); // 普通に参照 console.log(array['1']); // プロパティ名で参照 console.log(array[array.length - 1]); // 式の評価結果で参照
連想配列ではない配列をプロパティ名で参照する事はまずありませんが、JavaScriptでは配列もオブジェクトとして扱われるため、添字をプロパティ名として参照する事もできます。
JavaScriptという言語を理解するうえで避けて通れない、他の言語との違いですので覚えておくとハマったときに役に立ちます。
連想配列
上記のプロパティ名で参照する例と同じですが、連想配列を使う事もできます。
var array = [ ]; array['red'] = '#ff0000'; array.green = '#00ff00'; console.log(array['red']); console.log(array.green);
JavaScriptで連想配列を参照するときは、ドット記法とブラケット記法どちらでも参照できます。
ブラケット記法よりもドット記法で参照した方がシンプルに短く書けるので、一般的にはドット記法が使われます。
ただし、ドット記法で参照する場合、識別子として扱われます。
つまり、変数名として認められない命名をしてはいけないということです。
var array = [ ]; array['1st'] = 'data'; // OK array.1st = 'data'; // 変数名の1文字目が数字なのでNG console.log(array['1st']); // OK console.log(array.1st); // NG
また、ドット記法では動的にプロパティ名が決まる場合は意図した通りに動作しません。
function createArray (key, value) {
var array = [ ];
array[key] = value; // OK
array.key = value; // NG
return array;
}
var createdArray = createArray('data', 1);
上記の例ではdataというキーに1を設定する事を意図していますが、ドット記法の場合はkeyというキーに1を設定してしまいます。
この辺りはJavaScriptのややこしいところですが、きちんとJavaScriptを書くためには理解しなければならない部分でもあります。
実際にコードを書いてみると、動きが理解できるかと思います。
データの挿入
配列の末尾にデータを挿入するには、以下のように書きます。
var array = [ ];
array.push('data1');
array[array.length] = 'data2';
どちらでも同じ結果になりますが、可読性・パフォーマンスの観点から末尾にデータを追加する場合はpushメソッドを使った方がいいです。
配列を走査する
配列を0番目の要素から末尾の要素まで参照する場合は、以下のように書きます。
var array = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
i,
length;
for (i = 0, length = array.length; i < length; i++) {
console.log(array[i]);
}
また、連想配列を走査する場合は以下のように書きます。
var array = [ ],
key;
array['January'] = 1;
array['February'] = 2;
array['March'] = 3;
array['April'] = 4;
array['May'] = 5;
array['June'] = 6;
array['July'] = 7;
array['August'] = 8;
array['September'] = 9;
array['October'] = 10;
array['November'] = 11;
array['December'] = 12;
for (key in array) {
if (array.hasOwnProperty(key)) {
console.log(array[key]);
}
}
連想配列を走査するときは気をつけなければいけない事があります。
for inループはオブジェクトのプロパティをすべて参照するため、そのプロパティがユーザー定義かどうかを判定しなければいけません。
for inループで配列を走査する場合は、object.hasOwnPropertyメソッドで判定することを覚えておきましょう。
配列は参照型のデータ型
これはJavaScriptに限った話ではありませんが、配列を扱う上では重要な考え方なので一応触れておきます。
var numA = 100,
arrayA = ['data1', 'data2', 'data3'];
rewrite(numA, arrayA);
console.log(numA); // 100
console.log(arrayA); // ["deleted", "data2", "data3"]
function rewrite (param1, param2) {
var numB = param1,
arrayB = param2;
numB = 200;
arrayB[0] = 'deleted';
}
データ型は基本型と参照型があります。
基本型はnumAを見ればわかるように直感的ですが、参照型は値そのものではなくPCのメモリ上の値がある番地を渡しています。
まとめ
実は、この記事ではオブジェクト指向に関わる部分にはあまり触れていないので、情報量が足りないのですが、オブジェクト指向にまで触れると記事が膨大になってしまいます。
今回はここまでで終わりとしますが、もっとJavaScriptをしっかり書けるようになりたい方は、プロトタイプベースのオブジェクト指向について学ぶ事をおすすめします。
JavaScriptでのオブジェクト指向についての記事もそのうち書きたいなーとは思っていますので、もしこの記事が参考になればたまにこのブログを見ていただけると嬉しいです。