ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でのマップとセットの操作: 総合ガイド

JavaScript でのマップとセットの操作: 総合ガイド

Patricia Arquette
リリース: 2024-12-22 14:21:15
オリジナル
674 人が閲覧しました

Working with Maps and Sets in JavaScript: A Comprehensive Guide

JavaScript でのマップとセットの操作

マップセット は、ES6 (ECMAScript 2015) で導入された 2 つの重要なデータ構造であり、従来のオブジェクトや配列よりも強化された機能を提供します。 マップセット の両方を使用すると、一意の値を保存し、より組織的かつ効率的な方法でデータを操作できます。

1. JavaScript での地図

マップ は、キーと値の両方が任意のデータ型であるキーと値のペアのコレクションです。文字列またはシンボルのみをキーとして持つことができるオブジェクトとは異なり、マップ では、任意の値 (オブジェクト、配列、関数など) をキーとして使用できます。

マップの作成

マップを作成するには、Map コンストラクターを使用できます。

const map = new Map();
ログイン後にコピー
ログイン後にコピー

または、キーと値のペアの配列を使用してマップを初期化することもできます。

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'New York']
]);

console.log(map);
ログイン後にコピー
ログイン後にコピー

マップへのエントリの追加

set() メソッドを使用してエントリを追加できます。

const map = new Map();

map.set('name', 'John');
map.set('age', 30);
map.set('city', 'Los Angeles');

console.log(map);
ログイン後にコピー
ログイン後にコピー

マップ内の値へのアクセス

get() メソッドを使用して、キーに関連付けられた値にアクセスできます。

const map = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

console.log(map.get('name'));  // Output: Alice
console.log(map.get('age'));   // Output: 25
ログイン後にコピー

マップ内のキーを確認する

キーが存在するかどうかを確認するには、has() メソッドを使用します。

const map = new Map([
  ['name', 'John'],
  ['age', 30]
]);

console.log(map.has('name'));  // Output: true
console.log(map.has('city'));  // Output: false
ログイン後にコピー

マップからのエントリの削除

delete() メソッドを使用してキーと値のペアを削除できます。

map.delete('age');
console.log(map.has('age'));  // Output: false
ログイン後にコピー

マップからすべてのエントリをクリアするには:

map.clear();
console.log(map.size);  // Output: 0
ログイン後にコピー

マップの反復

forEach() または for...of ループを使用して、Map 内のキーと値のペアを反復処理できます。

const map = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

// Using forEach
map.forEach((value, key) => {
  console.log(key, value);
});

// Using for...of
for (const [key, value] of map) {
  console.log(key, value);
}
ログイン後にコピー

2. JavaScript で設定します

Set は一意の値のコレクションであり、重複する値があれば自動的に削除されます。複数の同一の要素を格納できる配列とは異なり、Set では、コレクション内のすべての値が一意であることが保証されます。

セットの作成

Set コンストラクターを使用して Set を作成できます。

const set = new Set();
ログイン後にコピー

または、値の配列を使用して Set を初期化することもできます。

const set = new Set([1, 2, 3, 4, 5]);
console.log(set);
ログイン後にコピー

セットに値を追加する

add() メソッドを使用して Set に値を追加できます。

const set = new Set();

set.add(1);
set.add(2);
set.add(3);
set.add(2);  // Duplicate value, won't be added

console.log(set);  // Output: Set { 1, 2, 3 }
ログイン後にコピー

セット内の値を確認する

Set に値が存在するかどうかを確認するには、has() メソッドを使用します。

console.log(set.has(2));  // Output: true
console.log(set.has(4));  // Output: false
ログイン後にコピー

セットからの値の削除

delete() メソッドを使用して Set から値を削除できます。

const map = new Map();
ログイン後にコピー
ログイン後にコピー

セットからすべての値をクリアするには:

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'New York']
]);

console.log(map);
ログイン後にコピー
ログイン後にコピー

セットの反復

forEach() または for...of ループを使用して Set 内の値を反復処理できます。

const map = new Map();

map.set('name', 'John');
map.set('age', 30);
map.set('city', 'Los Angeles');

console.log(map);
ログイン後にコピー
ログイン後にコピー

3. マップとセットの比較

機能 地図 セット
Feature Map Set
Storage Stores key-value pairs Stores unique values only
Key Types Any type (objects, arrays, primitive types) Only values (no keys)
Uniqueness Keys must be unique, values can repeat Values must be unique
Order of Elements Iterates in insertion order Iterates in insertion order
Size map.size set.size
Methods set(), get(), has(), delete(), clear() add(), has(), delete(), clear()
ストレージ キーと値のペアを保存します 一意の値のみを保存します

キーの種類

任意の型 (オブジェクト、配列、プリミティブ型) 値のみ (キーなし) 独自性 キーは一意である必要があり、値は繰り返すことができます 値は一意である必要があります
    要素の順序
挿入順序で繰り返します 挿入順序で繰り返します

サイズ

マップ.サイズ set.size メソッド set()、get()、has()、delete()、clear() add()、has()、delete()、clear()
  • 4.
  • マップとセットの使用例
マップ
  • は、一意のキーを特定の値に関連付ける必要がある場合に便利です。例:

    ユーザー設定の保存

      構成オプションの保存
    • キーに基づいてデータをキャッシュする
  • セットは、一意の値のコレクションを保存する必要がある場合に最適です。例:

      Web サイト上のユニーク訪問者の追跡
    • 配列から重複する値を削除する
    • 処理または表示されたアイテムを追跡する
    結論


    マップ は、あらゆるデータ型をキーとしてサポートする効率的なキーと値のペアのストレージを提供し、挿入順序を維持します。

    セット

    は一意の値を保存するため、コレクション内に重複がないようにしたい場合に特に便利です。
    マップとセットはどちらも強力な機能を提供し、より構造化された効率的な方法でデータを管理するのに役立ちます。 こんにちは、アバイ・シン・カタヤットです! 私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。 ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

    以上がJavaScript でのマップとセットの操作: 総合ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    ソース:dev.to
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート