|
| 1 | +### Set、Map、WeakSet、WeakMap |
| 2 | + |
| 3 | +如果要用一句来描述,我们可以说 |
| 4 | +**Set是一种叫做集合的数据结构,Map是一种叫做字典的数据结构** |
| 5 | + |
| 6 | +那什么是集合?什么又是字典呢? |
| 7 | + |
| 8 | +- 集合 |
| 9 | + |
| 10 | +> 集合,是由一堆无序的、相关联的,且不重复的内存结构【数学中称为元素】组成的组合 |
| 11 | + |
| 12 | +- 字典 |
| 13 | + |
| 14 | +> 字典(dictionary)是一些元素的集合。每个元素有一个称作key 的域,不同元素的key 各不相同 |
| 15 | + |
| 16 | +那么集合和字典又有什么区别呢? |
| 17 | + |
| 18 | +- 共同点:集合、字典都可以存储不重复的值 |
| 19 | +- 不同点:集合是以[值,值]的形式存储元素,字典是以[键,值]的形式存储 |
| 20 | + |
| 21 | +## 背景 |
| 22 | + |
| 23 | +大多数主流编程语言都有多种内置的数据集合。例如`Python`拥有列表(`list`)、元组(`tuple`)和字典(`dictionary`),Java有列表(`list`)、集合(`set`)、队列(`queue`) |
| 24 | + |
| 25 | +然而 `JavaScript` 直到`ES6`的发布之前,只拥有数组(`array`)和对象(`object`)这两个内建的数据集合 |
| 26 | + |
| 27 | +在 `ES6` 之前,我们通常使用内置的 `Object` 模拟Map |
| 28 | + |
| 29 | +但是这样模拟出来的`map`会有一些缺陷,如下: |
| 30 | + |
| 31 | +1. `Object`的属性键是`String`或`Symbol`,这限制了它们作为不同数据类型的键/值对集合的能力 |
| 32 | +2. `Object`不是设计来作为一种数据集合,因此没有直接有效的方法来确定对象具有多少属性 |
| 33 | + |
| 34 | +## Set |
| 35 | + |
| 36 | +> 定义: `Set` 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用,`Set`对象是值的集合,你可以按照插入的顺序迭代它的元素。 `Set`中的元素只会出现一次,即 `Set` 中的元素是唯一的 |
| 37 | + |
| 38 | +`Set`本身是一个构造函数,用来生成 `Set` 数据结构 |
| 39 | + |
| 40 | +### 基本使用 |
| 41 | + |
| 42 | +- 语法 |
| 43 | +`new Set([iterable])` 接收一个数组(或者具有 iterable 接口的其他数据结构), 返回一个新的`Set`对象 |
| 44 | + |
| 45 | +```js |
| 46 | +const set = new Set([1,2,1,2]) |
| 47 | +console.log(set) // {1,2} |
| 48 | +``` |
| 49 | +上面代码可以看出 `Set` 是可以去除数组中的重复元素 |
| 50 | + |
| 51 | +### 属性及方法 |
| 52 | + |
| 53 | +**属性** |
| 54 | +- size: 返回集合中所包含的元素的数量 |
| 55 | +```js |
| 56 | +console.log(new Set([1,2,1,2]).size) // 2 |
| 57 | +``` |
| 58 | +**操作方法** |
| 59 | +- add(value): 向集合中添加一个新的项 |
| 60 | +- delete(value): 从集合中删除一个值 |
| 61 | +- has(value): 如果值在集合中存在,返回ture, 否则返回false |
| 62 | +- clear(): 移除集合中的所有项 |
| 63 | + |
| 64 | +```js |
| 65 | +let set = new Set() |
| 66 | +set.add(1) |
| 67 | +set.add(2) |
| 68 | +set.add(2) |
| 69 | +set.add(3) |
| 70 | +console.log(set) // {1,2,3} |
| 71 | +set.has(2) // true |
| 72 | +set.delete(2) |
| 73 | +set.has(2) // false |
| 74 | +set.clear() |
| 75 | +``` |
| 76 | + |
| 77 | +**遍历方法** |
| 78 | +- keys(): 返回键名的遍历器 |
| 79 | +- values(): 返回键值的遍历器 |
| 80 | +- entries(): 返回键值对的遍历器 |
| 81 | +- forEach(): 使用回调函数遍历每个成员 |
| 82 | + |
| 83 | +```js |
| 84 | +let set = new Set([1,2,3,4]) |
| 85 | + |
| 86 | +// 由于set只有键值,没有键名,所以keys() values()行为完全一致 |
| 87 | +console.log(Array.from(set.keys())) // [1,2,3,4] |
| 88 | +console.log(Array.from(set.values())) // [1,2,3,4] |
| 89 | +console.log(Array.from(set.entries())) // [[1,1],[2,2],[3,3],[4,4]] |
| 90 | + |
| 91 | +set.forEach((item) => { console.log(item)}) // 1,2,3,4 |
| 92 | + |
| 93 | +``` |
| 94 | + |
| 95 | +### 应用场景 |
| 96 | +因为 `Set` 结构的值是唯一的,我们可以很轻松的实现以下 |
| 97 | +```js |
| 98 | +// 数组去重 |
| 99 | +let arr = [1, 1, 2, 3]; |
| 100 | +let unique = [... new Set(arr)]; |
| 101 | + |
| 102 | +let a = new Set([1, 2, 3]); |
| 103 | +let b = new Set([4, 3, 2]); |
| 104 | + |
| 105 | +// 并集 |
| 106 | +let union = [...new Set([...a, ...b])]; // [1,2,3,4] |
| 107 | + |
| 108 | +// 交集 |
| 109 | +let intersect = [...new Set([...a].filter(x => b.has(x)))]; [2,3] |
| 110 | + |
| 111 | +// 差集 |
| 112 | +let difference = Array.from(new Set([...a].filter(x => !b.has(x)))); [1] |
| 113 | +``` |
| 114 | + |
| 115 | +## WeakSet |
| 116 | + |
| 117 | +> WeakSet 对象是一些对象值的集合, 并且其中的每个对象值都只能出现一次。在WeakSet的集合中是唯一的 |
| 118 | + |
| 119 | +`WeakSet` 的出现主要解决弱引用对象存储的场景, 其结构与`Set`类似 |
| 120 | + |
| 121 | +与`Set`的区别 |
| 122 | +- 与Set相比,WeakSet 只能是对象的集合,而不能是任何类型的任意值 |
| 123 | +- WeakSet集合中对象的引用为弱引用。 如果没有其他的对WeakSet中对象的引用,那么这些对象会被当成垃圾回收掉。 这也意味着WeakSet中没有存储当前对象的列表。 正因为这样,WeakSet 是不可枚举的 |
| 124 | + |
| 125 | +`WeakSet` 的属性跟操作方法与 `Set` 一致,不同的是 `WeakSet` 没有遍历方法,因为其成员都是弱引用,弱引用随时都会消失,遍历机制无法保证成员的存在 |
| 126 | + |
| 127 | +**上面一直有提到弱引用,那弱引用到底是指什么呢?** |
| 128 | + |
| 129 | +> 弱引用是指不能确保其引用的对象不会被垃圾回收器回收的引用,换句话说就是可能在任意时间被回收 |
| 130 | + |
| 131 | +## Map |
| 132 | + |
| 133 | +> Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for...of 循环在每次迭代后会返回一个形式为[key,value]的数组 |
| 134 | + |
| 135 | +### 基本使用 |
| 136 | +- 语法 |
| 137 | + |
| 138 | +`new Map([iterable])` `Iterable` 可以是一个数组或者其他 `iterable` 对象,其元素为键值对(两个元素的数组,例如: [[ 1, 'one' ],[ 2, 'two' ]])。 每个键值对都会添加到新的 `Map` |
| 139 | + |
| 140 | +```js |
| 141 | +let map = new Map() |
| 142 | +map.set('name', 'vuejs.cn'); |
| 143 | +console.log(map.get('name')) |
| 144 | +``` |
| 145 | +### 属性及方法 |
| 146 | + |
| 147 | +基本跟 `Set` 类似,同样具有如下方法 |
| 148 | +**属性** |
| 149 | +- size: 返回 Map 结构的元素总数 |
| 150 | +```js |
| 151 | +let map = new Map() |
| 152 | +map.set('name', 'vuejs.cn'); |
| 153 | +console.log(map.size) // 1 |
| 154 | + |
| 155 | +console.log(new Map([['name','vue3js.cn'], ['age','18']]).size) // 2 |
| 156 | +``` |
| 157 | +**操作方法** |
| 158 | +- set(key, value): 向 Map 中加入或更新键值对 |
| 159 | +- get(key): 读取 key 对用的值,如果没有,返回 undefined |
| 160 | +- has(key): 某个键是否在 Map 对象中,在返回 true 否则返回 false |
| 161 | +- delete(key): 删除某个键,返回 true, 如果删除失败返回 false |
| 162 | +- clear(): 删除所有元素 |
| 163 | + |
| 164 | +```js |
| 165 | +let map = new Map() |
| 166 | +map.set('name','vue3js.cn') |
| 167 | +map.set('age','18') |
| 168 | +console.log(map) // Map {"name" => "vuejs.cn", "age" => "18"} |
| 169 | +map.get('name') // vue3js.cn |
| 170 | +map.has('name') // true |
| 171 | +map.delete('name') |
| 172 | +map.has(name) // false |
| 173 | +map.clear() // Map {} |
| 174 | +``` |
| 175 | +**遍历方法** |
| 176 | +- keys():返回键名的遍历器 |
| 177 | +- values():返回键值的遍历器 |
| 178 | +- entries():返回所有成员的遍历器 |
| 179 | +- forEach():遍历 Map 的所有成员 |
| 180 | + |
| 181 | +```js |
| 182 | +let map = new Map() |
| 183 | +map.set('name','vue3js.cn') |
| 184 | +map.set('age','18') |
| 185 | + |
| 186 | +console.log([...map.keys()]) // ["name", "age"] |
| 187 | +console.log([...map.values()]) // ["vue3js.cn", "18"] |
| 188 | +console.log([...map.entries()]) // [['name','vue3js.cn'], ['age','18']] |
| 189 | + |
| 190 | +// name vuejs.cn |
| 191 | +// age 18 |
| 192 | +map.forEach((value, key) => { console.log(key, value)}) |
| 193 | +``` |
| 194 | + |
| 195 | +### 应用场景 |
| 196 | +`Map` 会保留所有元素的顺序, 是在基于可迭代的基础上构建的,如果考虑到元素迭代或顺序保留或键值类型丰富的情况下都可以使用,下面摘抄自 `vue3` 源码中依赖收集的核心实现 |
| 197 | + |
| 198 | +```js |
| 199 | + let depsMap = targetMap.get(target) |
| 200 | + if (!depsMap) { |
| 201 | + targetMap.set(target, (depsMap = new Map())) |
| 202 | + } |
| 203 | + let dep = depsMap.get(key) |
| 204 | + if (!dep) { |
| 205 | + depsMap.set(key, (dep = new Set())) |
| 206 | + } |
| 207 | + if (!dep.has(activeEffect)) { |
| 208 | + dep.add(activeEffect) |
| 209 | + activeEffect.deps.push(dep) |
| 210 | + ... |
| 211 | + } |
| 212 | +``` |
| 213 | + |
| 214 | +## WeakMap |
| 215 | + |
| 216 | +> WeakMap 对象是一组键/值对的集合,其中的键是弱引用的。其键必须是对象,而值可以是任意的 |
| 217 | + |
| 218 | +与`Map`的区别 |
| 219 | +- Map 的键可以是任意类型,WeakMap 的键只能是对象类型 |
| 220 | +- WeakMap 键名所指向的对象,不计入垃圾回收机制 |
| 221 | + |
| 222 | +`WeakMap` 的属性跟操作方法与 `Map` 一致,同 `WeakSet` 一样,因为是弱引用,所以 `WeakSet` 也没有遍历方法 |
| 223 | + |
| 224 | +## 类型的转换 |
| 225 | + |
| 226 | +- `Map` 转为 `Array` |
| 227 | +```js |
| 228 | +// 解构 |
| 229 | +const map = new Map([[1, 1], [2, 2], [3, 3]]) |
| 230 | +console.log([...map]) // [[1, 1], [2, 2], [3, 3]] |
| 231 | + |
| 232 | +// Array.from() |
| 233 | +const map = new Map([[1, 1], [2, 2], [3, 3]]) |
| 234 | +console.log(Array.from(map)) // [[1, 1], [2, 2], [3, 3]] |
| 235 | +``` |
| 236 | +- `Array` 转为 `Map` |
| 237 | +```js |
| 238 | +const map = new Map([[1, 1], [2, 2], [3, 3]]) |
| 239 | +console.log(map) // Map {1 => 1, 2 => 2, 3 => 3} |
| 240 | +``` |
| 241 | +- `Map` 转为 `Object` |
| 242 | +```js |
| 243 | +// 非字符串键名会被转换为字符串 |
| 244 | +function mapToObj(map) { |
| 245 | + let obj = Object.create(null) |
| 246 | + for (let [key, value] of map) { |
| 247 | + obj[key] = value |
| 248 | + } |
| 249 | + return obj |
| 250 | +} |
| 251 | +const map = new Map().set('name', 'vue3js.cn').set('age', '18') |
| 252 | +mapToObj(map) // {name: "vue3js.cn", age: "18"} |
| 253 | +``` |
| 254 | +- `Object` 转为 `Map` |
| 255 | +```js |
| 256 | +let obj = {"a":1, "b":2}; |
| 257 | +let map = new Map(Object.entries(obj)) |
| 258 | +``` |
| 259 | + |
| 260 | +## 总结 |
| 261 | +- Set、Map、WeakSet、WeakMap、都是一种集合的数据结构 |
| 262 | +- Set、WeakSet 是[值,值]的集合,且具有唯一性 |
| 263 | +- Map 和 WeakMap 是一种[键,值]的集合,Map 的键可以是任意类型,WeakMap 的键只能是对象类型 |
| 264 | +- Set 和 Map 有遍历方法,WeakSet 和 WeakMap 属于弱引用不可遍历 |
| 265 | + |
| 266 | +### 参考 |
| 267 | +- [https://zh.wikipedia.org/wiki/%E5%BC%B1%E5%BC%95%E7%94%A8](https://zh.wikipedia.org/wiki/%E5%BC%B1%E5%BC%95%E7%94%A8) |
| 268 | +- [https://developer.mozilla.org/](https://developer.mozilla.org/) |
| 269 | +- [https://es6.ruanyifeng.com/](https://es6.ruanyifeng.com/) |
| 270 | + |
| 271 | + |
0 commit comments