連想配列：JavaScript

　連想配列とは、添字に数字以外（文字列）が使用できる配列のことです。
　動的に要素が追加できます。
　
　配列には、いろいろなオブジェクトを格納することができますし、配列にまとめることでプログラム的にも扱いやすくなります。
　便利なので使うことも多いと思いますので、その使用方法についてまとめました。

初期化

以降の説明中の『〜』には配列名が入ります。

『〜.push()』『〜.pop()』等が使える初期化と使えない初期化

// 『〜.push』『〜.pop』等が使える
var myArray1 = [];
var myArray2 = new Array();

// 『〜.push()』『〜.pop()』等が使えない
var myArray3 = {};

配列の操作

『〜.push()』

配列の最後に、要素を追加します。

『〜.pop()』

配列の最後の要素を削除します。

『〜.unshift()』

配列の最初に、要素を追加します。

『〜.shift()』

配列の最初の要素を削除します。

『〜.splice(index, num)』

添字がindexの要素からnum個分の要素を全て削除します。

myArray1.push(100); // myArray1[0] = 100  
myArray1.push(200); // myArray1[1] = 200 ←削除 
myArray1.push(300); // myArray1[2] = 300 ←削除
myArray1.push(400); // myArray1[3] = 400 ←削除
myArray1.push(500); // myArray1[4] = 500
myArray1.splice(1, 3); // index = 1から3個分削除
// 全ての要素をログに出力
// 出力結果：myArray1[0] = 100
// 出力結果：myArray1[1] = 500

『〜.reverse()』

配列の並びを逆にします。

『〜.sort()』

配列の要素を昇順に並べ替えます。

昇順の並べ替え

下記の方法でも昇順に並べ替えできます。
〜.sort(function(a,b){ return a-b; });

降順の並べ替え

〜.sort(function(a,b){ return b-a; });

『delete』

指定した要素を削除します。ただし、要素の中身だけ削除し、いわゆる配列の箱は残ります。

『〜.length』

配列の長さ（要素数）を返します。
『〜.length』の値は、『〜.pop()と〜.shift()』で要素を削除した場合は反映されますが、『delete』で消した場合は反映されません。（箱が残るため）

『Object.keys(〜).length』

配列の長さ（要素数）を返します。
『delete』による削除も要素数に反映されます。『〜.pop()と〜.shift()』による削除も反映されます。

var myArray1 = [];
myArray1.push(101); // 要素を追加
myArray1.push(103); // 要素を追加
myArray1.push(102); // 要素を追加
// 全ての要素をログに出力
// 出力結果：myArray1[0] = 101
// 出力結果：myArray1[1] = 103
// 出力結果：myArray1[2] = 102
// 出力結果：myArray1.length = 3

delete myArray1[1]; // ２番めの要素を削除
// 全ての要素をログに出力
// 出力結果：myArray1[0] = 101
// 出力結果：myArray1[1] = %d    undefined ←削除されている
// 出力結果：myArray1[2] = 102 ←順番が詰められていない
// 出力結果：myArray1.length = 3 ←要素数が変わっていない
// 出力結果：Object.keys(myArray1).length = 2 ←要素数が変わっている

キー値が文字列の要素

上記はすべて、キー値が数値の場合です。キー値が文字列の場合は、要素数のカウントの仕方が変わります。
また『〜.pop()』、『〜.shift()』では、消せません。

var myArray2 = [];
myArray2.push(101); // 要素を追加
myArray2['key1'] = 103; // 要素を追加
myArray2.push(102); // 要素を追加
// 全ての要素をログに出力
// 出力結果：myArray2[0] = 101
// 出力結果：myArray2['key1'] = 103
// 出力結果：myArray2[1] = 102 ← myArray2.push(102)は、myArray2[1]に値が入る
// 出力結果：myArray2[2] = %d    undefined 
// 出力結果：myArray2.length = 2 ←キー値が文字列の要素はカウントされない
// 出力結果：Object.keys(myArray2).length = 3 ←キー値が文字列の要素もカウントされる

その他の操作

全ての要素を参照

for(key in myArray2){
        myArray2[key] = 0;
 }

全ての要素を削除

myArray2) = []; // または myArray2 = new Array();

多次元配列

配列を作り、その配列の各要素に、また配列を代入します。

// ２行３列の２次元配列を作成
var myArray3 = new Array(2);
for (var i = 0; i < myArray3.length; i++) {
	myArray3[i] = new Array(3);
	for (var j = 0; j < myArray3[i].length; j++) {
        	myArray3[i][j] = myArray3[i].length * i + j;
        }
}
// 全ての要素をログに出力
// 出力結果：myArray3[0][0] = 0
// 出力結果：myArray3[0][1] = 1
// 出力結果：myArray3[0][2] = 2
// 出力結果：myArray3[1][0] = 3
// 出力結果：myArray3[1][1] = 4
// 出力結果：myArray3[1][2] = 5

　
以上です。

あとがき

　『delete』のふるまい（中身は消えるが箱は残る）や、キー値が文字列の時のふるまいに気をつけないといけないですね。

モーリーのメモ

アプリ開発等（プログラミング、CG作成）、興味を持ったことを実践してまとめるブログです。

目次

初期化