美文网首页
ES6之Set、WeakSet、Map、WeakMap数据结构

ES6之Set、WeakSet、Map、WeakMap数据结构

作者: 程序蜗牛 | 来源:发表于2018-03-13 16:46 被阅读35次

Set

set本身是一个构造函数,用来生成Set数据结构,类似数组Array,但是成员的值都是唯一的,没有重复的值

  • 属性方法
  • size: 返回set实例的成员总数
  • add(value): 添加某个值,返回Set本身
  • delete(value): 删除某个值,返回是否删除成功的boolean
  • has(value): 判断是否包含某个值,返回一个boolean
  • clear(): 清空Set的所有成员,没有返回值
# add方法
let aSets = new Set();
aSets.add(1);// 添加1
aSets.add(2);// 添加2

# 结果{ 1,2}

另一种创建Set的方法

let bSet = new Set([1,2,3,4,5]);

如果添加重复的value值,会怎么样

aSets.add(2);

结果:{1,2}  独一无二的

添加的数值类型,有什么区别

aSets.add('2');

结果:{1,2,"2"}
# size
aSets.size;

// 结果: 2
# delete方法
aSets.delete(1);
结果:true

aSets.delete(3)
#结果: false
# has方法
aSets.has(1);
#结果:true
# clear方法
aSets.clear();

# aSets打印结果是{}
  • 遍历对象
  • keys():返回一个键名的遍历器
  • values(): 返回一个键值的遍历器
  • entries(): 返回一个键值对的遍历器
  • forEach(): 使用回调函数遍历每个成员
# 创建一个Set
let list = new Set(["a","b","c","d"]);

# keys()
for(let key of list.keys()){
     console.log(key);
     // a   b   c   d
}

# values()
for(let value of list.values()){
    console.log(value);
     // a   b   c   d
}

# entries()
for(let [key,value] of list.entries()){
     console.log(key,value);
      // a  a    b  b    c  c    d  d
}

# forEach()
list.forEach(function(item){
      console.log(item);
      // a   b   c   d
})

WeakSet

结构和Set类似,但是有写区别
1、只能存储对象,其他类型的值不行
2、存储的对象是弱引用,也就是说垃圾回收机制不考虑WeakSet对该对象的引用。换种说法如果一个对象都不再被引用,那么垃圾回收机制会自动回收该对象所占用的内存,不会考虑该对象是否存在于WeakSet中。因此WeakSet是不可遍历的

# 新建一个WeakSet
let list = new WeakSet([{a:1,b:2},{c:3,d:4}]);
  • 属性方法
  • add(value)方法
  • delete(value)方法
  • has(value)方法

不支持clear、size方法
如果增加其他类型的数值,则会报错

list.add(2);
# Uncaught TypeError: Invalid value used in weak set

Map

类似于对象,是键值对的集合,但是key的范围不局限与字符串。各种类型均可以作为key

  • 属性方法
  • set(key,value): 添加一个键值对
  • get(key): 获取一个key对应的value值
  • size: 返回Map结构的成员总数
  • has(key):判断某个键是否存在Map结构中,返回boolean
  • delete(key): 删除某个指定的键值,返回boolean
  • clear(): 清除Map结构所有的成员
# set
let map = new Map();
map.set("1","a");
map.set("2","b");
map.set("3","c");
或
let map = new Map([["1","a"],["2","b"],["3","c"]]);
# delete
map.delete("1");
# size
map.size;
# has
map.has(1);// true
#clear
map.clear();
  • 遍历方法
  • keys():返回一个键名的遍历器
  • values(): 返回一个键值的遍历器
  • entries(): 返回一个键值对的遍历器
  • forEach(): 使用回调函数遍历Map每个成员
# keys()
for(let key of map.keys()){
     console.log(key);
     // 1  2  3
}
# values()
for(let value of map.values()){
     console.log(value);
     // a  b  c
}
# entries()
for(let [key,value] of map.entries()){
      console.log(key,value);
}
# forEach()
map.forEach(function(value,key){
     console.log(value,key);
})

WeakMap

和Map类似,区别就是只能是object类型
键名是对象的弱引用,因此所对应的对象可能会被自动回收,如果对象呗回收后,WeakMap自动移除对应的键值对,WeakSet有助于防止内存泄露

  • 属性方法
  • get(key)
  • set(key,value)
  • has(key)
  • delete(key)
let map = new WeakMap();
map.set({a:"1"},"a");
map.set({b:"2"},"b");
map.set({c:"3"},"c");
或
let map = new WeakMap([[{a:"1"},"a"],[{b:"2"},"b"],[{c:"3"},"c"]]);

WeakMap其他的方法使用基本和Map一样,在这不多说了

弱集合、内存与垃圾回收

Map和Set中对象的引用都是强类型化的,并不会允许垃圾回收, 如果Map和Set中引用了大型对象(不再被使用),ps: 已经从DOM树中删除的DOM元素,那么其回收代价是昂贵的

从上面可以知道,ES6提供的WeakMap和WeakSet的弱集合,这些集合之所以是“弱的”,是因为它们允许从内存中清除不再需要的被这些集合所引用的对象

更多详情>>
原文链接

相关文章

  • Set 和 Map 数据结构

    Set WeakSet Map WeakMap Set § ⇧ 基本用法 § ⇧ ES6 提供了新的数据结构 Se...

  • ES6中的Set和Map

    ES6中新增了Set、WeakSet、Map、WeakMap数据结构 一、Set Set是类似数组的数据结构,和数...

  • Map、WeakMap、Set、WeakSet

    ES6引入了四种新的数据结构:映射(Map)、集合(Set)、弱集合(WeakSet)和弱映射(WeakMap) ...

  • Set 和 Map 数据结构

    本文介绍 Set、WeakSet、Map、WeakMap 的基本用法 一、Set 1.1、基本用法 ES6 提供了...

  • ES6 笔记 集合

    ES6 中加入了Set, Map, WeakSet, WeakMap 为什么加入集合 Javascript中的Ob...

  • ES6中的Set和Map

    分四部分:Set、WeakSet、Map和WeakMap。 Set: 概念:类似于数组的数据结构,成员的值都是唯一...

  • Set Map WeakSet WeakMap

    本文转自博客:Set、WeakSet、Map及WeakMap Set 和 Map 主要的应用场景在于 数据重组 和...

  • ES-6--数据结构

    Set的用法,WeakSet的用法,Map的用法,WeakMap的用法 Set()基本用法 Set的add,del...

  • 木易杨前端面试题第四题 set 和 map

    第 4 题:介绍下 Set、Map、WeakSet 和 WeakMap 的区别? set 1.set的定义 se...

  • 『ES6脚丫系列』Set+WeakSet+Map+WeakMap

    『ES6脚丫系列』Set+WeakSet+Map+WeakMap 如果有理解不到位的地方,欢迎大家纠错。 一、Se...

网友评论

      本文标题:ES6之Set、WeakSet、Map、WeakMap数据结构

      本文链接:https://www.haomeiwen.com/subject/kcfzfftx.html