지도가 주문되었습니다. ES6의 맵 유형은 많은 키-값 쌍을 저장하는 정렬된 목록입니다. 키 이름의 동등성은 "Objext.is()" 메소드를 호출하여 판단됩니다. , 따라서 숫자 5와 문자열 "5"는 두 가지 유형으로 판단되며 프로그램에서 두 개의 독립된 키로 나타날 수 있습니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.
1. 맵 컬렉션
JavaScript 객체는 본질적으로 키-값 쌍의 컬렉션이지만 전통적으로 문자열만 키-값 쌍으로 사용할 수 있습니다.
이 문제를 해결하기 위해 ES6에서는 지도 데이터 구조를 제공합니다. 이는 객체와 유사하며 키-값 쌍의 모음이기도 합니다. 그러나 이 키의 범위는 문자열에만 국한되지 않고 다양한 유형의 값(객체 포함)을 키로 사용할 수 있습니다. 즉, 객체 구조는 (문자열-값) 대응을 제공하고 맵 구조는 ES6에서 맵 유형을 구현하며 많은 키-값 쌍을 저장하는 정렬된 목록이며 키 이름과 해당 값은 모두 지원합니다. 데이터. 키 이름의 동등성 판단은 Objext.is() 메서드를 호출하여 이루어지므로 숫자 5와 문자열 '5'는 두 가지 유형으로 판단되어 프로그램에서 두 개의 독립된 키로 나타날 수 있습니다.
참고: 지도 컬렉션에서 +0과 -0은 동일한 것으로 간주되며 이는 "키-값 쌍" 데이터 구조가 필요한 경우입니다. , 지도는 객체보다 적합하며 검색 속도가 매우 빠릅니다
1. 속성: 크기지도의 요소 수를 반환합니다
2. 기본 방법
(1) set()
맵 데이터에 추가하고 추가된 맵을 반환합니다(기존 키에 값을 할당하면 이전 값을 덮어씁니다)
(2) get()
특정 키의 값을 가져오고 반환 키에 해당하는 값, 그렇지 않으면 정의되지 않음을 반환
(3)has()
특정 키가 존재하는지 감지하고 부울 값을 반환
let map = new Map();
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
console.log(map.size);
console.log(map.get('JacksonWang'));
console.log(map.get('LEO'));
console.log(map.has('Z-'));
//输出: 3
// 123
// 456
// true
로그인 후 복사
(4)delete()
Delete a 키와 해당 값을 반환하고 부울 값을 반환하며, 삭제에 성공하면 true가 됩니다
(5)clear()
모든 값을 지우고 정의되지 않은 값을 반환
let map = new Map();
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
map.delete('Z-');
console.log(map.size);
console.log(map.clear())
//输出: 2
// undefined
로그인 후 복사
3. 참고: 맵의 순회 순서는 삽입 순서입니다
( 1) 키()
맵의 모든 키 가져오기
(2) 값()
모든 값 가져오기 of the map
(3)entries()
지도의 모든 구성원 가져오기
let map = new Map();
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
console.log(map.keys())//打印所有的键
console.log(map.values())//打印所有的值
console.log(map.entries())//以键值对的方式
/*输出：
[Map Iterator] { 'JacksonWang', 'LEO', 'Z-' }
[Map Iterator] { '123', '456', '789' }
[Map Entries] {
[ 'JacksonWang', '123' ],
[ 'LEO', '456' ],
[ 'Z-', '789' ]
}*/로그인 후 복사
(4) forEach()
지도의 모든 구성원 탐색
let map = new Map();
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
for(const [key,value] of map.entries()){
console.log(`${key}:${value}`);
}
/*输出:
JacksonWang:123
LEO:456
Z-:789
*/로그인 후 복사
4. to arraymap 구조를 array destructuring
let map1 = new Map([
[1,'One'],
[2,'Two'],
[3,'Three']
])
console.log([...map1.keys()]);
console.log(...map1.entries())
console.log([...map1.entries()]);
/*输出:
[ 1, 2, 3 ]
[ 1, 'One' ] [ 2, 'Two' ] [ 3, 'Three' ]
[ [ 1, 'One' ], [ 2, 'Two' ], [ 3, 'Three' ] ]
*/로그인 후 복사
2. Weakmap collection
WeakMap은 약한 참조입니다. Map 컬렉션은 객체에 대한 약한 참조를 저장하는 데에도 사용됩니다. WeakMap 컬렉션의 키 이름은 개체여야 합니다. 개체가 아닌 키 이름을 사용하면 오류가 보고됩니다. 컬렉션은 이러한 개체에 대한 약한 참조를 저장합니다. 엔진의 가비지 수집 메커니즘 이 개체는 자동으로 재활용되며 WeakMap 컬렉션의 키-값 쌍은 제거됩니다. 그러나 컬렉션의 키 이름만 이 규칙을 따릅니다. 키 이름에 해당하는 값이 개체인 경우 저장된 개체의 강력한 참조는 가비지 수집 장치를 트리거하지 않습니다
1.
( 1) DOM 요소 저장
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">WeskMap测试</button>
<script>
let btn = document.querySelector('#btn');
let wmap = new WeakMap();
wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
btn.addEventListener('click',function(){
let temp = wmap.get(btn);//从这里获取键名为btn的值
temp.timesClicked++;
console.log(temp.timesClicked)
},false)
</script>
</body>
</html>로그인 후 복사
(2) 리스닝 이벤트 등록 리스너 객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">WeskMap测试</button>
<script>
let btn = document.querySelector('#btn');
let wmap = new WeakMap();
wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
// btn.addEventListener('click',function(){
// let temp = wmap.get(btn);//从这里获取键名为btn的值
// temp.timesClicked++;
// console.log(temp.timesClicked)
// },false)
function f1(){
let temp = wmap.get(btn);//从这里获取键名为btn的值
temp.timesClicked++;
console.log(temp.timesClicked)
}
btn.addEventListener('click',f1,false)
</script>
</body>
</html>로그인 후 복사
(3) Deploy private attribute
function Person(name){
this._name = name;
}
Person.prototype.getName = function(){
return this._name;
}
//但这是，创建一个Person对象的时候，我们可以直接访问name
let p = new Person('张三');
console.log(p._name)
//输出：张三로그인 후 복사
let Person = (function(){
let privateData = new WeakMap();
function Person(yourname){
privateData.set(this,{_name:yourname})//this当前这个键的对象
}
Person.prototype.getName = function(){
return privateData.get(this)._name;//
}
return Person;
})();//定义好了函数就开始执行
let p = new Person('jack');
console.log(p._name)//因为name的私有型，所以在外不可访问
console.log(p.getName())
/*输出:
undefined
jack
*/로그인 후 복사
[관련 권장 사항:
javascript 비디오 튜토리얼
, 웹 프론트 엔드]
위 내용은 es6 맵이 주문되었나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![Node.js 전체 입문 튜토리얼 [es6+npm+express+webpack+promise]](https://img.php.cn/upload/course/000/000/068/6242b4c8f1a39624.png)
![JavaScript 기본 구문 [dom|bom|es6 새 구문|jQuery|데이터 시각화 echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
