ホームページ > 記事 > ウェブフロントエンド > ES6 の新機能の詳細な紹介 - JavaScript の Map オブジェクトと WeakMap オブジェクトのコード例
Map オブジェクトMap オブジェクトは、対応するキーと値のペアを持つオブジェクトであり、JS のオブジェクトもキーと値のペアのオブジェクトです。 ES6 の Map オブジェクトと Object オブジェクトにはいくつかの違いがあります。 1:
Object オブジェクトにはプロトタイプがあります。つまり、プロトタイプなしでオブジェクトを作成するために Object.create(null) を使用しない限り、オブジェクトにはデフォルトのキー値があります。
2:Object オブジェクト内でのみ。キー値として文字列とシンボル を使用しますが、Map では、キー値は 任意の基本型 (文字列、数値、ブール値、未定義、NaN…)、またはオブジェクト (マップ、セット、オブジェクト、関数、シンボル、null… .);
3:Map の size 属性 を介して、オブジェクトの長さを取得するには、他のメソッドのみを使用できます。 マップ インスタンス オブジェクトは 1 つであり、配列、オブジェクト、または関数はより任意であり、
マップ オブジェクト インスタンス 内のデータの並べ替えはユーザーのプッシュの順序に従って並べ替えられ、 内のキーと値の順序は並べ替えられます。オブジェクト インスタンスはある程度規則的です (数字で始まるキー値が最初に並べ替えられ、次に文字列で始まるキー値が並べ替えられます)。
entries() は反復子を返します。反復子は次のとおりです。オブジェクトの挿入順序は [key, value] を返します。
forEach(callback, context) は関数を実行するためにループし、key/ を受け取ります。パラメータとしての値のペア。 context は関数を実行するコンテキストです。
get(key) は Map オブジェクトを返します。
has(key) は実際に次の値を返します。 Map オブジェクトには指定されたキーがあり、
keys() は挿入順に各キーを返します。
set(key, value) のキー/値のペアを設定します。 Map オブジェクトを返し、Map オブジェクトを返します (JavaScript の Set に対して、Set オブジェクトに要素を追加するメソッドは add と呼ばれ、Map オブジェクトに要素を追加するメソッドは set の場合;
[@@iterator] エントリと同じ) () メソッドは、オブジェクトの挿入順序で [キー、値] を返す反復子を返します。
Map コンストラクターを自分でシミュレートします。 これで、Map オブジェクトのメソッドとプロパティに加えて、 Map コンストラクターを自分でシミュレートすることもできますが、これにはジェネレーターのサポートが必要です。そのため、ES5 で使用するには、ジェネレーター パッチ (Set コンストラクターをシミュレート) も必要です:
<html> <head> <meta charMap="utf-8"> </head> <body> <script> "use strict"; class Map { /** * @param [[key, value], [k, val]]; * @return void; */ static refresh (arg) { for(let [key,value] of arg) { //判断是否重复了; let index = Map.has.call(this, key); if(index===false) { this._keys.push(key); this._values.push(value); }else{ //如果有重复的值,那么我们执行覆盖; this._keys[index] = key; this._values[index] = value; } }; this.size = this._keys.length; } /** * @desc return false || Number; * */ static has (key) { var index = this._keys.indexOf(key); if(index === -1) { return false; }else{ return index; }; } constructor(arg) { this._keys = []; this._values = []; Map.refresh.call(this, arg); } set (key, value) { Map.refresh.call(this, [[key,value]]); return this; } clear () { this._keys = []; this._values = []; return this; } delete (key) { var index = Map.has.call(this, key); if(index!==false) { this._keys.splice(index,1); this._values.splice(index,1); }; return this; } entries () { return this[Symbol.iterator](); } has (key) { return Map.has.call(this, key) === false ? false : true; } *keys() { for(let k of this._keys) { yield k; } } *values () { for(let v of this._values) { yield v; } } //直接使用数组的forEach方便啊; forEach (fn, context) { return this; } //必须支持生成器的写法; *[Symbol.iterator] (){ for(var i=0; i<this._keys.length; i++) { yield [this._keys[i], this._values[i]]; } } }; var map = new Map([["key","value"]]); map.set("heeh","dada"); console.log(map.has("key")); //输出:true; map.delete("key"); console.log(map.has("key")); //输出:false; map.set("key","value"); var keys = map.keys(); var values = map.values(); console.log(keys.next()); console.log(keys.next()); console.log(values.next()); console.log(values.next()); var entries = map.entries(); console.log(entries); </script> </body> </html>Map デモを使用:
var myMap = new Map(); var keyString = "a string", keyObj = {}, keyFunc = function () {}; // 我们给myMap设置值 myMap.set(keyString, "字符串'"); myMap.set(keyObj, "对象"); myMap.set(keyFunc, "函数"); myMap.size; // 输出长度: 3 // 获取值 console.log(myMap.get(keyString)); // 输出:字符串 console.log(myMap.get(keyObj)); // 输出:对象 console.log(myMap.get(keyFunc)); // 输出:函数 console.log(myMap.get("a string")); // 输出:字符串 console.log(myMap.get({})); // 输出:undefined console.log(myMap.get(function() {})) // 输出:undefinedMap オブジェクトのキー値として
"use strict"; let map = new Map(); map.set(undefined, "0"); map.set(NaN, {}); console.log(map); //输出:Map { undefined => '0', NaN => {} }Map をループするメソッド Map インスタンスの forEach メソッドを使用します。
"use strict"; let map = new Map(); map.set(undefined, "0"); map.set(NaN, {}); map.forEach(function(value ,key ,map) { console.log(key,value, map); });を使用します。ループの:
"use strict"; let map = new Map(); map.set(undefined, "0"); map.set(NaN, {}); for(let [key, value] of map) { console.log(key, value); } for(let arr of map) { console.log(arr); }WeakMapWeakMap は、弱参照された Map オブジェクトです。オブジェクトが JS 実行環境に参照を持たない場合、対応する WeakMap オブジェクト内のオブジェクトも、JS 実行環境によってリサイクルされます。 WeakMap オブジェクトの属性: なし WeakMap オブジェクトのメソッド:
delete(key) :
指定されたキーと値のペアを削除します。get(key) :
のキーに対応する値を返します。 Map オブジェクト;has(key):
Map オブジェクトに指定されたキーがあるかどうかを実際に返すブール値を返します。set(key):
Map のキー/値のキー/値のペアを設定します。オブジェクトを返し、Map オブジェクトを返します。WeakMap は Map よりもはるかに少ないメソッドを持ちます。たとえば、Map インスタンスの clear メソッドを実装することもできます。 ES6 の新機能 - JavaScript の Map オブジェクトと WeakMap オブジェクト コード例の内容。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。