ホームページ > ウェブフロントエンド > フロントエンドQ&A > es6セットとマップの違いは何ですか

es6セットとマップの違いは何ですか

青灯夜游
リリース: 2022-04-15 18:38:11
オリジナル
7981 人が閲覧しました

違い: 1. Set は「set」構造を指しますが、Map は「dictionary」構造を指します; 2. Set は要素を「[value, value]」の形式で格納しますが、Map は要素を格納します"[値, 値]" の形式で格納されます。 "[キー, 値]" の形式で格納されます。 3. Map は get() を使用してキーで特定の値を見つけて返すことができますが、set はできません。

es6セットとマップの違いは何ですか

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

簡単な説明:

  • Set と Map の主なアプリケーション シナリオは、データの再編成とデータの保存です。
  • Setはセットと呼ばれるデータ構造であり、Mapは辞書と呼ばれるデータ構造です。

セットとディクショナリの違い:

  • 共通点: セットとディクショナリは一意の値を格納できる
  • 相違点: セットは [ で表されます。 value , value] で要素を格納する場合、辞書は [key, value]

Set:

ES6 new one A の形式で要素を格納します。新しいデータ構造は配列に似ていますが、メンバーは一意で順序付けされておらず、重複する値はありません。

Set 自体は、Set データ構造を生成するために使用されるコンストラクターです。

Set オブジェクトを使用すると、プリミティブ値でもオブジェクト参照でも、あらゆるタイプの一意の値を保存できます。

const s = new Set()
[1, 2, 3, 4, 3, 2, 1].forEach(x => s.add(x))
for (let i of s) {
    console.log(i)	// 1 2 3 4
}
// 去重数组的重复对象
let arr = [1, 2, 3, 2, 1, 1]
[... new Set(arr)]	// [1, 2, 3]
ログイン後にコピー

注: Set に値を追加する場合、型変換は行われないため、`5` と `"5"` は 2 つの異なる値になります。 Set は 2 つの値が異なるかどうかを内部的に決定します。使用されるアルゴリズムは「同じ値とゼロの等価性」と呼ばれ、**完全等価** 演算子 (`===`) に似ています。主な違いは * *`NaN` はそれ自体と等しいですが、完全等価演算子は `NaN` がそれ自体と等しくないものとみなされます。 **

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

let set1 = new Set()
set1.add(5)
set1.add('5')
console.log([...set1])	// [5, "5"]
ログイン後にコピー

操作メソッド:

  • add(value): 新しい、配列へのプッシュと同等。

  • delete(value): コレクション内の値が存在する場合はそれを削除します。

  • has(value): コレクションに value が存在するかどうかを判断します。

  • clear(): コレクションをクリアします。

Traversal メソッド: Traversal メソッド (トラバーサル順序は挿入順序)

  • keys(): コレクション内のすべてのキーを含む反復子を返します。

  • values(): コレクション内のすべての値を含むイテレータを返します。

  • entries(): Set オブジェクト内のすべての要素を含むキーと値のイテレータを返します。

  • forEach(callbackFn, thisArg): コレクション メンバーに対して callbackFn 操作を実行するために使用されます。thisArg パラメーターが指定されている場合、コールバック内の this はこのパラメーターになります。戻り値。

辞書 (マップ):

は、非常に高速な検索速度を備えた一連のキーと値のペアの構造です。

const m = new Map()
const o = {p: 'haha'}
m.set(o, 'content')
m.get(o)	// content

m.has(o)	// true
m.delete(o)	// true
m.has(o)	// false
ログイン後にコピー
操作方法:

    set(key, value): ディクショナリに新しい要素を追加します。
  • get(key): キーによって特定の値を検索し、それを返します。
  • has(key): キー key が辞書に存在するかどうかを判断します。
  • delete(key): key キーを使用して辞書から対応するデータを削除します。
  • clear(): この辞書内のすべての要素を削除します。
トラバーサル メソッド:

    Keys(): ディクショナリに含まれるすべてのキー名をイテレータの形式で返します。
  • values(): ディクショナリに含まれるすべての値をイテレータの形式で返します。
  • entries(): すべてのメンバーのイテレータを返します。
  • forEach(): 辞書のすべてのメンバーを走査します。
  • #概要**: **

セット:

# は「セット」構造を指します
  • [値, 値]、キー値とキー名は一致しています (またはキー値のみでキー名はありません)。
  • #キーで特定の値を検索できません

  • マップ:

##「辞書」構造を参照します

  • [キー、値]、キー値とキー名が矛盾しています

  • マップは get() を使用してキーによって特定の値を検索し、返すことができます

  • 【関連する推奨事項:
    JavaScript ビデオ チュートリアル
Web フロントエンド

]

以上がes6セットとマップの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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