JavaScript之Set与Map

https://www.boatsky.com/blog/47

  ES5中的数据类型分原始类型与对象类型。其中原始类型有Number,Boolean,String,null,undefined,ES6中增加Symbol。ES5对象类型为Object,从功能区别,广义的Object又细分成几种“子对象”,普通Object(“命名值”的无序集合)、数组(带编号的值的有序集合)、函数(具有与它相关联的可执行代码的对象),ES6新增了Set(无重复元素的集合)、Map(多组键值对的集合)。
   
    <a href="http://www.boatsky.com/blog/47.html">Set与Map</a>早在ES6之前就有被模拟实现,ES6让其成为标准,使用起来更加简单。
   
  ###Set
    Set是一种无重复元素的集合,因其key与value是相同的,所以我们只讨论它的value。
   
    它的value取值可以是所有原始数据类型Number,Boolean,String,null,undefined,Symbol,及对象数据类型Object,Array,Function,Set,Map等,并且它不会在存取前后进行类型转换。
   
    Set提供了add,has,size,delete操作方法
  #####add(value)
  增加值,返回增加后的set对象。
  #####has(value)
  判断是否有该值,返回布尔值
  #####size
  判断长度,返回数字
  #####delete(value)
  删除值,返回布尔值
  #####clear()
  清空集合
   
  demo:
  ```javascript
  console.log(set.add('5'));//set对象
  console.log(set.has(5));//false
  console.log(set.has('5'));//true
  console.log(set.size);//1
  console.log(set.delete('5'));//true
  console.log(set.has('5'));//false
  ```
    Set可使用keys,values,entries,forEach方法。因为key与value是一样的,keys与values结果都一样。entries返回item的是key与value数组。forEach为了与其他对象参数保持一致,第一个参数与第二个参数很多余的一样了。
  demo:
  ```javascript
  let set = new Set();
  let aObj = {a: 1};
  let bObj = {b: 2};
  set.add(aObj).add(bObj);
  for (let k of set.keys()) {
  console.log(k);
  }
  //{a: 1}
  //{b: 2}
   
  for (let v of set.values()) {
  console.log(v);
  }
  //{a: 1}
  //{b: 2}
   
  for (let item of set.entries()) {
  console.log(item);
  }
  // [{a: 1},{b: 2}]
  // [{a: 1},{b: 2}]
   
  set.forEach(function(key, value, ownSet) {
  console.log(valueCopy);
  });
  //{a: 1}
  //{b: 2}
  ```
   
  因为Set是不可重复的,所以数组的去重一行简单的代码便实现了:
  ```javascript
  let arr = [1, 1, 2, 2, 3, 3];
  [...new Set(arr)];
  ```
   
  Set是强引用的集合,如果原始引用被移除了,Set集合并不会删除原值,垃圾回收机制也无法对其回收:
  ```javascript
  let set = new Set();
  let key = {};
  set.add(key);
  console.log(set.has(key));//true
  for (let item of set.entries()) {
  console.log(item);
  }
  // [{},{}]
   
  key = null;
  console.log(set.has(key));//false
  for (let item of set.entries()) {
  console.log(item);
  }
  // [{},{}]
  ```
   
  内存无法释放,可能引起内存泄漏,为此Set有个WeakSet扩展,使用弱引用,解决这个问题,但WeakSet只支持add,has,delete方法,其他方法都不支持,并且不能传入原始值。虽然可以用上述的has判断,但我们需传递强引用才能验证弱引用是存被移除,这无法在代码上实现,因为我们只能传递弱引用key:
  ```javascript
  let set = new WeakSet();
  let key = {};
  set.add(key);
  console.log(set.has(key));//true
  key = null;
  console.log(set.has(key));//false
  ```
  此时我们无从得知,第二个set.has(key)为false是因为
  [{},{}] !== [null,null]还是set是空集合。只能从概念上得知,是后者。
   
  ###Map
    Map是多组键值对的有序集合,与Set几乎是一样的,参考上述Set即可,在此不做复述,只简述不同之处。
   
    key与value可以不同。Map与Set相比,新增了set,get方法。
   
  #####set(key,value)
  设置值,返回map
  #####get(key)
  取值
   
    Map也有一个与之对应的WeakMap,参见上述WeakSet,不同之处,key必须为对象,且不能为null,否则报错,而value则无限制。</textarea>
发布了349 篇原创文章 · 获赞 493 · 访问量 193万+

猜你喜欢

转载自blog.csdn.net/starzhou/article/details/104859808