【Javascript】 連想配列

Javascriptでの連想配列の使い方を紹介します。初期化時にキーに変数の値を入れる、キー名を省略するなど、ちょっとした技術も合わせて紹介します。

基本的な使い方

作り方

Javascriptでは連想配列は{}で囲み、それぞれの要素をカンマで区切ります。空の連想配列を作りたい場合、{}のみ書きます。

const a = {
    y: 20,
    x: 10,
    1: 30,
};
console.log(a);

{ '1': 30, y: 20, x: 10 }

それぞれの要素は、key: valueの形式で書きます。ここで、keyに文字列を使用する場合、ダブルクォーテーションは不要です。

また、Javascriptの連想配列はキーの順序は特に定まっていないことがわかります。

要素の取得

2通りあります。

const a = {
    x: 10,
    y: 20,
    1: 30,
};

console.log(a["x"]);
console.log(a.y);
// console.log(a.1); // SyntaxError: missing ) after argument list
console.log(a[1]);

10
20
30

一つは、a[key]のように、配列と同じような方法です。この場合、キーには式などあらゆる値が利用でき、文字列の場合はダブルクォーテーション等が必要です。

もう一つは、a.keyのように、ドットでアクセスする方法です。この場合、keyには文字列しか利用できませんが、ダブルクォーテーションが不要です。

要素の追加

存在しないキーを指定して代入すると、自動的に追加されます。

const a = {};
a.foo    = 100;
a["bar"] = 200;
a[0]     = 300;
console.log(a);

{ '0': 300, foo: 100, bar: 200 }

要素の削除

delete文を利用します。

const a = {
    x: 10,
    y: 20,
    1: 30,
};
delete a.x;
console.log(a);

{ '1': 30, y: 20 }

delete 消す要素で削除します。このとき、return文のような書き方をします。

初期化時のテクニック

キーに変数を使う

従来の方法では

const k = "foo";

const a = {};
a[k] = 100;

などの方法を取っていましたが、実は初期化時に変数の値を直接使うことができます。

const k = "foo";
const a = {
    [k]: 100
};
console.log(a)

{ foo: 100 }

のように、[var]とすると、変数の値をキーにすることができます。

キー名の省略

変数をValueに用いる場合、キー名を省略すると変数名がキー名になります。

const x = 10;
const y = 20;
const d = {
    x,
    y,
    z: 30
};
console.log(d);

{ x: 10, y: 20, z: 30 }

for文との合わせ

キーを配列で取得(keys)

Object.keysで取得できます。

const a = {
    x: 10,
    y: 20,
    1: 30,
};
const keys = Object.keys(a);
console.log(keys);

[ '1', 'x', 'y' ]

そのキーを使ってforEachするなどの手法もあります。

const a = {
    x: 10,
    y: 20,
    1: 30,
};
Object.keys(a).forEach((key) => {
    console.log(key);
})

1
x
y

値を配列で取得(values)

Object.valuesで取得できます。

const a = {
    x: 10,
    y: 20,
    1: 30,
};
const values = Object.values(a);
console.log(values);

[ 30, 10, 20 ]

この場合、キーは順番を保持しておらず、最初に入力した順番とは限らないという点に注意が必要です。

キーと値のセットを配列で取得(entries)

Object.entriesで取得できます。

const a = {
    x: 10,
    y: 20,
    1: 30,
};
const entries = Object.entries(a);
console.log(entries);

[ [ '1', 30 ], [ 'x', 10 ], [ 'y', 20 ] ]

この状態にすれば、for-ofで列挙したり、filter、mapなどの配列用のメソッドが使えるようになります。

const a = {
    x: 10,
    y: 20,
    1: 30,
    z: 20,
};
const entries = Object.entries(a);

const filterd = entries.filter((v) => v[1] == 20);
const mapped1 = entries.map((v) => (
    { [v[0]]: v[1] * 2 }
));
const mapped2 = entries.map((v) => v[1] / 2);

console.log(filterd);
console.log(mapped1);
console.log(mapped2);

[ [ 'y', 20 ], [ 'z', 20 ] ]
[ { '1': 60 }, { x: 20 }, { y: 40 }, { z: 40 } ]
[ 15, 5, 10, 10 ]

配列のfilterやmapなどは、下の記事を参照してください。

【Javascript】 配列

Javascriptにおける配列は、単なる配列を保存するだけでなく、mapやfilterなど、便利なメソッドが揃っています。 配列の作り方 ``…

for-in

forでObject.〇〇を使わずに列挙するには、for-inを利用します。for-ofは利用できません。

const a = {
    x: 10,
    y: 20,
    1: 30,
};
for (const key in a) {
    console.log(key);
}

1
x
y

型について

実は, Javascriptの連想配列は、連想配列という型ではなくObject型です。基本的に気にする必要はありません。

const a = {x: 20};
console.log(typeof a);
console.log(a.toString());

object
[object Object]

キーがあるか調べる

in句を用います。

const a = {
    x: 10,
    hoge: 20,
}

console.log("x" in a);
console.log("hige" in a);

true
false

まとめ

連想配列の宣言や、関連するObjectの機能を紹介しました。Javascriptの連想配列はあまり機能が多くないため、配列に直して使うことがそこそこあります。

Object.keysやObject.entriesなど、配列に変形する方法を知っておくと便利です。