ES6의 새로운 기능에 대한 자세한 소개 - JavaScript의 Map 및 WeakMap 객체의 코드 예제
- 黄舟원래의
- 2017-03-06 15:15:011640검색
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, "字符串'");
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 => '0', 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);
});WeakMapWeakMap은 약하게 참조된 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)를 참고하세요!