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()を使って単純に1つ整数値をいれた配列を作りたい時に、予想外のものができあがる。
たとえば「 var arr = new Array(3); 」とした場合、「 var arr = [3]; 」と同じものはできません。
「 arr = [3] 」の場合は1個の値(整数「3」)を持った配列が、「 arr = new Array(3) 」の場合は3個のカラッポ(undefined)の値を持った配列ができる。
var arr = new Array(3); // → 3個の空っぽ(undefined)の値をもった配列ができる var arr = [3]; // → 1個の値(整数「3」)をもった配列ができる
Array(3) は、変数arrに「Array用にメモリー枠を3つ用意してスタンバっといて!」という指示を出していると考える。
配列をループする
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...使っといた方がストレスが少なくていいと私は思っている。
