JavaScript で連想配列を作成する
ほとんどのプログラミング言語には、データを Key-Value 形式で格納できるデータ構造があります。たとえば、Python には、文字列を値または値のリストに関連付けることができる辞書があります。
JavaScript には同じことを実現する Map オブジェクトがあります。また、この機能は古いブラウザと互換性がないことにも注意してください。歴史的に、単純なオブジェクトは、技術的に同じことを行うため、JavaScript で連想配列を作成するために使用されてきました。
一方、この目的でジェネリックオブジェクトを使用すると、かなり混乱する場合があります。Map メソッドでさえ問題があります。特に、言語に不慣れで、特定の規則に慣れている場合はなおさらです。
JavaScript で Map オブジェクトを使って連想配列を作る
JavaScript で連想配列を処理する最初の最も正しい方法は、Map オブジェクトを作成することです。このメソッドには、キーが文字列に限定されないという事実など、通常のオブジェクトに比べていくつかの利点があります。キーは関数、他のオブジェクト、および他のほとんどすべてのプリミティブにすることができます。
さらに、Map オブジェクトも最初から反復可能です。確かに、for in ループを使用してオブジェクトのプロパティを反復処理できますが、それは必ずしも洗練されたソリューションではありません。
そのため、JavaScript で連想配列を作成して設定する方法は次のとおりです。
const myMap = new Map();
myMap.set('firstItem', 1);
myMap.set('secondItem', 2);
myMap.set('thirdItem', 'third');
console.log([...myMap]);
出力：
[["firstItem", 1], ["secondItem", 2], ["thirdItem", "third"]]
キー/値エントリを作成するには、set() メソッドを使用できます。ちなみに、上記のコードで使用されている [...myMap] 構文は、Map が内部で@@iterator メソッドを実装しているため機能します。明示的な for in ループを作成する必要があるため、通常のオブジェクトとは一線を画しています。
特定の値を取得したい場合は、get() メソッドを使用できます。
const myMap = new Map();
myMap.set('firstItem', 1);
myMap.set('secondItem', 2);
myMap.set('thirdItem', 'third');
console.log(myMap.get('firstItem'));
出力：
1
その他の便利なメソッドには、Map オブジェクトに特定のキーがあるかどうかをチェックする has() や、オブジェクトからキーを削除できる delete() があります。
JavaScript で Map オブジェクトを処理するときは、角かっこ表記を使用しないでください
JavaScript には奇妙な振る舞いがたくさんあり、残念ながら Map オブジェクトも例外ではありません。
Python のバックグラウンドがある場合は、myMap["firstItem"] = 1 のようなものを使用して Map キー/値のペアを設定したくなるかもしれません。これは、ジェネリックオブジェクトを処理する場合にも有効なアプローチです。
幸いなことに、これによってエラーが発生することはなく、最初は意図したとおりに機能しているように見えます。角かっこ表記を使用してリファクタリングされた上記の例を次に示します。
const myMap = new Map();
myMap['firstItem'] = 1;
myMap['secondItem'] = 2;
myMap['thirdItem'] = 'third';
console.log(myMap);
出力：
[object Map] {
firstItem: 1,
secondItem: 2,
thirdItem: "third"
}
悪いニュースは、これが同じタイプのデータ構造ではなくなったことです。代わりに、これはジェネリックオブジェクトに変換されています。このため、マップを反復処理すると、マップは機能しなくなります。
さらに、以下のコードでわかるように、has() メソッドも目的の結果を返しません。
const myMap = new Map();
myMap['firstItem'] = 1;
myMap['secondItem'] = 2;
myMap['thirdItem'] = 'third';
console.log(myMap.has('firstItem'));
出力：
false
結論として、Map を扱うときは角かっこ表記を使用しないでください。そうしないと、コードが意図したとおりに機能しない可能性があります。
JavaScript でジェネリックオブジェクトを使用して連想配列を作成する
数年前まで、上記の Map メソッドはほとんどのブラウザと互換性がなかったため、プログラマーは代わりにジェネリックオブジェクトを使用していました。理論的には、このアプローチに問題はありませんが、下位互換性が問題にならない場合は、ほとんどの場合、Map を使用するようにしてください。
オブジェクトを使用して JavaScript で連想配列を作成する方法は次のとおりです。
const myMap = {};
myMap.firstItem = 1;
myMap.secondItem = 2;
myMap.thirdItem = 'third';
console.log(myMap);
出力：
{ firstItem: 1, secondItem: 2, thirdItem: "third"}
ここでは、ドット表記を使用してオブジェクトにプロパティを追加しました。文字列をキーとして使用する場合、文字列にスペースが含まれていると、このメソッドは意図したとおりに機能しません。
そのような場合は、以下に詳述するようにブラケット法を使用できます。
const myMap = {};
myMap['first item'] = 1;
myMap['second item'] = 2;
myMap['third item'] = 'third';
console.log(myMap);
出力：
{ first item: 1, second item: 2, third item: "third"}
JavaScript は両方のメソッドを受け入れますが、場合によっては非常に混乱する可能性があります。連想配列のキーとして文字列を本当に使用したい場合は、ドット表記が非常に制限されているため、角かっこ表記が最適です。
一方、角かっこ表記により、JavaScript オブジェクトは従来の辞書のように見えますが、そうではありません。したがって、機会があればいつでも Map メソッドを使用することをお勧めします。