Set

数据结构 - 图1> Set是ES6新的数据结构，类似数组，但成员的值是唯一的，没有重复的值。

Set 常用方法 遍历 应用场景 WeakSet 用法

  1. {
  2.     // 向Set中加入值的时候不会发生类型转换，所以5和”5”是两个不同的值，
  3.   // Set内部判断两个值是否相等，使用的是 ===，这就意味着这两个对象总是不相等。
  4.   // 唯一列外的是NaN本身（精确相等运算符认为NaN不等于自身）
  5.     let list = new Set();
  6.     list.add(5);
  7.     list.add(7);
  8.     console.log("size", list.size); // size 2
  9. }
  11. {
  12.     let arr = [1, 2, 3, 4, 5];
  13.     let list = new Set(arr);
  14.     console.log("size", list.size); // size 5
  15. }
  17. {
  18.   // 唯一的
  19.     let list = new Set();
  20.     list.add(1);
  21.     list.add(2);
  22.     list.add(1);
  23.     console.log("list", list); // list Set { 1, 2 }
  25.     // 去重
  26.   // 数组
  27.     let arr = [1, 2, 3, 1, 2];
  28.     let list2 = new Set(arr);
  29.     console.log("unique", list2); // unique Set { 1, 2, 3 }
  31.   // 对象数组
  32.   const objArrays = [
  33.     { id: 1 },
  34.     { id: 1 },
  35.     { id: 2 },
  36.     { id: 1 },
  37.     { id: 5 },
  38.     { id: 7 },
  39.     { id: 9 },
  40.   ];
  41.   const idSet = new Set();
  42.   console.log(
  43.     objArrays.filter((item) => {
  44.       const existingId = idSet.has(item.id);
  45.       idSet.add(item.id);
  46.       return !existingId;
  47.     })
  48.   );
  49.   // [ { id: 1 }, { id: 2 }, { id: 5 }, { id: 7 }, { id: 9 } ]
  50. }
  52. {
  53.     let arr = ["add", "delete", "clear", "has"];
  54.     let list = new Set(arr);
  55.     console.log("has", list.has("add")); // has true
  56.     console.log("delete", list.delete("add"), list); // delete true Set { 'delete', 'clear', 'has' }
  57.     list.clear();
  58.     console.log("list", list); // list Set {  }
  59. }
  61. {
  62.     let arr = ["add", "delete", "clear", "has"];
  63.     let list = new Set(arr);
  65.     for (let value of list) {
  66.         console.log("value--", value);
  67.         // value-- add
  68.         // value-- delete
  69.         // value-- clear
  70.         // value-- has
  71.     }
  72.     for (let key of list.keys()) {
  73.         console.log("key", key);
  74.         // key add
  75.         // key delete
  76.         // key clear
  77.         // key has
  78.     }
  79.     for (let value of list.values()) {
  80.         console.log("value", value);
  81.         // value add
  82.         // value delete
  83.         // value clear
  84.         // value has
  85.     }
  86.     for (let [key, value] of list.entries()) {
  87.         console.log("entries", key, value);
  88.         // entries add add
  89.         // entries delete delete
  90.         // entries clear clear
  91.         // entries has has
  92.     }
  94.     list.forEach(function (item) {
  95.         console.log(item);
  96.         // add
  97.         // delete
  98.         // clear
  99.         // has
  100.     });
  101. }
  103. {
  104.     /*
  105.   1、WeakSet 成员只能够是对象 
  106.   2、作为 WeakSet 成员的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在与WeakSet之中。这个特点意味着，无法引用WeakSet的成员，因此WeakSet是不可遍历的。
  107.   3、使用WeakSet存储对象实例的好处是，由于是对对象实例的引用，不会被计入内存回收机制，所以删除实例的时候，不用考虑weaket，也不会出现内存泄漏。
  108. */
  109.     let weakList = new WeakSet();
  110.     let arg = {};
  111.     weakList.add(arg);
  112.     weakList.add(2);    // Invalid value used in weak set
  113.     console.log("weakList", weakList); // weakList WeakSet {}
  115.   // weakList.forEach((item) => {
  116.   //     console.log(item);
  117.   // });
  118.   // weakList.forEach is not a function 
  119. }

Map

数据结构 - 图2

  1. {
  2.     let map = new Map();
  3.     let arr = ["123"];
  5.     map.set(arr, 456);
  6.     console.log("map", map, map.get(arr));
  7.     // map Map { [ '123' ] => 456 } 456
  8. }
  10. {
  11.     let map = new Map([["a", 123], ["b", 456]]);
  12.     console.log("map args", map); // map args Map { 'a' => 123, 'b' => 456 }
  13.     console.log("size", map.size); // size 2
  14.     console.log("delete", map.delete("a"), map); // delete true Map { 'b' => 456 }
  15.     console.log("clear", map.clear(), map); // clear undefined Map {  }
  16. }
  18. {
  19.     let weakmap = new WeakMap();
  20.     let o = {};
  21.     weakmap.set(o, 123);
  22.     console.log(weakmap.get(o)); // 123
  23. }
  25. // 数据结构
  26. // Map与Array的对比
  27. // Set与Array的对比
  29. {
  30.     // 数据结构横向对比，增，查，改，删
  31.     let map = new Map();
  32.     let array = [];
  34.     // 增
  35.     map.set("t", 1);
  36.     array.push({ t: 1 });
  37.     console.log("map-array", map, array); // map-array Map { 't' => 1 } [ { t: 1 } ]
  39.     // 查
  40.     let map_exist = map.has("t");
  41.     let array_exist = array.find(item => item.t);
  42.     console.log("map-array", map_exist, array_exist); // map-array true { t: 1 }
  44.     // 改
  45.     map.set("t", 2);
  46.     array.forEach(item => (item.t ? (item.t = 2) : ""));
  47.     console.log("map-array-modify", map, array); // map-array-modify Map { 't' => 2 } [ { t: 2 } ]
  49.     // 删
  50.     map.delete("t");
  51.     let index = array.findIndex(item => item.t);
  52.     array.splice(index, 1);
  53.     console.log("map-array-empty", map, array); // map-array-empty Map {  } []
  54. }
  56. {
  57.     // set和array的对比
  58.     let set = new Set();
  59.     let array = [];
  61.     // 增
  62.     set.add({ t: 1 });
  63.     array.push({ t: 1 });
  64.     console.log("set-array", set, array); // set-array Set { { t: 1 } } [ { t: 1 } ]
  66.     // 查
  67.     let set_exist = set.has({ t: 1 });
  68.     let array_exist = array.find(item => item.t);
  69.     console.log("set_exist", set_exist, array_exist); // set_exist false { t: 1 }
  71.     // 改
  72.     set.forEach(item => (item.t ? (item.t = 2) : ""));
  73.     array.forEach(item => (item.t ? (item.t = 2) : ""));
  74.     console.log("set_array-modify", set, array); // set_array-modify Set { { t: 2 } } [ { t: 2 } ]
  76.     // 删
  77.     set.forEach(item => (item.t ? set.delete(item) : ""));
  78.     let index = array.findIndex(item => item.t);
  79.     array.splice(index, 1);
  80.     console.log("set-array-empty", set, array); // set-array-empty Set {  } []
  81. }
  83. {
  84.     // map,set,objet对比
  85.     let item = { t: 1 };
  86.     let map = new Map();
  87.     let set = new Set();
  88.     let obj = {};
  90.     // 增
  91.     map.set("t", 1);
  92.     set.add(item);
  93.     obj["t"] = 1;
  94.     console.log("map-set-obj", obj, map, set); // map-set-obj { t: 1 } Map { 't' => 1 } Set { { t: 1 } }
  96.     // 查
  97.     console.log({
  98.         map_exist: map.has("t"),
  99.         set_exist: set.has(item),
  100.         obj_exist: "t" in obj
  101.     }); // { map_exist: true, set_exist: true, obj_exist: true }
  103.     // 改
  104.     map.set("t", 2);
  105.     item.t = 2;
  106.     obj["t"] = 2;
  107.     console.log("map-set-obj-modify", obj, map, set); // map-set-obj-modify { t: 2 } Map { 't' => 2 } Set { { t: 2 } }
  109.     // 删
  110.     map.delete("t");
  111.     set.delete(item);
  112.     delete obj["t"];
  113.     console.log("map-set-obj-empty", obj, map, set); // map-set-obj-empty {} Map {  } Set {  }
  114. }