ES6을 사용하여 WeakMap을 통해 메모리 누수 문제 해결(자세한 튜토리얼)

이 글은 ES6가 WeakMap을 통해 어떻게 메모리 누수 문제를 해결하는지에 대한 자세한 설명을 주로 소개하고 참고용으로 올려드립니다.

1. Map

1. 정의

Map 객체는 문자열만 키로 사용할 수 있는 기존 객체와 달리 키-값 쌍을 저장합니다. 값이 키 역할을 합니다.

2. 구문

new Map([iterable])

Attribute

size: 키-값 쌍의 수를 반환합니다.

작업 방법

1. set(key, value): key 키의 값을 value로 설정(추가/업데이트)하고 Map 객체를 반환합니다.

2. get(key): 키 값을 읽고, 그렇지 않은 경우 정의되지 않은 값을 반환합니다.

3. has(key): Map 객체에 키-값 쌍이 있는지 확인하고 true/false를 반환합니다.

4. delete(key): 키-값 쌍을 삭제하고 true/false를 반환합니다.

5. clear(): Map 객체의 모든 키-값 쌍을 지웁니다.

Traversal method

1. keys(): 키 이름의 Iterator 객체를 반환합니다.

2. values(): 키 값의 Iterator 객체를 반환합니다.

3. entries(): 키-값 쌍의 Iterator 객체를 반환합니다.

4. forEach((value, key, map) => {}): Map 객체의 모든 키-값 쌍을 탐색합니다.

3. 예제

Operation method

let m = new Map([
  ['foo', 11],
  ['bar', 22]
]);
m.set('mazey', 322)
  .set('mazey', 413);
console.log(m); // {"foo" => 11, "bar" => 22, "mazey" => 413}
console.log(m.has('mazey')); // true
m.delete('mazey');
console.log(m.has('mazey')); // false
m.clear();
console.log(m); // {}

Traversal method

let m = new Map([
  ['foo', 11],
  ['bar', 22],
  ['mazey', 413]
]);
console.log(m); // {"foo" => 11, "bar" => 22, "mazey" => 413}
console.log(m.keys()); // MapIterator {"foo", "bar", "mazey"}
console.log(m.values()); // MapIterator {11, 22, 413}
console.log(m.entries()); // MapIterator {"foo" => 11, "bar" => 22, "mazey" => 413}
m.forEach((value, key, map) => {
  console.log("键：%s，值：%s", key, value);
});
// 键：foo，值：11
// 键：bar，值：22
// 键：mazey，值：413

2. WeakMap

1. WeakMap 객체는 키를 저장합니다. -값 쌍, Map과 다른 점 키는 약한 참조이고 키 개체가 사라진 후 메모리가 자동으로 해제되므로 키는 개체여야 합니다.

2. Syntax

new WeakMap([iterable])

Method

set(key, value): 키의 값을 value로 설정(추가/업데이트)하고 WeakMap 객체를 반환합니다.

1. get(key): 키 값을 읽고, 그렇지 않은 경우 정의되지 않은 값을 반환합니다.

2. has(key): WeakMap 객체에 특정 키-값 쌍이 존재하는지 확인하고 true/false를 반환합니다.

3. delete(key): 키-값 쌍을 삭제하고 true/false를 반환합니다.

4. Note

WeakMap의 특별한 가비지 수집 메커니즘으로 인해 명확한() 메소드가 없습니다.

3. 예시

let obj = {
  foo: 11
};
let wm = new WeakMap();
wm.set(obj, 413322);
console.log(wm); // {{…} => 413322}
console.log(wm.has(obj)); // true

3. Dom 객체를 사용하여 이벤트를 바인딩할 때 Dom 이후에 메모리가 해제되지 않는 경우(null로 설정) WeakMap을 통해 메모리 누수 문제 해결

물체가 사라지더라도 그것은 기억 속에 영원히 존재하게 될 것입니다.

Dom 객체를 저장하기 위해 WeakMap을 사용하면 이러한 문제가 발생하지 않습니다. 왜냐하면 Dom 객체가 사라진 후 JS 가비지 수집 메커니즘이 Dom 객체가 차지하는 메모리를 자동으로 해제하기 때문입니다.

<button type="button" id="btn">按钮</button>
<script>
let wm = new WeakMap();
let btn = document.querySelector(&#39;#btn&#39;);
wm.set(btn, {count: 0});
btn.addEventListener(&#39;click&#39;, () => {
  let v = wm.get(btn);
  v.count++;
  console.log(wm.get(btn).count);
});
// 1 2 3 4 5...
</script>

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue는 클릭 강조 효과를 얻기 위해 Echarts와 결합

vue 방법은 현재 활성화된 경로를 얻음

echarts 마우스 오버레이로 강조 표시된 노드 및 관계 이름 자세한 설명

위 내용은 ES6을 사용하여 WeakMap을 통해 메모리 누수 문제 해결(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!