ホームページ > 記事 > ウェブフロントエンド > ES6 の新機能の詳細な紹介 - JavaScript の Map オブジェクトと WeakMap オブジェクトのコード例
ES6 の新機能の詳細な紹介 - JavaScript の Map オブジェクトと WeakMap オブジェクトのコード例
- 黄舟オリジナル
- 2017-03-06 15:15:011617ブラウズ
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() {})) // 输出：undefined Map オブジェクトのキー値として NaN、未定義、オブジェクト、配列、関数
などを使用します。"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) に注目してください。