JavaScriptで連想配列の操作方法を調べたので、メモしておきます。
JavaScriptで連想配列の要素数を取得する方法
JavaScriptの連想配列の要素数は、下の方法で取得できます。
連想配列はArrayオブジェクトを継承していないのでlengthプロパティを持っていないため、連想配列.length のように直接lengthで取得ができないのです。
Object.keys()は引数の連想配列のキーの配列を戻してくれるメソッドです。Object.keys()でキーの配列を取り出し、lengthプロパティで連想配列の要素数を取得しています。
JavaScriptの配列と連想配列の違いを整理すると分かりやすいです。
JavaScriptでは連想配列はオブジェクトという
JavaScriptで連想配列を操作する方法を調べようとして、検索キーワードに迷いました。JavaScriptには「連想配列」という表現は存在しません。
JavaScriptでは連想配列を「オブジェクト」といいます。JavaScriptの配列では、値に関数も入れられるのでオブジェクトというのですね。
JavaScriptではウィンドウ（ブラウザ）やドキュメント（表示領域）、HTML要素や属性など、その他多くのプログラム対象がオブジェクトとなります。
配列はリスト化された変数
「配列」とは複数の変数がリスト化されたもので、順序つきで保存されるデータのまとまりです。一般的な配列は、インデックス番号（添字）と呼ばれる0から始まる数字が自動的に割り振られます。
JavaScriptでは配列を下のように定義します。
【リテラル記法】
const 配列名 = [値1, 値2, 値3…];
【Arrayコンストラクター】
const 配列名 = new Array(値1, 値2, 値3…);
連想配列とJavaScriptでの定義方法
連想配列は自動的に割り振られるインデックス番号をキーとして持つかわりに、任意の文字列をキーとして指定します。
キーを指定することで、何が格納されているかが分かりやすい（連想しやすい）配列です。JavaScriptでは連想配列を下のように定義します。
【リテラル記法】
const 連想配列名 = {キー1:値1, キー2:値2, キー3:値3…};
【Objectコンストラクター】
let 連想配列名 = new Object();
連想配列名.キー1 = 値1;
連想配列名.キー2 = 値;
のように追加できます。
一般的な配列は new Arrayで生成するのに対し、連想配列は new Objectです。連想配列はArrayオブジェクトを継承していないので、Arrayオブジェクトのメソッドやプロパティは使えないのですね。
JavaScriptで連想配列を操作してみた
では要素数の取得以外にも、連想配列を操作してみましょう。
連想配列の値を取得する方法
連想配列の値はキーを指定して取得します。「連想配列名.キー」や「連想配列名[‘キー’]」の構文で取得できます。
const person = {name: ‘山田太郎’, sex: ‘男’, age: 20, };
let name = person.name;
または
let name = person[‘name’];
連想配列のメソッドを使ってのキーや値を取得する方法
先頭の「連想配列の要素数を取得する方法」でも使いましたが、Object.keys()メソッドで連想配列のキーの配列を取得できます。
const person = {name: ‘山田太郎’, sex: ‘男’, age: 20, };
console.log(Object.keys(person));
コンソールには name, sex, age のように表示されます。
値の配列はObject.values()メソッドで取得できます。
console.log(Object.values(person));
コンソールには ‘山田太郎’, ‘男’, 20 のように表示されます。
Object.entries()メソッドを使うと[キー、値]の配列を取得できます。
console.log(Object.entries(person));
コンソールには下のように表示されます。
(3) [Array(2), Array(2), Array(2)]
0:(2) [‘name’, ‘山田太郎’]
1:(2) [‘sex’, ‘男’]
2:(2) [‘age’, 20]
ループ処理を使って取得する方法
連想配列のキーや値を全て取得するには、for inを使って要素をループさせます。
// 連想配列のキーや値をループで取得する例
const person = {name: '山田太郎', sex: '男', age: 20, };
for(const key in person) {
console.log( key ); //キー
console.log( person[key] ); //値
}jQueryを使うと次の方法で取得できますね。
// jQueryではこんなふうに取得できる
$.each(person, (key, val) => {
console.log( key ); //キー
console.log( val ); //値
});まとめ
- JavaScriptの連想配列の要素数は「Object.keys(連想配列).length」で取得できる。
- JavaScriptでは連想配列はオブジェクトで、Arrayは継承していない。
一般的な配列と連想配列の違いを確認することで、配列や連想配列の理解が深まりました。今後も操作方法を追記していきます。
const 連想配列の要素数 = Object.keys(連想配列).length