【JavaScript】連想配列 - キーが文字列の配列

JavaScriptの連想配列について解説します。

連想配列

連想配列は“キーが文字列の配列”です。

連想配列の生成

連想配列を扱うには初めに生成します。

基本構文

連想配列の生成は２通りあります。

変数 = Object()

変数 = {}

１つ目はObjectオブジェクトを使用した宣言方法です。

オブジェクトについて未学習の方は、ここでは構文のみ覚えていただければ問題ありません。

また、２つ目は１つ目の短縮構文と呼ばれる記法で、こちらの方が一般的に多く使われます。

サンプル

___ih_hl_start
let data1 = Object();
let data2 = {};
___ih_hl_end

console.log(typeof(data1));
console.log(typeof(data2));

object
object

１〜２行目で２つの連想配列を生成し、それぞれ変数data1と変数data2に記憶しました。

typeof関数で型を取得し、console.logで出力していますが、その結果からどちらもオブジェクト型であることが分かります。

連想配列の初期化

連想配列は生成時に初期値を設定可能です。

基本構文

変数 = { キー: 値, キー: 値, キー:値 ... }

波括弧（{}）の中に初期値をカンマ（,）区切りで記述します。

通常の配列とは異なり、キー: 値のようにキーと値をセットで記述する必要があります。

また、キーと値は任意の数だけ記述可能です。（正確には記憶領域で容量までになります。）

サンプル

___ih_hl_start
let data = {
    'Apple': 150,
    'Orange': 100,
    'Melon': 2300
};
___ih_hl_end

console.log(data);

{Apple: 150, Orange: 100, Melon: 2300}
Apple: 150
Melon: 2300
Orange: 100

１〜５行目が連想配列の生成と初期化です。

実行結果からキーと値をセットで記憶したことが分かります。

値の取得

配列の値を取得するにはキーを指定します。

基本構文

変数[キー]

キーの部分は取得する値のキーです。

サンプル

let data = {
    'Apple': 150,
    'Orange': 100,
    'Melon': 2300
};

___ih_hl_start
console.log(data['Apple']);
console.log(data['Orange']);
console.log(data['Melon']);
___ih_hl_end

150
100
2300

７〜９行目のdata['Apple']、data['Orange']、data['Melon']が連想配列の値の取得です。

指定したキー（インデックス）に対応する値を取得できていることが、実行結果から分かります。

値の記憶

連想配列に値を記憶するにはキーを指定して、代入演算子で値を代入します。

基本構文

変数[キー] = 値

値をキーの部分で指定した名称で記憶します。

また、既に同じキーが存在する場合は値を上書きし、存在しない場合は新しい記憶領域に指定したキーで値を記憶します。

サンプル

let data = {
    'Apple': 150,
    'Orange': 100,
    'Melon': 2300
};

___ih_hl_start
data['Orange'] = 200;
data['Pineapple'] = 1200;
___ih_hl_end

console.log(data);

{Apple: 150, Orange: 200, Melon: 2300, Pineapple: 200}
Apple: 150
Melon: 2300
Orange: 200
Pineapple: 1200

７〜８行目が連想配列への値の記憶（代入）です。

７行目は既存キーに代入したため、元の値100が200で上書きされました。

８行目は新規キーに代入したため、他の値を書き換えることなく追加されています。

キーの一覧取得

連想配列のキーの一覧を取得するには、Objectのkeysメソッドを使用します。

オブジェクトやメソッドについて未学習の方は、ここでは書き方のみ覚えていただければ問題ありません。

基本構文

Object.keys(変数)

変数の部分は連想配列を記憶する変数です。

サンプル

let data = {
    'Apple': 150,
    'Orange': 100,
    'Melon': 2300
};

___ih_hl_start
const keys = Object.keys(data);
___ih_hl_end

console.log(keys);

(3) ['Apple', 'Orange', 'Melon']
0: "Apple"
1: "Orange"
2: "Melon"

７行目のObject.keys(data)が連想配列dataのキーの一覧取得です。

実行結果で確認できるように、キーの一覧は配列で取得されます。

連想配列のサイズ

連想配列のサイズ（値の数）はObject.keysで取得したキーの一覧のlengthプロパティで取得可能です。

プロパティが未学習の方は、ここでは構文のみ覚えていただければ問題ありません。

基本構文

Object.keys(変数).length

変数の部分は連想配列を記憶する変数です。

サンプル

let data = {
    'Apple': 150,
    'Orange': 100,
    'Melon': 2300
};

const keys = Object.keys(data);

___ih_hl_start
console.log(keys.length);
___ih_hl_end

3

９行目のkey.lengthの部分で連想配列dataのサイズを取得しています。

変数keyは連組配列のキー一覧を記憶しているため、そのlengthプロパティにアクセスすることによって同等の情報を得ることができます。

注意点

存在しないキーを指定すると未定義（undefined）になります。

let data = {
    'Apple': 150,
    'Orange': 100,
    'Melon': 2300
};

console.log(data['Pineapple']);

undefined

キーが存在するかどうか確認するには、配列のincludesメソッドを使用します。

こちらもメソッドが未学習な方は、ここでは書き方のみ覚えていただければ問題ありません。

let data = {
    'Apple': 150,
    'Orange': 100,
    'Melon': 2300
};

const keys = Object.keys(data);

___ih_hl_start
console.log(keys.includes('Apple'));
console.log(keys.includes('Pineapple'));
___ih_hl_end

true
false

９〜１０行目でincludesメソッドを使用しています。

連想配列のキー一覧（ここではkeys）に.includes(キー)の形式を繋げて記述しており、丸括弧（()）内のキーが存在するかを論理値で取得します。

存在する場合はtrue、存在しない場合はfalseを取得し、実行結果からそのような処理がなされたことが確認できます。