es6 javascript_javascript スキルのマップ データ構造に関する簡単な説明

この記事では、主に es6 javascript のマップ データ構造を紹介します。編集者はそれが非常に優れていると考えています。参考までに JavaScript のソース コードを共有します。 JavaScript に興味がある方は、ぜひエディターをフォローしてご覧ください

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

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

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

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

上記のコードの本来の目的は、DOM ノードをオブジェクト データのキーとして使用することですが、オブジェクトはキー名として文字列のみを受け入れるため、要素は自動的に文字列 [オブジェクト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 のキーが単純なタイプの値 (数値、文字列、ブール値) である場合、Map は 2 つの値 (0 と - 0 を含む) が厳密に等しい限り、それをキーとして扱います。 さらに、NaN はそれ自体と厳密には等しくありませんが、Map はそれらを同じキーとして扱います。

let map = new Map(); 
map.set(NaN, 123); 
map.get(NaN) // 123 
map.set(-0, 123); 
map.get(+0) // 123

以上がこの記事の全内容です。皆様の学習に役立つことを願っております。また、皆様にも PHP 中国語 Web サイトをサポートしていただければ幸いです。

関連する推奨事項:

ie8はJavaScriptのmapメソッドをサポートしていません

JavaScriptのmapreduceの動作原理の簡単な分析_基礎知識

JavaScriptの明示的な変換と暗黙的な変換に基づいています変換(詳しい説明) _javascriptスキル

以上がes6 javascript_javascript スキルのマップ データ構造に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。