JavaScriptによる地図データ構造の詳細な解釈

この記事では、主に es6 JavaScript のマップ データ構造を紹介します。編集者がそれを参考にさせていただきます。エディターと一緒に見てみましょう

この記事では、es6 JavaScript のマップ データ構造を紹介し、それを共有します。詳細は次のとおりです:

Map 構造の目的と基本的な使用法

JavaScript オブジェクト (オブジェクト)、本質的にはキーと値のペア (ハッシュ構造) のコレクションですが、伝統的にキーとして使用できるのは文字列のみです。 これは、その使用に大きな制限をもたらします。

var data = {}; 
var element = document.getElementById('myp'); 
data[element] = 'metadata'; 
data['[object HTMLpElement]'] // "metadata"

上記のコードの本来の目的は、DOM ノードをオブジェクト データのキーとして使用することですが、オブジェクトはキー名として文字列のみを受け入れるため、要素は自動的に文字列 [object HTMLpElement] に変換されます。

この問題を解決するために、ES6 は Map データ構造を提供します。 オブジェクトと似ており、キーと値のペアのコレクションでもありますが、「キー」の範囲は文字列に限定されず、さまざまな種類の値（オブジェクトを含む）をキーとして使用できます。 言い換えれば、Object 構造は「文字列と値」の対応を提供し、Map 構造は「値と値」の対応を提供します。これは、ハッシュ構造のより完全な実装です。 「キーと値」のデータ構造が必要な場合は、オブジェクトよりもマップの方が適しています。

var m = new Map(); 
var o = { 
 p: 'Hello World' 
}; 
m.set(o, 'content') 
m.get(o) // "content" 
m.has(o) // true 
m.delete(o) // true 
m.has(o) // false

上記のコードは、set メソッドを使用してオブジェクト o を m のキーとして扱い、次に get メソッドを使用してキーを読み取り、次に delete メソッドを使用してキーを削除します。
Map はコンストラクターとして配列をパラメーターとして受け入れることもできます。 この配列のメンバーは、キーと値のペアを表す配列です。

var map = new Map([ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]); 
map.size // 2 
map.has('name') // true 
map.get('name') // " 张三 " 
map.has('title') // true 
map.get('title') // "Author"

上記のコードは、新しい Map インスタンスを作成するときに、名前とタイトルの 2 つのキーを指定します。

Map コンストラクターは配列をパラメーターとして受け取り、実際に次のアルゴリズムを実行します。

var items = [ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]; 
var map = new Map(); 
items.forEach(([key, value]) => map.set(key, value));

以下の例では、文字列 true とブール値 true は 2 つの異なるキーです。

var m = new Map([ 
 [true, 'foo'], 
 ['true', 'bar'] 
]); 
m.get(true) // 'foo' 
m.get('true') // 'bar'

同じキーに複数の値が割り当てられている場合、後続の値が前の値を上書きします。

let map = new Map(); 
map 
 .set(1, 'aaa') 
 .set(1, 'bbb'); 
map.get(1) // "bbb"

上記のコードは、キー 1 に 2 つの連続する値を割り当て、後の値で前の値を上書きします。

不明なキーが読み取られた場合は、unknown が返されます。

new Map().get('asfddfsasadf') 
 // undefined

Map 構造では、同じオブジェクトへの参照のみが同じキーとみなされます。 これには十分注意してください。

var map = new Map(); 
map.set(['a'], 555); 
map.get(['a']) // undefined

上記のコードの set メソッドと get メソッドは同じキーを対象としているように見えますが、実際には 2 つの値であり、メモリアドレスが異なるため、get メソッドはキーを読み取ることができず、未定義を返します。

同様に、同じ値の 2 つのインスタンスは、Map 構造内の 2 つのキーとみなされます。

var map = new Map(); 
var k1 = ['a']; 
var k2 = ['a']; 
map 
 .set(k1, 111) 
 .set(k2, 222); 
map.get(k1) // 111 
map.get(k2) // 222

上記のコードでは、変数k1とk2の値は同じですが、Map構造体では2つのキーとみなされます。

上記から、Map のキーは実際にはメモリ アドレスにバインドされていることがわかります。メモリ アドレスが異なる限り、それらは 2 つのキーとみなされます。 これにより、他の人のライブラリを拡張するときに、オブジェクトをキー名として使用する場合、自分のプロパティが元の作成者のプロパティと同じ名前を持つことを心配する必要がなくなります。

Map のキーが単純型の値 (数値、文字列、ブール値) の場合、2 つの値 (0 と - 0 を含む) が厳密に等しい限り、Map はそれをキーとして扱います。 さらに、NaN はそれ自体と厳密には等しくありませんが、Map はそれらを同じキーとして扱います。

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

vue-cli設定ファイル(詳細なチュートリアル)

jQueryを使用してanimate.cssをカプセル化する(詳細なチュートリアル)

vuexでアイドル状態のリセットを実装する方法

以上がJavaScriptによる地図データ構造の詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。