Map && WeakMap

dptms · Oct 26, 2017 · ab12e78 · ab12e78
1 parent ac9b12c
commit ab12e78
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 1 deletion.
diff --git a/23.map.md b/23.map.md
@@ -0,0 +1,93 @@
+# Map
+> Map 是 ES6 中新增的第二种集合类型的数据，用来存储键值对。类似于对象，但是它的属性也可以是个对象
+
+* 通过 `new` 关键字来创建一个 `Map`
+```js
+const people = new Map();
+```
+
+* 通过 `set` 方法来添加元素
+```js
+people.set('dp', 18);
+people.set('tms', 17);
+console.log(people); // Map(2) {"dp" => 18, "tms" => 17}
+```
+
+* 通过 `delete` 方法删除一个元素
+```js
+people.delete('dp'); // true
+```
+
+* 通过 `has` 方法检验一个元素是否存在
+```js
+people.has('dp'); //true
+```
+
+* 可以通过 `size` 来获取长度
+```js
+console.log(people.size); // 3
+```
+
+* 可以通过 `clear` 方法来清空
+```js
+people.clear();
+```
+
+* `Set` 是可以遍历的
+可以用 `for of` 遍历集合
+```js
+for (let [key,value] of people){
+	console.log(key.value);
+}
+```
+也可以用 `forEach` 方法来遍历
+```js
+people.forEach((item ,key ,map)=>{
+	console.log(item ,key ,map);
+})
+```
+
+* 可以通过初始化创建 `Set`
+```js
+const fruits = new Set(['apple', 6], ['banana', 5]);
+```
+
+### Map 的应用，按钮点击计数
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+
+<body>
+    <button>Fire 🔥
+        <span>0</span>
+    </button>
+    <button>Dancer 💃
+        <span>0</span>
+    </button>
+    <button>Fish 🐟
+        <span>0</span>
+    </button>
+
+    <script>
+        const btnMap = new Map();
+        const buttons = document.querySelectorAll('button');
+        Array.from(buttons).map(btn => {
+            btnMap.set(btn, 0);
+            btn.addEventListener('click', function () {
+                let val = btnMap.get(this);
+                btnMap.set(this, val + 1);
+                this.querySelector('span').innerHTML = val + 1;
+            });
+        });
+    </script>
+</body>
+
+</html>
+```
diff --git a/24.weak-map.md b/24.weak-map.md
@@ -0,0 +1,23 @@
+# WeakMap
+> WeakMap 是 Map 的弱引用，它也是在 Map 的基础上有了一些限制和自己的特性。
+
+* 没有 `size` 属性
+* 不能循环，没有 `clear` 方法
+* `key` 只能是对象
+* 如果元素在其他的地方没有再引用的话，垃圾回收机制会自动清理元素
+
+```js
+let dp = {name:dp};
+let tms = {name:tms};
+
+const strong = new Map();
+const weak = new WeakMap();
+
+strong.set(dp , 'dp is best');
+weak.set(tms , 'tms is beautiful');
+```
+
+### 几种使用场景
+* 当属性一定只能是对象的时候
+* 当数据不可用，希望集合中相关的引用和数据都会被自动回收，以达到优化内存的目的
+* 需要对数据进行循环，或获取集合数量的时候最好还是用 `map`
diff --git a/README.MD b/README.MD
@@ -23,4 +23,6 @@
 * [生成器](https://github.com/dptms/es6/blob/master/19.generator.md)
 * [Proxy](https://github.com/dptms/es6/blob/master/20.proxy.md)
 * [Set](https://github.com/dptms/es6/blob/master/21.set.md)
-* [WeakSet](https://github.com/dptms/es6/blob/master/22.weak-set.md)
+* [WeakSet](https://github.com/dptms/es6/blob/master/22.weak-set.md)
+* [Map](https://github.com/dptms/es6/blob/master/23.map.md)
+* [WeakMap](https://github.com/dptms/es6/blob/master/24.weak-map.md)