JavaScript　連想配列とMapの使い方をマスターする

JavaScriptにおける連想配列とMapとは何ですか？

では、JavaScriptの連想配列とMapについて学んでみましょう。
連想配列とは名前をキーとしてアクセスできる配列です。
Mapはキーと値の組み合わせでデータを格納できます。

連想配列とは？

　「連想配列」とは、キーと値のペアを持つオブジェクトのことであり、JavaScriptのオブジェクトの一種です。

　通常の配列では、数値をインデックスとして使用して値を格納するのに対して、連想配列では、文字列や数値などの任意の値をキーとして使用して、それに対応する値を格納します。

※通常の配列について知りたい方は、「JavaScript 配列について学ぶ：定義から初期化、コピー、結合まで」をご確認下さい。

連想配列の使い方

「連想配列」はJavaScriptのオブジェクトとして実現されているため、連想配列を使用するには、オブジェクトを作成し、その中にキーと値のペアを定義することが必要です。

オブジェクトのキーには文字列、数値、シンボルなどを使用することができます。

以下では、連想配列を使ってデータを格納し、名前でアクセスしています。

const object = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
};

console.log(object.key1); // 'value1'

例えば、以下のようにオブジェクトを定義することで、キーと値のペアを持つ連想配列を作成することができます。

const fruits = {
  apple: 100,
  banana: 200,
  orange: 300
};

　上記の例では、fruitsというオブジェクトを定義し、その中にapple、banana、orangeというキーと対応する値を定義しています。この場合、キーとして文字列を使用しています。

プロパティの追加

また、以下のようにプロパティを追加することもできます。

fruits.grape = 400;

　上記の例では、fruitsオブジェクトに新しいキーとしてgrapeを追加しています。grapeの値は400に設定されています。

キーへアクセスする

連想配列に対して値を取得するには、以下のようにキーを指定してアクセスします。

console.log(fruits.apple); // 100
console.log(fruits['banana']); // 200

　上記の例では、fruitsオブジェクトの中から、appleやbananaというキーに対応する値を取得しています。fruits.appleやfruits['banana']のように、.や[]を使用してキーを指定することができます。

キーを指定して値を更新する

また、以下のようにキーを指定して値を更新することもできます。

fruits.apple = 150;

上記の例では、fruitsオブジェクトのappleに対応する値を150に更新しています。

このように、オブジェクトを使用することで、キーと値のペアを持つ連想配列を簡単に作成・操作することができます。

Mapオブジェクトとは

　Mapオブジェクトとは、ES6から追加されたデータ構造で、キーと値のペアを持つ連想配列を実現するためのデータ構造の一つです。連想配列と同様に、キーと値のペアを保持することができますが、オブジェクトと異なり、キーには様々な型を使用することができます。

以下では、Mapを使ってデータを格納し、キーを指定して値を取得しています。

const map = new Map();

map.set('key1', 'value1');
map.set('key2', 'value2');
map.set('key3', 'value3');

console.log(map.get('key1')); // 'value1'

Mapオブジェクトの使い方

　例えば、以下のようにMapオブジェクトを定義することができます。

const fruits = new Map([
  ['apple', 100],
  ['banana', 200],
  ['orange', 300]
]);

　上記の例では、new Map()を使用してMapオブジェクトを作成し、キーと値のペアを配列で定義しています。配列の最初の要素がキーで、2番目の要素が値となります。

setでキーと値のペアを追加する

　Mapオブジェクトでは、set()メソッドを使用して、キーと値のペアを追加することもできます。例えば、以下のようにset()メソッドを使用して、新しいキーと値のペアを追加することができます。

fruits.set('grape', 400);

上記の例では、set()メソッドを使用して、'grape'というキーと400という値のペアを追加しています。

getでキーに対応する値を取得する

　Mapオブジェクトでは、get()メソッドを使用して、キーに対応する値を取得することができます。例えば、以下のようにget()メソッドを使用して、キーに対応する値を取得することができます。

console.log(fruits.get('apple')); // 100
console.log(fruits.get('banana')); // 200

　上記の例では、get()メソッドを使用して、'apple'や'banana'というキーに対応する値を取得しています。

　Mapオブジェクトは、連想配列と同様に、キーと値のペアを保持することができますが、様々な型のキーを使用することができるため、柔軟な使用が可能です。また、sizeプロパティを使用して、Mapオブジェクトに含まれるキーと値のペアの数を取得することもできます。

連想配列とMapの違い

　連想配列とMapオブジェクトの主な違いは、キーの扱い方です。連想配列は、文字列をキーとして扱うことができますが、Mapオブジェクトでは、様々な型をキーとして扱うことができます。

　具体的には、連想配列では文字列をキーとして扱うことができます。一方、Mapオブジェクトでは文字列以外の型をキーとして扱うことができます。

　また、Mapオブジェクトは、sizeプロパティを使用して、キーと値のペアの数を取得することができますが、連想配列では、キーと値のペアの数を取得する方法はありません。

連想配列とMapはよく似ていますがどちらを使うのが良いでしょうか？

新しいコードでは、できるだけMapを使うことが推奨されています。Mapは、連想配列よりも柔軟であり、順番を保持できるため、連想配列よりも優れていると言えます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

「連想配列とMapの使い方について学ぶ」をまとめます。

連想配列は、名前でデータにアクセスすることができるため、データを整理するのに便利です。

　一方で、Mapは、異なるデータ型をキーとして使うことができるため、連想配列よりも柔軟です。また、Mapを使うと、データを追加した順番を保持することができるため、順番を保持したいときに便利です。

　どちらを使うべきかは、使用する状況や目的によって異なりますが、新しいコードでは、できるだけMapを使うことが推奨されています。

連想配列とMapの違いや基本的な使い方が分かりやすくまとまっていたので、とても参考になりました！

　連想配列とMapオブジェクトの両方を使うことができますが、どちらを使用するかは、プロジェクトやタスクに応じて判断する必要があります。文字列をキーとして扱う必要がある場合は、連想配列を、それ以外の場合はMapオブジェクトを使用することが一般的です。

　また、ES6以降では、Mapオブジェクトがより高機能であり、一般的に使われることが多いです。しかし、古いブラウザにはMapオブジェクトがサポートされていない場合があるため、それらに対応する必要がある場合は、連想配列を使用することも考えられます。