Set 遍历的应用
1、由于扩展运算符(...)内部使用了 for...of 循环,因此可以用扩展运算符(...)将 Set数据结构 转换为 数组。
let arrayToSet = new Set(["value1", "value2", "value3"]); console.log(arrayToSet); // Set(3) {"value1", "value2", "value3"} let setToArray = [...arrayToSet]; console.log(setToArray); // ["value1", "value2", "value3"] Set和Array 数据输出格式都不一样
2、扩展运算符和 Set 数据结构相结合,可以去除数组内的重复成员。
let tampArray = [1,2,3,3,2,1,4,5]; let setToArray = [...new Set(tampArray)]; // 先将数组 Set格式化,再用扩展运算符转为数组 console.log(setToArray); // [1, 2, 3, 4, 5]
3、将数组的 map和 filter方法间接用于 Set数据结构,可以获取两个 Set实例的并集(Union)、交集(Intersect) 以及 差集(Difference)。
let aSet = new Set([1, 2, 3, 'aSet']); let bSet = new Set(['bSet', 4, 3, 2]); // 并集 let union = new Set([...aSet, ...bSet]); // Set(6) {1, 2, 3, "aSet", "bSet", 4} // 交集 let intersect = new Set([...aSet].filter(item => bSet.has(item))); // Set(2) {2, 3} // 差集 let differenceA = new Set([...aSet].filter(item => !bSet.has(item))); // Set(2) {1, "aSet"} 以 aSet为主体,和 bSet求差集 let differenceB = new Set([...bSet].filter(item => !aSet.has(item))); // Set(2) {"bSet", 4} 以 bSet为主体,和 aSet求差集 // 跟数组 直接使用filter方法异曲同工 let aArray = [1, 2, 3, 'aSet']; let bArray = ['bSet', 4, 3, 2]; let differenceA = aArray.filter(item => !bArray.includes(item)); // [1, "aSet"] 以 aArray为主体,和 bArray求差集 let differenceB = bArray.filter(item => !aArray.includes(item)); // ["bSet", 4] 以 bArray为主体,和 aArray求差集 // 如果想在 Set实例的遍历操作中,同步改变原实例内数据,有两种方式:一种是将原 Set实例映射到一个新的数据结构(一般是数组)内,然后操作执行这个新的数据结构,最后再通过 Set构造函数将这个新的数据结构赋值给原来的 Set实例。 // 另一种是Array.from方法。 let tempSet = new Set([1, 2, 3]); tempSet = new Set([...tempSet].map(item => item * 2)); // Set(3) {2, 4, 6} 数组的 map方法 tempSet = new Set(Array.from(tempSet, item => item * 2)); // Set(3) {2, 4, 6} Array.from方法
WeakSet 的应用
由于 WeakSet数据结构成员都是弱引用,随时都可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员就取不到了,所以WeakSet不能遍历。因此 WeakSet的一个巧妙用处,是储存 DOM节点,就算 DOM节点从文档被移除后,也不用担心会引发内存泄漏。
Map 与其他数据结构的互相转换
1、Map结构 转为 数组结构、数组结构 转为 Map结构
Map数据结构 转为 数组结构,比较快速的方式是:遍历方法 + 扩展运算符(...
)
let testMap = new Map([ [1, 'aaa'], [2, 'bbb'], [3, 'ccc'], ]); // keys数组 let keysList = [...testMap.keys()]; // [1, 2, 3] // values数组 let valuesList = [...testMap.values()]; // ["aaa", "bbb", "ccc"] // entries数组 let entriesList = [...testMap.entries()]; // [[1, "aaa"], [2, "bbb"], [3, "ccc"]] // 直接转为数组 let testMapList = [...testMap]; // [[1, "aaa"], [2, "bbb"], [3, "ccc"]] // 结合数组的 map方法、filter方法,可以对 Map实例内的成员进行遍历和过滤操作,执行方式和 Set实例一样(Map和Set一样,本身并没有map和filter方法)。
数组结构转为 Map数据结构,直接将该数组结构作为参数传入 Map构造函数,就可以转换为 Map数据结构
let testMap = new Map([ [1, 'aaa'], [2, 'bbb'], [3, 'ccc'], ]); // 或 let tempArray = [ [1, 'aaa'], [2, 'bbb'], [3, 'ccc'], ]; let testMap = new Map(tempArray);
2、Map结构 转为 对象结构、对象结构 转为 Map结构
Map数据结构 转为 对象结构 有两种场景:1、Map实例内 所有成员的键名都是字符串,则可以全部无损地转为对象结构;2、有成员的键名是非字符串,则该键名会先被转成字符串,然后以该字符串 作为该成员在 对象结构内存储的新键名。
// 将 Map结构 转为 对象结构 function mapToObj(map) { let obj = {}; for (let [key, value] of map) { obj[key] = value; } return obj; } let testMap1 = new Map([ ['aaa', 1], ['bbb', 2], ['ccc', 3], ]); // console.log(testMap1); // Map(3) {"aaa" => 1, "bbb" => 2, "ccc" => 3} let testMap2 = new Map([ [123, 'aaa'], [null, 'bbb'], [NaN, 'ccc'], ]); // console.log(testMap2); // Map(3) {123 => "aaa", null => "bbb", NaN => "ccc"} let tempObj1 = mapToObj(testMap1); // {aaa: 1, bbb: 2, ccc: 3} let tempObj2 = mapToObj(testMap2); // {123: "aaa", null: "bbb", NaN: "ccc"} console.log(tempObj2[null]); // bbb console.log(tempObj2['null']); // bbb 证明在进行转换时,是先将 null对象 转成 字符串null,再以'null'作为该成员在 对象结构内存储的新键名 console.log(tempObj2[NaN]); // ccc console.log(tempObj2['NaN']); // ccc
对象结构 转为 Map数据结构:可以通过 Object.entries()方法,也可以自行封装。
let tempObj = {"aaa": 1, "bbb": 2}; // Object.entries() let tempMap = new Map(Object.entries(tempObj)); console.log(tempMap); // Map(2) {"aaa" => 1, "bbb" => 2} // 自行封装 function objToMap(obj) { let keysList = Object.keys(obj), tempMap = new Map(); for (let key of keysList) { tempMap.set(key, obj[key]); } return tempMap; } let tempMap = objToMap(tempObj); console.log(tempMap); // Map(2) {"aaa" => 1, "bbb" => 2}
3、Map结构 转为 JSON数据、JSON数据 转为 Map结构
Map数据结构 转为 JSON数据 也有两种场景:1、Map实例内 所有成员的键名都是字符串,则可以全部无损转为 JSON对象;2、若有成员的键名是非字符串,则和 Map数据结构 转为 对象结构 第二种场景相同,先转为对象结构,然后再将该 对象实例JSON格式化。
// Map实例转为 JSON对象,先将 Map实例转为 对象结构,然后将对象实例 JSON格式化即可 function mapToJson(strMap) { let obj = {}; for (let [key, value] of strMap) { obj[key] = value; } return JSON.stringify(obj); } let testMap = new Map([ ['aaa', 1], ['bbb', 2], ['ccc', 3], ]); let tempJson = mapToJson(testMap); // {"aaa":1,"bbb":2,"ccc":3}
JSON数据 转为 Map数据结构:正常情况下,JSON数据所有键名都是字符串,则可以直接转为 Map数据结构。
// 先将 JSON字符串 转成 JSON对象,然后将 对象实例转为 Map数据结构即可 function jsonToMap(obj) { let tempObj = JSON.parse(obj), keysList = Object.keys(tempObj), tempMap = new Map(); for (let key of keysList) { tempMap.set(key, tempObj[key]); } return tempMap; } let tempJson = '{"aaa": 1, "bbb": 2, "ccc": 3}'; let tempMap = jsonToMap(tempJson); // Map(3) {"aaa" => 1, "bbb" => 2, "ccc" => 3}
Map 的克隆和合并
// 克隆 let tempMap1 = new Map([ ['aaa', 1], ['bbb', 2], ['ccc', 3] ]); let tempMap2 = new Map(tempMap1); // Map(3) {"aaa" => 1, "bbb" => 2, "ccc" => 3} console.log(tempMap1 === tempMap2); // false 证明克隆是 Map实例复制,不是引用地址复制 tempMap2.set('aaa', 123); tempMap2.set('ddd', 'test'); console.log(tempMap1); // Map(3) {"aaa" => 1, "bbb" => 2, "ccc" => 3} console.log(tempMap2); // Map(4) {"aaa" => 123, "bbb" => 2, "ccc" => 3, "ddd" => "test"} 两个 Map实例各自独立存在,互不影响 // 合并,如果实例内有重复且恒等的键名,则后面实例内的键值会覆盖前面实例内的键值 let tempMap3 = new Map([...tempMap1, ...tempMap2]); console.log(tempMap3); // Map(4) {"aaa" => 123, "bbb" => 2, "ccc" => 3, "ddd" => "test"}
WeakMap
WeakMap 弱引用的只是键名,而不是键值,键值依然是正常引用。
let tempKey = {'aaa': 123}; let tempObj = 'ddd'; let testWeakMap = new WeakMap(); testWeakMap.set(tempKey, tempObj); tempObj = null; testWeakMap.get(tempKey); // 'ddd' // 键值tempObj 是正常引用,即使 WeakMap实例外部取消了对 tempObj的引用,WeakMap实例内部的引用依然存在。
转发 https://www.cnblogs.com/donghuang/p/12405005.html