![見出し画像](https://assets.st-note.com/production/uploads/images/148578946/rectangle_large_type_2_374024fd9ce99a40dd0c758ec8d3492f.png?width=1200)
Java Scriptの基礎その18 JavaScriptのSetとMapの基本と応用
イントロダクション
JavaScriptには、データを効率的に管理するための便利なデータ構造がいくつかあります。その中でも、SetとMapはユニークな値の集合やキーと値のペアを効率的に扱うための強力なツールです。この記事では、SetとMapの基本的な使い方から応用例までを丁寧に解説し、実際のコードを通じて理解を深めていきます。
Setについて
Setの基本
Setは一意の値の集合を保持するデータ構造です。同じ値を複数回追加しても、Setは一度しか保持しません。
const italianMenu = new Set([
"パスタ",
"ピザ",
"スパゲッティ",
"カルボナーラ",
"スパゲッティ",
"ピザ",
]);
console.log(italianMenu);
このコードは、「パスタ」、「ピザ」、「スパゲッティ」、「カルボナーラ」の4つのユニークな要素を含むSetを作成します。重複する「スパゲッティ」と「ピザ」は1回しか保持されません。
出力:
Set(4) {"パスタ", "ピザ", "スパゲッティ", "カルボナーラ"}
新しいSetの作成
新しいSetを作成して、その内容を出力します。
console.log(new Set(["パエリア", "アヒージョ", "アヒージョ", "ハモンセラーノ"]));
出力:
Set(3) {"パエリア", "アヒージョ", "ハモンセラーノ"}
Setの操作
Setのサイズの取得、要素の存在確認、要素の追加・削除を行います。
console.log(italianMenu.size); // Setのサイズを取得
console.log(italianMenu.has("ピザ")); // 「ピザ」が含まれているか確認
italianMenu.add("ジェラート"); // 新しい要素を追加
console.log(italianMenu);
italianMenu.add("ジェラート"); // 重複する要素の追加
console.log(italianMenu);
italianMenu.delete("スパゲッティ"); // 特定の要素を削除
console.log(italianMenu);
出力:
4
true
Set(5) {"パスタ", "ピザ", "スパゲッティ", "カルボナーラ", "ジェラート"}
Set(5) {"パスタ", "ピザ", "スパゲッティ", "カルボナーラ", "ジェラート"}
Set(4) {"パスタ", "ピザ", "カルボナーラ", "ジェラート"}
インデックスによるアクセス
Setは配列のようにインデックスでアクセスすることはできません。
console.log(italianMenu[0]); // undefined
出力:
undefined
配列からSetへの変換
配列の重複を取り除きたい場合、Setを利用してユニークな要素の集合を作成できます。
const staffList = [
"ウェイター",
"シェフ",
"ウェイター",
"マネージャー",
"マネージャー",
];
const staffUnique_1 = new Set(staffList);
console.log(staffUnique_1);
const staffUnique_2 = [...new Set(staffList)];
console.log(staffUnique_2);
出力:
Set(3) {"ウェイター", "シェフ", "マネージャー"}
["ウェイター", "シェフ", "マネージャー"]
文字列からSetへの変換
文字列もSetに変換することができます。
console.log(new Set("amuronamie").size);
出力:
6
Mapについて
Mapの基本
Mapはキーと値のペアを保持するデータ構造です。キーにはあらゆるデータ型を使用でき、各キーは一意である必要があります。
const sampleBarber = new Map();
sampleBarber.set("店名", "ヘアカットサロン太郎");
sampleBarber.set(1, "東京都上野");
sampleBarber.set(2, "東京都秋葉原");
console.log(sampleBarber);
出力:
Map(3) {"店名" => "ヘアカットサロン太郎", 1 => "東京都上野", 2 => "東京都秋葉原"}
Mapの操作
Mapでは、キーで値を取得したり、キーの存在を確認したり、エントリを削除したりすることができます。
console.log(sampleBarber.get("店名")); // キー "店名" の値を取得
console.log(sampleBarber.get(1)); // キー 1 の値を取得
sampleBarber.delete(2); // キー 2 のエントリを削除
console.log(sampleBarber);
出力:
ヘアカットサロン太郎
東京都上野
Map(2) {"店名" => "ヘアカットサロン太郎", 1 => "東京都上野"}
Mapのサイズとクリア
Mapのエントリ数を取得したり、すべてのエントリを削除したりできます。
console.log(sampleBarber.size); // Mapのサイズを取得
sampleBarber.clear(); // すべてのエントリを削除
console.log(sampleBarber);
出力:
2
Map(0) {}
Mapの詳細な操作
複数のキーと値を追加し、動的に値を取得します。
sampleBarber
.set("サービス", ["ヘアカット", "髭剃り", "パーマ", "肩揉み"])
.set("開店", 11)
.set("閉店", 20)
.set(true, "開店してます")
.set(false, "閉店してます");
console.log(sampleBarber.get("店名"));
console.log(sampleBarber.get(true));
console.log(sampleBarber.get(1));
const currentTime = 8;
console.log(
sampleBarber.get(
currentTime > sampleBarber.get("開店") &&
currentTime < sampleBarber.get("閉店")
)
);
console.log(sampleBarber.has("カテゴリ"));
sampleBarber.delete(2);
const arraySample = [1, 2];
sampleBarber.set(arraySample, "テスト");
sampleBarber.set(document.querySelector("h1", "Heading"));
console.log(sampleBarber.size);
console.log(sampleBarber.get(arraySample));
sampleBarber.clear();
出力:
ヘアカットサロン太郎
開店してます
東京都上野
undefined
false
5
テスト
0
アンケートの例
Mapを使ったアンケートの例です。ユーザーの入力を受け取り、その結果を評価します。
const programmingSurvey = new Map([
["質問です", "この世で一番最強なプログラミング言語はどれですか?"],
[1, "C++"],
[2, "Java"],
[3, "Java Script"],
[4, "Python"],
["正解", 2],
[true, "正解!🥳"],
[false, "残念。違います。"],
]);
console.log(programmingSurvey);
console.log(programmingSurvey.get("質問です"));
for (const [key, value] of programmingSurvey) {
if (typeof key === "number") console.log(`${key}:${value}`);
}
const displayAnswer = Number(prompt("どれでしょう?"));
console.log(
programmingSurvey.get(programmingSurvey.get("正解") === displayAnswer)
);
出力:
Map(8) {"質問です" => "この世で一番最強なプログラミング言語はどれですか?", 1 => "C++", 2 => "Java", 3 => "Java Script", 4 => "Python", "正解" => 2, true => "正解!🥳", false => "残念。違います。"}
この世で一番最強なプログラミング言語はどれですか?
1:C++
2:Java
3:Java Script
4:Python
Mapから配列への変換
Mapのキーや値を配列に変換することもできます。
console.log([...programmingSurvey]);
console.log([...programmingSurvey.keys()]);
console.log([...programmingSurvey.values()]);
出力:
[["質問です", "この世で一番最強なプログラミング言語はどれですか?"], [1, "C++"], [2, "Java"], [3, "Java Script"], [4, "Python"], ["正解", 2], [true, "正解!🥳"], [false, "残念。違います。"]]
["質問です", 1, 2, 3, 4, "正解", true, false]
["この世で一番最強なプログラミング言語はどれですか?", "C++", "Java", "Java Script", "Python", 2, "正解!🥳", "残念。違います。"]
オブジェクトからMapへの変換
オブジェクトのエントリをMapに変換します。
const edmArtists = [
{
name: "Martin Garrix",
origin: "Netherlands",
},
{
name: "Avicii",
origin: "Sweden",
},
{
name: "Zedd",
origin: "Russia/Germany",
},
{
name: "Marshmello",
origin: "USA",
},
];
console.log(Object.entries(edmArtists));
const edmMap = new Map(Object.entries(edmArtists));
console.log(edmMap);
出力:
[[0, {name: "Martin Garrix", origin: "Netherlands"}], [1, {name: "Avicii", origin: "Sweden"}], [2, {name: "Zedd", origin: "Russia/Germany"}], [3, {name: "Marshmello", origin: "USA"}]]
Map(4) {0 => {name: "Martin Garrix", origin: "Netherlands"}, 1 => {name: "Avicii", origin: "Sweden"}, 2 => {name: "Zedd", origin: "Russia/Germany"}, 3 => {name: "Marshmello", origin: "USA"}}
まとめ
JavaScriptのSetとMapは、それぞれ異なる特性と用途を持つ強力なデータ構造です。Setはユニークな値のコレクションを提供し、重複を排除するのに役立ちます。Mapはキーと値のペアを柔軟に管理し、キーにはあらゆるデータ型を使用できます。これらを理解し活用することで、より効率的で明確なコードを書くことができます。日常的なプログラミングにこれらのデータ構造を活用してみましょう。
Githubでも公開してるよ!
先ほどのコードはGithubで公開しているよ。
ここ見てね!
この記事が気に入ったらサポートをしてみませんか?