es6 맵이 주문되었나요?
- 青灯夜游원래의
- 2022-11-03 19:05:251503검색
지도가 주문되었습니다. 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 collectionWeakMap은 약한 참조입니다. 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> 코드의 myElement는 클릭 이벤트가 발생할 때마다 상태가 업데이트됩니다. 이 상태를 WeakMap에 키 값으로 넣었고 해당 키 이름은 myElement입니다. 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)
function f1(){
let temp = wmap.get(btn);//从这里获取键名为btn的值
temp.timesClicked++;
console.log(temp.timesClicked)
}
btn.addEventListener('click',f1,false)
</script>
</body>
</html>의 효과는 동일합니다
function Person(name){
this._name = name;
}
Person.prototype.getName = function(){
return this._name;
}
//但这是，创建一个Person对象的时候，我们可以直接访问name
let p = new Person('张三');
console.log(p._name)
//输出：张三 사용자가 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!