PHPの配列操作になれた人が、JavaScriptの配列・連想配列・多次元配列・多次元連想配列を作成・ループを理解する

2015-03-09 18:45:53

主に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...使っといた方がストレスが少なくていいと私は思っている。

共有:

配列を作成する

配列をループする

多次元配列を作成する

多次元配列をループする

連想配列を作成する

連想配列をループする

多次連想配列を作成する

多次連想配列をループする

共有: