ホームページ >ウェブフロントエンド >フロントエンドQ&A >ES6のマップとはどういう意味ですか?

ES6のマップとはどういう意味ですか?

WBOY
WBOYオリジナル
2022-03-30 18:41:324276ブラウズ

es6 では、マップはデータ構造であり、「キーと値」のコレクションです。キーは任意のタイプのデータにすることができます。マップは、より完全なハッシュである「値と値」の対応を提供します。構造体の実装の場合、構文は「new Map([iterable])」です。

ES6のマップとはどういう意味ですか?

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

ES6 のマップの意味は何ですか?

Map とは

ES5 より前には、Map のようなデータ コレクションはありませんでした。ES6 でのみ存在しました。に追加されました。

マップはキーと値のコレクションです。キーにはオブジェクトと同様に任意のタイプのデータを使用できますが、オブジェクトのキーには文字列のみを使用できます。

ES6 は Map データ構造を提供します。オブジェクトと似ており、キーと値のペアの集合でもありますが、「キー」の範囲は文字列に限定されず、さまざまな種類の値(オブジェクトを含む)をキーとして使用できます。

言い換えると、Object 構造は「文字列と値」の対応を提供し、Map 構造は「値と値」の対応を提供します。これは、ハッシュ構造のより完全な実装です。

「キーと値のペア」データ構造が必要な場合は、オブジェクトよりもマップの方が適しています。

構文

new Map([iterable])

Iterable には、要素がキーと値のペア (2 つの要素の配列、たとえば [[ 1, ' 1 ' ]、[ 2、 '2' ]])。

各キーと値のペアが新しいマップに追加されます。

null は未定義として扱われます。

オブジェクトとマップの比較:

オブジェクトとマップは、両方ともキーを押して値にアクセスし、キーを削除し、検出できるという点で似ています。キーがバインドされているかどうか。したがって (そして組み込みの代替手段はありません)、私たちは常にオブジェクトをマップとして扱ってきました。ただし、マップとオブジェクトの間には重要な違いがいくつかあります。次の状況ではマップを使用することをお勧めします

  • オブジェクトのキーには文字列またはシンボルのみを使用できますが、キーはマップ キーの値には、関数、オブジェクト、プリミティブ型などの任意の値を指定できます。

  • マップ内のキー値は順序付けされていますが、オブジェクトに追加されたキーは順序付けされていません。したがって、それを反復処理すると、Map オブジェクトは挿入順にキー値を返します。

  • マップのキーと値のペアの数は、size 属性を通じて直接取得できますが、オブジェクトのキーと値のペアの数は手動でのみ計算できます。

  • Map は直接反復できますが、Object の反復では、最初にキー配列を取得してから反復する必要があります。

  • オブジェクトには独自のプロトタイプがあり、プロトタイプ チェーン上のキー名がオブジェクトに設定したキー名と競合する可能性があります。 ES5 では、map = Object.create(null) を使用してプロトタイプなしでオブジェクトを作成できますが、この使用法はあまり一般的ではありません。

  • マップは、キーと値のペアの追加と削除が頻繁に行われるシナリオでは、パフォーマンス上の利点がいくつかあります。

例は次のとおりです:

// 字符串作为key,和JS对象类似
var map = new Map()
// set
map.set('name', 'John')//两个参数,分为对应map中key,value,  推进去的时候会自动检查类型,Object,String,Array等l
map.set('age', 29)
// get
map.get('name') // John
map.get('age')  // 29
这么对代码,看起来确实没有JS对象简洁
但Map的强大之处在于它的key可以是任意类型
// 对象作为key演示
var xy = {x: 10, y: 20}   // 坐标
var wh = {w: 100, h: 200} // 宽高
var map = new Map()
// set
map.set(xy, '坐标')
map.set(wh, '宽高')
// get
map.get(xy) // '坐标'
map.get(wh) // '宽高'

結果:

ES6のマップとはどういう意味ですか?

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。