PHPの配列操作になれた人が、JavaScriptの配列・連想配列・多次元配列・多次元連想配列を作成・ループを理解する
主にPHPばかりさわっているので、たまにJaveScriptで配列（連想・多次元配列・ハッシュ）を扱う時も、「アレ？ これでいいんだっけ？」となるのでメモ。
JavaScriptで「配列」というと、PHPの配列とは違って「Arrayオブジェクト」である。
さらに、キー名を持たない単純な「配列（Array）」と「連想配列（ハッシュ）」は種類の違うオブジェクト。
PHPをさわっているの感覚で記述していると、「あー、もう！」ってなる。
理解せずに使っていると、たぶんドツボにはまる。
配列を作成する
PHPで
$arr = array('WordPress', 'EC-CUBE', 'ZenCart');
とした場合と同じ様な配列が作りたい場合、JavaScriptでは次の様に記述する。
var arr = ['WordPress', 'EC-CUBE', 'ZenCart'];
※ 以下、蛇足
次の場合も同じものが作成される。
var arr = new Array('WordPress', 'EC-CUBE','ZenCart');
上の例のように、Array()としなくても[]で作れますが、慣れないうちは[](オブジェクトリテラル)を使うと覚えていた方がいい。
把握しておかないと、new Array()を使って単純に１つ整数値をいれた配列を作りたい時に、予想外のものができあがる。
たとえば「 var arr = new Array(3); 」とした場合、「 var arr = [3]; 」と同じものはできません。
「 arr = [3] 」の場合は１個の値（整数「3」）を持った配列が、「 arr = new Array(3) 」の場合は３個のカラッポ（undefined）の値を持った配列ができる。
var arr = new Array(3); // → ３個の空っぽ（undefined）の値をもった配列ができる var arr = [3]; // → １個の値（整数「3」）をもった配列ができる
Array(3) は、変数arrに「Array用にメモリー枠を３つ用意してスタンバっといて！」という指示を出していると考える。
配列をループする
PHPで
$arr = array('WordPress', 'EC-CUBE', 'ZenCart');
foreach($arr as $val){
echo $val;
}
// あるいは
for($i = 0; $i < count($arr); $i++){
echo $arr[$i];
}
と記述した場合と同じ様な動作をさせるには、JavaScriptでは次の様に記述する。
var arr = ['WordPress', 'EC-CUBE','ZenCart'];
for (var i in arr){
document.write(arr[i]);
}
// 変数 i には、（キー名が無いので）インデックス番号が入る
ループには色々な方法がある。
私の場合は、このfor...in...文が 後に紹介する連想配列の場合と同じ記述が使えるので、配列も連想配列も極力for...in...文を使うクセをつけるようにしている。
例えば、次のようなループは 普通の配列（Arrayオブジェクト）では使えるが 連想配列では使えない。
for(var i = 0; i < arr.length; i++){
document.write(arr[i]);
}
arr.forEach(function(val){
console.log(val);
});
多次元配列を作成する
PHPで
$arr = array(
array('WordPress', 'EC-CUBE','ZenCart'),
array('jQuery', 'jQueryUI','jQueryMobile')
);
とした場合と同じ様なものを作りたい場合、オブジェクトリテラルを使用して、次の様に記述する。
var arr = [ ['WordPress', 'EC-CUBE','ZenCart'], ['jQuery', 'jQueryUI', 'jQueryMobile'] ];
多次元配列をループする
PHPで
$arr = array(
array('WordPress', 'EC-CUBE','ZenCart'),
array('jQuery', 'jQueryUI', 'jQueryMobile')
);
foreach($arr as $x){
foreach($x as $y){
echo $y;
}
}
// あるいは
for($i = 0; $i < count($arr); $i++){
for($j = 0; $j < count($arr[i]); $j++){
echo $arr[$i][$j];
}
}
とした場合と同じ様な動作をさせるには、次の様に記述する。
for(var i in arr){
for(var j in arr[i]){
console.log(arr[i][j]);
}
}
// 変数 i, j には、（キー名が無いので）インデックス番号が入る
もちろん、先の例と同様の記述方法も有効であるが、後述の連想配列では使えない記述である。
arr.forEach(function(x){
x.forEach(function(y){
document.write(y);
});
});
for(var i = 0; i < arr.length; i++){
for(var j = 0; j < arr[i].length; j++){
document.write(arr[i][j]);
});
}
連想配列を作成する
先に述べたように、連想配列オブジェクトは、Arrayオブジェクトとは別のものであるので、扱いに注意が必要。
通常の配列（Arrayオブジェクト）と異なり、オブジェクトリテラルには{}を使う。
PHPで
$arr = array('key1' => 'WordPress', 'key2' => 'EC-CUBE', 'key3' => 'ZenCart');
とした場合と同じ様なものを作りたい場合、オブジェクトリテラルを使用して、次の様に記述する。
var obj = {key1: 'WordPress', key2: 'EC-CUBE', key3: 'ZenCart'};
//先までとは異なり、オブジェクトリテラルには{}を使う。
連想配列をループする
PHPで
$arr = array('key1' => 'WordPress', 'key2' => 'EC-CUBE', 'key3' => 'ZenCart');
foreach($arr as $k => $val){
echo $k;
echo $val;
}
とした場合と同じ様な動作をさせるには、次の様に記述する。
var obj = {key1: 'WordPress', key2: 'EC-CUBE', key3: 'ZenCart'};
for(var k in obj){
document.write(k);
document.write(obj[k]);
}
// 変数 k にはキー名が入る。
これまではfor...in...文でインデックス番号を取得していましたが、連想配列にした場合はキー名が取得できる。
※ obj は通常の配列（Array）オブジェクトではないため、forEachメソッドが用意されていない。
多次連想配列を作成する
PHPで
// 配列の中に連想配列
$arr_a = array(
array('key_a1' => 'WordPress', 'key_a2' => 'EC-CUBE', 'key_a3' => 'ZenCart'),
array('key_b1' => 'jQuery', 'key_b2' => 'jQueryUI', 'key_b3' => 'jQueryMobile')
);
// 連想配列の中に配列
$arr_b = array(
'php' => array('WordPress', 'EC-CUBE', 'ZenCart'),
'js' => array('jQuery', 'jQueryUI', 'jQueryMobile')
);
// 連想配列の中に連想配列
$arr_c = array(
'php' => array(
'key_a1' => 'WordPress',
'key_a2' => 'EC-CUBE',
'key_a3' => 'ZenCart'
),
'js' => array(
'key_b1' => 'jQuery',
'key_b2' => 'jQueryUI',
'key_b3' => 'jQueryMobile'
)
)
);
とした場合と同じ様なものを作りたい場合は、それぞれ次の様に記述する。
// 配列の中に連想配列
var arr_a = [
{key_a1: 'WordPress', key_a2: 'EC-CUBE', key_a3: 'ZenCart'},
{key_b1: 'jQuery', key_b2: 'jQueryUI', key_b3: 'jQueryMobile'}
];
// 連想配列の中に配列
var arr_b = {
php: ['WordPress', 'EC-CUBE', 'ZenCart'],
js: ['jQuery', 'jQueryUI', 'jQueryMobile']
};
// 連想配列の中に連想配列
var obj_c = {
php: {key_a1: 'WordPress', key_a2: 'EC-CUBE', key_a3: 'ZenCart'},
js: {key_b1: 'jQuery', key_b2: 'jQueryUI', key_b3: 'jQueryMobile'}
};
多次連想配列をループする
PHPで
// 配列の中に連想配列
$arr_a = array(
array('key_a1' => 'WordPress', 'key_a2' => 'EC-CUBE', 'key_a3' => 'ZenCart'),
array('key_b1' => 'jQuery', 'key_b2' => 'jQueryUI', 'key_b3' => 'jQueryMobile')
);
//ループ
foreach($arr_a as $k => $v){
foreach($val as $k2 => $v2){
echo $k;
echo $v;
}
}
// 連想配列の中に配列
$arr_b = array(
'php' => array('WordPress', 'EC-CUBE', 'ZenCart'),
'js' => array('jQuery', 'jQueryUI', 'jQueryMobile')
);
//ループ
foreach($arr_b as $k => $v){
echo $k;
foreach($v as $k2 => $v2){
echo $v2;
}
}
// 連想配列の中に連想配列
$arr_c = array(
array(
'php' => array(
'key_a1' => 'WordPress',
'key_a2' => 'EC-CUBE',
'key_a3' => 'ZenCart'
),
),
array(
'js' => array(
'key_b1' => 'jQuery',
'key_b2' => 'jQueryUI',
'key_b3' => 'jQueryMobile'
)
)
);
//ループ
foreach($arr_b as $k => $v){
echo $k;
foreach($v as $k2 => $v2){
echo $k2;
echo $v2;
}
}
とした場合と同じ様な動作をさせるには、次の様に記述する。
// 配列の中に連想配列
var arr_a = [
{key_a1: 'WordPress', key_a2: 'EC-CUBE', key_a3: 'ZenCart'},
{key_b1: 'jQuery', key_b2: 'jQueryUI', key_b3: 'jQueryMobile'}
];
for(var k in arr){
var v = arr[k]; // 値をコピー
for(var k2 in v){
var v2 = arr[k2];
document.write(k2); // 出力：key_a1 などのキー名
document.write(v2); // 出力：WordPress などの値
}
}
// 連想配列の中に連想配列
var arr_b = {
php: ['WordPress', 'EC-CUBE', 'ZenCart'],
js: ['jQuery', 'jQueryUI', 'jQueryMobile']
};
//ループ
for(var k in arr){
var v = arr[k]; // 値をコピー
document.write(k); // 出力: php などのキー名
for(var k2 in v){
// var v2 = arr[k2];
document.write(v2) // 出力：WordPress などの値
}
}
// 連想配列の中に連想配列
var arr_c = {
php: {key_a1: 'WordPress', key_a2: 'EC-CUBE', key_a3: 'ZenCart'},
js: {key_b1: 'jQuery', key_b2: 'jQueryUI', key_b3: 'jQueryMobile'}
};
//ループ
for(var k in arr){
var v = arr[k]; // 値をコピー
document.write(k); //出力：php などのキー名
for(var k2 in v){
var v2 = arr[k2];
document.write(k2); // 出力：key_a1 などのキー名
document.write(v2); // 出力：WordPress などの値
}
}
PHPの様に foreach($arr as $k => $v) として、配列と連想配列を同じ記述で扱えない。
for...in...文で、キー名又はインデックスを取得することは、配列でも連想配列でも可能なので、キー名を取得してから値のコピーをつくることで、PHPの foreach($arr as $k => $v) に近づけようとしている。
自分が配列（Array）オブジェクトを扱っているのか、連想配列（ハッシュ）オブジェクトを扱っているのか、きちんと意識しておいた方が間違いないのは確かだ。
チョロっと使う程度なら、for...in...使っといた方がストレスが少なくていいと私は思っている。
