제17절: ES6에 추가된 맵과 WeakMap은 또 무엇입니까?
맵이란?
Map이 무엇인지 설명하려면 Object 개체를 언급해야 합니다. 우리는 Object 개체가 키 값 쌍의 집합이라는 것을 알고 있습니다.
//Object
{
"name":" ","gender":1}
ES5의 키 이름의 유형은 반드시 문자열이어야 한다. 물론 ES6는 속성 이름의 유형을 Symbol로 허용하고 11절에 설명이 있으니 클릭하여 볼 수 있다.
현재 ES6는 맵 구조를 제공하여 Object 대상과 비슷하지만 키 이름의 유형은 문자열 유형에 국한되지 않고 다양한 유형의 값일 수 있다.이것은 Object 대상보다 더욱 유연하다고 말할 수 있다. 물론 더욱 복잡하다.
Map의 기본 사용 방법
맵이 무엇인지 알았으니, 이어서 맵의 기본적인 용법을 배워서, 맵이 어떻게 사용되는지 보자.
Map 구조는 다음과 같은 인스턴스를 만들기 위해 new를 사용하는 구조 함수를 제공합니다.
let m = new Map();
실례를 만드는 동시에 그 내용을 초기화하려면, 형식과 Set 구조 유형에 수조를 매개 변수로 사용할 수 있습니다. 한번 봅시다.
let m = new Map([
["name"," "],
["gender",1]
]);
console.log(m);
// ：Map {"name" => " ", "gender" => 1}
맵 () 방법의 매개 변수를 주의하십시오. 우선 이것은 하나의 수조이고, 그 안의 내용도 여러 개의 수조로 구성되어 있습니다.'name ':'전단군' 은 하나의 키 값 쌍으로 그것들을 하나의 수조에 포함합니다. ['name ':'전단군'], 다른 키 값 쌍도 마찬가지입니다: ['gender ': 1].이것이 Map 구조 인스턴스를 초기화하는 기본 쓰기 방법입니다.
인스턴스로 초기화하면 Map 구조는 인스턴스에 대한 작업을 수행할 수 있는 몇 가지 인스턴스 속성과 방법을 제공합니다.우리 함께 어떤 속성과 방법이 있는지 봅시다.
set () 메서드
set () 방법 작용: 실례에 키 값 쌍을 설정하고 맵 실례를 되돌려줍니다.
let m = new Map();
//set
// string
m.set("name"," ");
//
m.set(1,2);
console.log(m);
// ：Map {"name" => " ", 1 => 2}
set 방법의 사용은 매우 간단합니다. 키와value를 키 이름과 키 값으로 전송하기만 하면 됩니다.주의: 세 번째 줄 코드에서 우리가 전송한 키는 숫자 1이다. 이것은 맵 구조가 문자열 형식이 아닌 키 이름을 저장할 수 있다는 것을 증명한다. 물론 다른 형식의 키 이름을 더 많이 설정할 수도 있다. 예를 들어:
//
m.set([1],2);
//
m.set({
"name":"Zhangsan"},2);
//
m.set(true,2);
//Symbol
m.set(Symbol('name'),2);
//null
m.set(null,2);
//undefined
m.set(undefined,2);
상기 6가지 유형의 값은 모두 키 이름으로 사용할 수 있으며 키 값을 성공적으로 추가할 수 있으며 문제가 없습니다.
set 방법을 사용할 때 주의해야 할 것이 하나 있습니다. 만약 존재하는 키 이름을 설정하면, 뒤의 키 값은 앞의 키 값을 덮어씁니다.프레젠테이션:
let m = new Map();
m.set("name"," ");
console.log(m);
// ：Map {"name" => " "}
// name
m.set("name"," ");
console.log(m);
// ：Map {"name" => " "}
상기 사례에서 우리는 처음으로name의 값을'전단군'으로 설정했다. set 방법으로name의 값을 다시 설정할 때 후자는 전자의 값을 덮어쓰는 데 성공했고 이때부터'전단군'은'옆집 왕'으로 바뀌었다.
get () 방법
get () 방법 작용: 지정한 키 이름의 키 값을 가져오고 키 값을 되돌려줍니다.
let m = new Map([["name"," "]]);
m.get("name");// ：
m.get("gender");// ：undefined
get 방법의 사용도 간단합니다. 키 이름만 지정하면 됩니다.대응하는 키 값을 가져오고 키 값이 맞으면 키 값을 되돌려줍니다.그렇지 않으면undefined로 돌아가는 것도 이해하기 쉽다.
delete() 방법
delete () 방법 작용: 지정한 키 값 쌍을 삭제하고, 삭제가 성공적으로 되돌아왔습니다:true, 그렇지 않으면 되돌아왔습니다:false.
let m = new Map();
m.set("name"," ");
// ：Map {"name" => " "}
m.delete("name");// ：true
m.delete("gender");// ：false
"name"을 삭제하는 데 성공했고,true로 되돌아왔습니다.'gender'를 삭제할 때 맵 구조에'gender'라는 키 이름이 존재하지 않기 때문에 삭제에 실패하고false로 돌아갑니다.
clear () 방법
Set 구조와 마찬가지로 Map 구조도clear () 방법을 제공하여 모든 키 값을 한꺼번에 삭제할 수 있습니다.
let m = new Map();
m.set("name"," ");
m.set("gender",1);
m.clear();
console.log(m);
// ：Map {}
clear 방법을 사용한 후에 우리는 변수 m을 다시 인쇄해 보았는데 아무것도 없는 빈 맵 구조를 발견했다.clear 방법이 작용했다는 것을 설명한다.
has () 방법
has() 메서드 역할: Map 인스턴스에 지정된 키 값 쌍이 있는지 판단하려면:true 를 반환하고 그렇지 않으면:false 를 반환합니다.
let m = new Map();
m.set("name"," ");
m.has('name');// :true
m.has('age');// :false
Map 실례에 키 이름이 있습니다:name,true를 되돌려줍니다. 키 이름age가 존재하지 않으면 false를 되돌려줍니다.이해하기 쉬워요.
누비다
Object 객체가 for될 수 있음...in 스트리밍, 맵 구조도 약하지 않고 스트리밍이 가능합니다.우리는 ES6의 새로운 기능을 사용할 수 있다.of 키 이름이나 키 값을 옮겨다니기.
entries () 방법
entries () 방법 작용: 실례적인 키 값을 되돌려줍니다.
우리가 13절에 말했지, for...of는 플러그인 인터페이스가 있는 대상을 훑어볼 수 있습니다.그럼, 우리는 포...of에서 맵 구조의 역행을 보여 줍니다.
let m = new Map([
["name"," "],
["age",25]
]);
for(let [key,value] of m.entries()){
console.log(key+' '+value);
}
// ：name
// age 25
사례의 m.entries () 는 키 값이 맞는 플러그인을 되돌려줍니다. for... 을 사용합니다.이 플러그인을 옮겨다니며 키와value에 값을 부여하고 컨트롤러에서 출력합니다.
기억나세요?이전 절에서 Set 구조의 스트리밍을 소개할 때도 이러한 스트리밍 방식이었다.
keys()와values() 방법
키 () 방법: 실례적인 모든 키 이름을 되돌려주는 플러그인입니다.
values () 방법: 모든 키 값을 실례적으로 되돌려주는 플러그인입니다.
이왕 역력기라면 for로...of 그것들을 두루 훑어봐라:
let m = new Map([
["name"," "],
["age",25]
]);
// keys
for(let key of m.keys()){
console.log(key);
}
// ：name
// age
// values
for(let value of m.values()){
console.log(value);
}
// ：
// 25
keys 방법과values 방법의 사용 방식은 일치하지만 되돌아오는 결과는 다르다.
forEach() 방법
다음 세 가지 방법을 사용하여 각 키 값 쌍에 forEach를 적용할 수도 있습니다.
let m = new Map([
["name"," "],
["age",25]
]);
m.forEach(function(value,key){
console.log(key+':'+value);
});
// ：name:
// age:25
forEach 방법은 익명 함수를 받아들여 익명 함수에 value와 키를 전달한다. 각각 맵 실례의 키 이름과 키 값이다. 이 방법의 사용은 낯설지 않을 것이다.
크기 속성
그 중 자주 사용하는 속성 중 하나는 크기: 실례를 가져오는 구성원 수입니다.
let m = new Map();
m.set(1,3);
m.set('1','3');
m.size;// ：2
set 방법을 사용하여 실례 m에 두 개의 키 값을 구성원에게 추가했기 때문에 실례의 크기는 다음과 같다.
WeakMap이란?
맵 구조를 이야기했는데, 우리는 지금 WeakMap 구조를 이야기한다.
WeakMap 구조와 Map 구조는 매우 유사한데 다른 점은 WeakMap 구조의 키 이름은 인용 형식의 데이터만 지원한다는 것이다.어떤 것이 인용 유형의 값입니까?예를 들어 수조, 대상, 함수.
인용 유형이 무엇인지에 관하여 그 중에서 전지와 전가의 차이가 언급되었는데 인테리어 장인과 왕사부의 예를 기억하십니까?3절에는 상세한 설명이 있으니 클릭하면 볼 수 있습니다.
WeakMap의 기본 사용 방법
WeakMap 구조는 Map 구조와 마찬가지로 사용됩니다.
let wm = new WeakMap();
둘 다 new를 사용하여 실례를 만듭니다.키 값이 맞다면 set 방법을 사용하지만 키 이름의 형식은 인용 형식의 값을 요구해야 합니다. 한번 봅시다.
let wm = new WeakMap();
//
wm.set([1],2);
//
wm.set({
'name':'Zhangsan'},2);
//
function fn(){};
wm.set(fn,2);
console.log(wm);
// ：WeakMap {
[1] => 2,
Object {name: "Zhangsan"} => 2,
function => 2
}
인쇄 결과에서 알 수 있듯이 위 유형의 키 이름은 위크맵 실례에 성공적으로 추가되었습니다.
WeakMap과 Map의 차이점
일반 값 유형에서는 허용되지 않습니다.예를 들어 문자열, 숫자,null,undefined, 볼 형식.맵 구조는 허용된다. 이것이 바로 양자의 차이점이다. 명심해라.
맵과 마찬가지로 WeakMap도 get,has,delete 방법을 가지고 있어 사용법과 용도가 모두 같다.다른 점은 WeakMap은clear 방법을 지원하지 않고, 반복도 지원하지 않으며, 키,values,entries,forEach 네 가지 방법도 없고, 속성 크기도 없다는 것이다.
이유는 WeakSet 구조와 같다. 키 이름의 인용 유형은 약한 인용이다. 이 인용 대상이 언제 쓰레기 회수 메커니즘에 의해 회수될지 영원히 알 수 없다. 만약 이 인용 유형의 값이 쓰레기 메커니즘에 의해 회수된다면 WeakMap 실례의 대응하는 키 값도 사라질 것이다.
이 절 소결
요약: 맵 구조는 키 값이 맞는 집합이다. Object 대상과 달리 맵 구조의 키 이름은 모든 종류의 값이 될 수 있지만 WeakMap 구조의 키 이름은 인용 유형의 값만 허용한다.
그것들은 개발자에게 각각의 방법과 속성을 제공했다. set, get,has,delete 등 같은 방법을 제공했다. 그 중에서 맵 구조에는clear 방법이 더 많아졌고size 속성과 반복하는 방법: 키,values,entries,forEach가 있다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
