网站 做实名认证吗,手机网站后台,成都设计公司工装,望城区网站建设一、Map()
1.1 简介
ES6 提供了 Map 数据结构#xff0c;它类似于对象#xff0c;是键值对的集合#xff0c;但是“键”的范围不限于字符串#xff0c;各种类型的值#xff08;包括对象#xff09;都可以当作键。
我们可以通过 new Map()去创建它。
1.2. Map的创建、…一、Map()
1.1 简介
ES6 提供了 Map 数据结构它类似于对象是键值对的集合但是“键”的范围不限于字符串各种类型的值包括对象都可以当作键。
我们可以通过 new Map()去创建它。
1.2. Map的创建、设置与获取
1.对单个数据设置与获取 script//创建Map对象const mapData new Map();//添加数据(键值)mapData.set(name, 张三);//获取数据console.log(mapData.get(name)); //张三/script
1.3 对多个数据的设置与获取 scriptconst arr [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const infos [a, b, c, d, e, f, g, h, i, j];//创建Map对象const mapData new Map();//将数据存入Map对象arr.forEach((item, index) {mapData.set(item, infos[index]);});//遍历Map对象arr.forEach((item, index) {console.log(mapData.get(item)); //a b c d e f g h i j});//下面的方法后文有介绍console.log(mapData.size); //10console.log(mapData.has(1)); //trueconsole.log(mapData.has(11)); //falseconsole.log(mapData.get(1)); //a/script
1.3 注意事项
1.对同一个键多次赋值后面的值将覆盖前面的值
2.如果读取一个未知的键则返回undefined。同一内存地址才是同一个键不同内存地址但是值 相同不算同一个键。例如 const map new Map();map.set([a], 555);console.log(map.get([a])); // undefined/script
1.3 Map()的一些方法
1.size 返回 Map 结构的成员总数。
2.has 方法返回一个布尔值表示某个键是否在当前 Map 对象之中
3.delete 删除一个键成功返回true失败返回false
4.clear 清除所有成员
示例 script// 创建一个 Map 对象const myMap new Map();// 添加一些键值对myMap.set(key1, value1);myMap.set(key2, value2);myMap.set(key3, value3);// 示例1size 方法console.log(Map size:, myMap.size); // 输出3// 示例2has 方法console.log(myMap.has(key1)); // 输出trueconsole.log(myMap.has(nonExistentKey)); // 输出false// 示例3delete 方法console.log(myMap.delete(key2)); // 输出true 删除成功console.log(myMap.has(key2)); // 输出false key2 已经被删除// 示例4clear 方法myMap.clear();console.log(清空:, myMap.size); // 输出0 所有成员已被清除/script
1.4 遍历Map
Map.prototype.keys()返回键名的遍历器。
Map.prototype.values()返回键值的遍历器。
Map.prototype.entries()返回所有成员的遍历器。
Map.prototype.forEach()遍历 Map 的所有成员。
示例 script// 创建一个 Map 对象const myMap new Map();myMap.set(name, Alice);myMap.set(age, 25);myMap.set(city, New York);// 示例1Map.prototype.keys()for (const key of myMap.keys()) {console.log(Key:, key);}// 输出// Key: name// Key: age// Key: city// 示例2Map.prototype.values()for (const value of myMap.values()) {console.log(Value:, value);}// 输出// Value: Alice// Value: 25// Value: New York// 示例3Map.prototype.entries()for (const [key, value] of myMap.entries()) {console.log(Key: ${key}, Value: ${value});}// 输出// Key: name, Value: Alice// Key: age, Value: 25// Key: city, Value: New York// 示例4Map.prototype.forEach()myMap.forEach((value, key) {console.log(Key: ${key}, Value: ${value});});// 输出// Key: name, Value: Alice// Key: age, Value: 25// Key: city, Value: New York/script
1.5 Map与其它数据类型互换
1.Map与数组
Map数组 scriptconst arr [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const infos [a, b, c, d, e, f, g, h, i, j];const mapData new Map();arr.forEach((item, index) {mapData.set(item, infos[index]);});//两种方式都可以将map转换为数组console.log(Array.from(mapData)); //[[1, a], [2, b], [3, c], [4, d], [5, e], [6, f], [7, g], [8, h], [9, i], [10, j]console.log([...mapData]); //[[1, a], [2, b], [3, c], [4, d], [5, e], [6, f], [7, g], [8, h], [9, i], [10, j]/script
数组Map scriptconst arr [[1, a],[2, b],[3, c],[4, d],[5, e],[6, f],[7, g],[8, h],[9, i],[10, j],];console.log(new Map(arr)); //Map(10) { 1 a, 2 b, 3 c, 4 d, 5 e, 6 f, 7 g, 8 h, 9 i, 10 j }/script
2.Map与对象
Map对象 scriptconst mapData new Map([[name, 老王],[age, 30],[city, 王家屯],]);// 将Map转换为对象console.log(Object.fromEntries(mapData)); // { name: 老王, age: 30, city: 王家屯 }/script
对象Map scriptconst obj {name: 老张,age: 29,city: 张家集,};console.log(new Map(Object.entries(obj))); //Map(3) {name 老张, age 29, city 张家集}/script
3.Map与JSON
MapJSON scriptconst map new Map(Object.entries({name: 老张,age: 29,city: 张家集,}));console.log(JSON.stringify([...map]));//[[name,老张],[age,29],[city,张家集]]/script
JSONMap scriptconst map new WeakMap();// 创建一个对象作为键const key { name: 老王 };map.set(key, 这是老王的数据);console.log(map.get(key)); // 这是老王的数据/script scriptconst jsonData [[name, 老张],[age, 29],[city, 张家集],];console.log(new Map(Object.entries(JSON.parse(JSON.stringify(jsonData)))));// Map(3) {name 老张, age 29, city 张家集}/script
二、WeakMap
2.1 简介
WeakMap和Map一样是键值对数据结构它和Map主要有以下区别
1.WeakMap只接受对象null除外和 Symbol 值作为键名不接受其他类型的值作为键名。
2.WeakMap其键值对之间是弱引用关系。对于WeakMap中的键如果除了WeakMap之外没有任何其他强引用指向该键所在的对象则垃圾回收器可以在下一次垃圾回收周期中回收这个键所指向的对象即使WeakMap还持有该键值对。而Map键值对之间是强引用关系。这意味着只要Map本身还在内存中Map中的键和值都会被垃圾回收机制视为有效引用因此不会被回收。
3.WeakMap没有迭代器不可以枚举。
4.WeakMap只有get()、set()、has()、delete()四种方法可用
下面是一个创建WeakMap简单的示例 scriptconst map new WeakMap();// 创建一个对象作为键const key { name: 老王 };map.set(key, 这是老王的数据);console.log(map.get(key)); // 这是老王的数据/script
2.2 使用场景
因为能被垃圾回收的性质我们可以在一些希望键值能影响生命周期的地方使用例如
我们在Vue中我们要通过指令动态创建多个Divdiv的数量被存储在WeakMap中当Div需要被销毁时删除在WeakMap的键值对。示例。。。还没写好以后再补上。
