ES6 - 새로운 데이터 구조 지도
2483 단어 전단mapES6새로운 데이터 구조
JavaScript 에서 대상 의 본질은 키 값 이 맞 는 집합 이지 만 키 는 문자열 일 수 밖 에 없습니다.이러한 결함 을 보완 하기 위해 ES6 는 새로운 데이터 구조 맵 을 가 져 왔 다.Map 도 키 값 이 맞 는 집합 입 니 다. 키 는 문자열 일 뿐만 아니 라 다른 데이터 형식 일 수도 있 습 니 다. 예 를 들 어 대상 (신기 하지 않 습 니까?).아래 의 예 를 보십시오.
var m = new Map();
var ul = document.getElementsByTagName('ul');
m.set(ul,'hi');
console.log(m.get(ul)); //hi
Map 의 조작 에는 다음 과 같은 몇 가지 가 있 습 니 다.
m.set(ul,'content'); // Map
m.get(ul);// ul
m.has(ul);// ， ul
m.delete(ul);// ul， true， false
m.size // m
m.clear(); // m
맵 에 직접 초기 값 을 부여 하 는 방법:
<span style="font-size:14px;">var m = new Map([[li_1,'hello'],[li_2,'world']]);</span>받 아들 인 매개 변 수 는 하나의 배열 이 고 배열 안의 구성원 은 키 값 이 맞 는 배열 을 표시 합 니 다.만약 당신 이 속 았 다 면, 위의 줄 코드 의 실제 실행 상황 을 보십시오.
var li_1 = document.getElementsByTagName('li')[0];
var li_2 = document.getElementsByTagName('li')[1];
var list = [ [li_1,'hello'] , [li_2,'world'] ];
var m = new Map();
list.forEach( ([key,value]) => m.set(key,value) );
console.log(m.get(li_1)); //hello한 키 에 여러 번 값 을 부여 하면 뒤의 값 은 앞의 값 을 덮어 씁 니 다.주의해 야 할 것 은 키 가 대상 일 때 인용 이 같 아야 키 가 같다 고 생각 하 는 것 이다.지도의 옮 겨 다 니 는 방법 을 소개 한다.
var ul = document.getElementsByTagName('ul');
var li_1 = document.getElementsByTagName('li')[0];
var li_2 = document.getElementsByTagName('li')[1];
var list = [ [li_1,'hello'] , [li_2,'world'] ];
var m = new Map();
list.forEach( ([key,value]) => m.set(key,value) );
for ( let key of m.keys() ){
console.log(key);
}
for ( let val of m.values() ){
console.log(val);
}
for ( let item of m.entries() ){
console.log(item[0],item[1]);
}
for ( let [key,val] of m.entries() ){
console.log(key,val);
}
m.forEach( function( val , key , ul ){
console.log( this ); //ul
console.log( val , key);
} , ul ); // forEach this 맵 및 기타 데이터 형식 변환
맵 에서 데 이 터 를 돌 리 는 가장 간단 한 방법 은... 확장 연산 자 를 사용 하 는 것 입 니 다.예 를 들 면:
console.log( ...m ); //[li, "hello"] [li, "world"]Map 대상 을 돌 릴 때 모든 키 가 문자열 이 어야 하 며 Object. create () 함 수 를 사용 해 야 합 니 다.Map 에서 JSON 으로 전환 할 때 도 모든 키 가 문자열 이 어야 하 며 JSON. Stringify () 함 수 를 사용 해 야 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
