ホームページ > 記事 > ウェブフロントエンド > 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"
var items = [ ['name', ' 张三 '], ['title', 'Author'] ]; var map = new Map(); items.forEach(([key, value]) => map.set(key, value));
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"
new Map().get('asfddfsasadf') // undefined
var map = new Map(); map.set(['a'], 555); map.get(['a']) // undefined
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
let map = new Map(); map.set(NaN, 123); map.get(NaN) // 123 map.set(-0, 123); map.get(+0) // 123
関連する推奨事項:
ie8はJavaScriptのmapメソッドをサポートしていません
JavaScriptのmapreduceの動作原理の簡単な分析_基礎知識
JavaScriptの明示的な変換と暗黙的な変換に基づいています変換(詳しい説明) _javascriptスキル
以上がes6 javascript_javascript スキルのマップ データ構造に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。