ES6 の新機能の詳細な紹介 - JavaScript の Map オブジェクトと WeakMap オブジェクトのコード例-jsチュートリアル-php.cn

ES6 の新機能の詳細な紹介 - JavaScript の Map オブジェクトと WeakMap オブジェクトのコード例

黄舟

リリース： 2017-03-06 15:15:01

オリジナル

1550 人が閲覧しました

Map オブジェクト

Map オブジェクトは、対応するキーと値のペアを持つオブジェクトであり、JS のオブジェクトもキーと値のペアのオブジェクトです。

ES6 の Map オブジェクトと Object オブジェクトにはいくつかの違いがあります。

Object オブジェクトにはプロトタイプがあります。つまり、プロトタイプなしでオブジェクトを作成するために Object.create(null) を使用しない限り、オブジェクトにはデフォルトのキー値があります。

Object オブジェクト内でのみ。キー値として文字列とシンボル を使用しますが、Map では、キー値は 任意の基本型 (文字列、数値、ブール値、未定義、NaN…)、またはオブジェクト (マップ、セット、オブジェクト、関数、シンボル、null… .);

Map の size 属性 を介して、オブジェクトの長さを取得するには、他のメソッドのみを使用できます。 マップインスタンスオブジェクトは 1 つであり、配列、オブジェクト、または関数はより任意であり、
マップオブジェクトインスタンス 内のデータの並べ替えはユーザーのプッシュの順序に従って並べ替えられ、 内のキーと値の順序は並べ替えられます。オブジェクトインスタンスはある程度規則的です (数字で始まるキー値が最初に並べ替えられ、次に文字列で始まるキー値が並べ替えられます)。

Map インスタンスの属性

map.size この属性は同じです。配列の長さとして意味し、現在のインスタンスの長さを示します。

clear()

メソッドは、すべてのキー/値のペアを削除します。値のペア;

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, "字符串&#39;");
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 => &#39;0&#39;, 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);
}

ログイン後にコピー

WeakMap

WeakMap は、弱参照された 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) に注目してください。