집 >웹 프론트엔드 >JS 튜토리얼 >ES6 WeakMap은 메모리 누수를 해결합니다.

ES6 WeakMap은 메모리 누수를 해결합니다.

小云云원래의: 2018-03-12 09:09:101664검색

이 글은 주로 ES6가 WeakMap을 통해 메모리 누수 문제를 해결하는 방법에 대한 자세한 설명을 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 여러분에게 도움이 되기를 바라면서 지금 공유하겠습니다.

1. Map

1. 정의

Map 객체는 데이터 구조 사전과 비슷하게 키-값 쌍을 저장합니다. 문자열만 키로 사용할 수 있는 기존 객체와 달리 Map 객체는 모든 값을 키로 사용할 수 있습니다.

2. 구문

new Map([iterable])

Attribute

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

작업 방법

set(key, value): key 키의 값을 value로 설정(추가/업데이트)하고 Map 객체를 반환합니다.
get(key): 키 값을 읽고, 그렇지 않은 경우 정의되지 않은 값을 반환합니다.
has(key): Map 객체에 키-값 쌍이 있는지 확인하고 true/false를 반환합니다.
delete(key): 키-값 쌍을 삭제하고 true/false를 반환합니다.
clear(): Map 객체의 모든 키-값 쌍을 지웁니다.

Traversal method

keys(): 키 이름의 Iterator 객체를 반환합니다.
values(): 키 값의 Iterator 객체를 반환합니다.
entries(): 키-값 쌍의 Iterator 객체를 반환합니다.
forEach((value, key, map) => {}): Map 객체의 모든 키-값 쌍을 탐색합니다.

3. 예

작업 방법

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

Traversal 방법

let m = new Map([
  [&#39;foo&#39;, 11],
  [&#39;bar&#39;, 22],
  [&#39;mazey&#39;, 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 개체는 Map과 달리 키-값 쌍을 저장해야 합니다. 약한 참조는 키 개체가 사라진 후 자동으로 메모리를 해제합니다.

2. 구문

new WeakMap([iterable])

Method

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. WeakMap을 통해 메모리 누수 문제 해결

Dom 객체를 사용하여 이벤트를 바인딩할 때 Dom 객체가 사라진 후 메모리가 제때 해제되지 않으면(null로 설정됨) 항상 존재하게 됩니다. 기억 속에.

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>

ES6 WeakMap은 메모리 누수를 해결합니다.

관련 기사