专业网站建设模板,新手如何做网站维护,网站开发软件教程,临武县网站建设ES6
Set 在ES6之前#xff0c;我们存储数据的结构主要有两种#xff1a;数组、对象。 在ES6中新增了另外两种数据结构#xff1a;Set、Map#xff0c;以及它们的另外形式WeakSet、WeakMap。 Set是一个新增的数据结构#xff0c;可以用来保存数据#xff0c;类似于数组我们存储数据的结构主要有两种数组、对象。 在ES6中新增了另外两种数据结构Set、Map以及它们的另外形式WeakSet、WeakMap。 Set是一个新增的数据结构可以用来保存数据类似于数组但是和数组的区别是元素不能重复。 创建Set我们需要通过Set构造函数暂时没有字面量创建的方式 Set常见的属性和方法 size 返回Set中元素的个数。[属性]add(value) 添加某个Set元素并返回对象本身。delete(key)根据key删除一个键值对返回Boolean类型。has(value) 判断某个元素是否存在返回boolean类型。clear() 清空所有元素没有返回值。forEach() 遍历 使用场景 数组去重
WeakSet
和Set类似的另外一个数据结构称之为WeakSet也是内部元素不能重复的数据结构。那么和Set有什么区别呢 区别一WeakSet中只能存放对象类型不能存放基本数据类型区别二WeakSet对元素的引用是弱引用如果没有其他引用对某个对象进行引用那么GC可以对该对象进行回收无法遍历常见方法 add(value)添加某个元素返回WeakSet对象本身delete(value)从WeakSet中删除和这个值相等的元素返回boolean类型has(value)判断WeakSet中是否存在某个元素返回boolean类型使用场景 // Stack Overflowconst pwset new WeakSet();class Person {// new的时候会执行constructor里面的代码constructor() {pwset.add(this)}running() {if (!pwset.has(this)) {throw new Error(不能通过其他对象来调用running方法)}console.log(running, this)}}var p new Person();console.log(p.running())// 会报错p.running.call({ })// 这里为什么使用WeakSet呢? // 因为WeakSet是弱引用 我们把p null 后 就会被GC回收// 如果使用Set 就会是强引用 ,我们把p null 后 还要 set.delete(p) 才会被GC回收 强引用和弱引用的区别 弱引用 弱引用与强引用相对 一个对象若只被弱引用所引用则被认为是不可访问或弱可访问的并因此可能在任何时刻被回收。因此使用弱引用可以防止内存泄漏。在JavaScript中弱引用的WeakMap和WeakSet。
强引用 JavaScript中最常见的就是声明一个变量并且将一个引用类型数据对象赋值给这个变量,这种情况就是强引用。只要该对象还被引用垃圾回收机制GC就不会回收该对象或者属性。对于一个普通对象将全部引用该对象的变量关系相应设置为null,便能等待垃圾回收机制GC回收 map 数据结构Map用于存储映射关系。 事实上我们对象存储映射关系只能用字符串ES6新增了Symbol作为属性名key某些情况下我们可能希望通过其他类型作为key比如对象这个时候会自动将对象转成字符串来作为key对象的key内部会自动toString(); Map常见的属性和方法 size 返回Set中元素的个数。[属性]set(key, value)在Map中添加key、value并且返回整个Map对象。get(key)根据key获取Map中的value。has(value) 判断某个元素是否存在返回boolean类型。clear() 清空所有元素没有返回值。forEach(value,key,map) 遍历 使用场景 缓存 const decorator (fn) {const mapList new Map();return (x, y) {const sum ${x}${y};if (mapList.has(sum)) {return mapList.get(sum);}const res fn(x, y)mapList.set(sum, res);return res;}}let work (a, b) {return a b;}work decorator(work)work(1, 2);work(1, 2); // 这里实际上用的缓存work(3, 4);work(3, 4); // 这里实际上用的缓存WeakMap WeakMap的key只能使用对象不接受其他的类型作为key WeakMap的key对对象想的引用是弱引用如果没有其他引用引用这个对象那么GC可以回收该对象 WeakMap常见方法: set(key, value)在Map中添加key、value并且返回整个Map对象get(key)根据key获取Map中的valuehas(key)判断是否包括某一个key返回Boolean类型delete(key)根据key删除一个键值对返回Boolean类型 Weak使用场景(vue3响应式原理) const obj1 {name: why,age: 18}const obj2 {name: why,age: 18}// 1.创建WeakMapconst weakMap new WeakMap();// 2. 收集依赖结构// 2.1 使用map来收集const obj1Map new Map();obj1Map.set(name, [obj1GetName, obj1SetName])obj1Map.set(age, [obj1GetAge, obj1SetAge])weakMap.set(obj1, obj1Map)// 3.如果obj1.name发生改变// Proxy/Object.definePropertyobj1.name test;const targetMap weakMap.get(obj1);const fns targetMap.get(name)fns.forEach(item item())function obj1GetName() {console.log(obj1GetName)}function obj1SetName() {console.log(obj1SetName)}function obj1GetAge() {console.log(obj1GetAge)}function obj1SetAge() {console.log(obj1SetAge)}
