ES6의 새로운 기능에 대한 자세한 소개 - JavaScript의 Map 및 WeakMap 객체의 코드 예제-JS 튜토리얼-php.cn

ES6의 새로운 기능에 대한 자세한 소개 - JavaScript의 Map 및 WeakMap 객체의 코드 예제

黄舟

풀어 주다： 2017-03-06 15:15:01

원래의

1594명이 탐색했습니다.

Map 객체

Map 객체는 해당 키/값 쌍이 있는 객체이며 JS의 Object도 키/값 쌍의 객체입니다.

ES6에서는 Map은 Object 객체와 비교하여 몇 가지 차이점이 있습니다.

1: Object 객체에는 프로토타입이 있습니다. 즉, Object.create(null을 사용하지 않는 한 객체에 기본 키 값이 있음을 의미합니다. ) 프로토타입 없이 객체를 생성합니다.

2: Object 객체에서는 String과 Symbol만 키 값으로 사용할 수 있지만  Map에서는 키 값을 무엇이든 기본 유형(String, Number, Boolean, 정의되지 않음, NaN….) 또는 객체(Map, Set, Object, Function, Symbol, null….);

3: Map의 크기 속성 은 Map의 길이를 쉽게 가져올 수 있습니다. 객체의 길이를 얻으려면 다른 방법만 사용할 수 있습니다.
Map 인스턴스 객체의 키 값은 배열이거나 객체 또는 A 함수가 더 캐주얼하고 Map 객체 인스턴스의 데이터 정렬은 사용자가 푸시한 순서를 기반으로 하는 반면, 객체 인스턴스에서는 키와 값의 순서를 따릅니다. 다소 규칙적입니다(숫자로 시작하는 키 값을 먼저 정렬한 다음 문자열로 시작하는 키 값을 정렬합니다).

Map 인스턴스의 속성

map.size 이 속성은 배열의 길이와 같은 의미를 가지며, 현재 인스턴스의 길이를 나타냅니다.

Map 인스턴스 메서드

clear() 메서드는 모든 키를 삭제합니다. /value pair;
delete( key), 지정된 키/값 쌍 삭제
entries()는 [key, value]를 반환하는 반복자를 반환합니다. 객체가 삽입되는 순서;
forEach(callback, context)는 함수를 실행하기 위해 루프를 수행하고 키/값 쌍을 매개변수로 사용합니다. 컨텍스트는 함수를 실행하는 컨텍스트입니다.
get(key)은 값 값에 해당하는 Map 객체 키를 반환합니다.
has(key)는 실제로 Map 객체에 지정된 키;
keys()는 반복자, 반복자를 반환합니다.
set(key, value) 키/값을 설정합니다. Map 객체에 대한 키/값 쌍을 지정하고 Map 객체를 반환합니다(Javascript의 Set, Set 객체에 대해 요소를 추가하는 방법을 add라고 하며 Map 객체에 요소를 추가하는 방법을 설정합니다.
[ @@iterator]는entrieds() 메소드와 동일하며, 객체가 삽입된 순서대로 반복자를 반환합니다. Return

지도 생성자 직접:

이제 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

로그인 후 복사

또한 NaN, 정의되지 않은 객체, 배열, 함수 등을 사용할 수도 있습니다. 는 Map 개체의 키 값으로 사용됩니다.

"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 메서드를 사용합니다.

...of 루프:

"use strict";
let map = new Map();
map.set(undefined, "0");
map.set(NaN, {});
map.forEach(function(value ,key ,map) {
    console.log(key,value, map);
});

로그인 후 복사

WeakMap

WeakMap은 약하게 참조된 Map 객체입니다. 객체가 js 실행 환경에 참조가 없는 경우 해당 WeakMap은 객체 내의 객체입니다. js 실행 환경에서도 재활용됩니다.

WeakMap 개체의 속성: 없음

WeakMap 개체의 메서드:

delete(key): 지정된 키/값 쌍 삭제;

get(key): Map 객체 키에 해당하는 값을 반환합니다.

has(key ) : Map 객체에 지정된 키가 있는지 실제로 반환하는 부울 값을 반환합니다.

set(key): Map에 대한 키/값 키/값 쌍을 설정합니다.

WeakMap에는 Map보다 훨씬 적은 메서드가 있습니다. 예를 들어 Map 인스턴스의 Clear 메서드를 구현할 수도 있습니다.

"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);
}

로그인 후 복사

위 내용은 ES6의 새로운 기능 소개 - JavaScript의 Map 및 WeakMap 개체 코드 예제에 대한 자세한 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!