1. 首页
  2. IT资讯

「ES6基础」Set 与 WeakSet

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fe6560bbd6a904ead838794461d005946″ img_width=”900″ img_height=”383″ alt=”「ES6基础」Set 与 WeakSet” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E在开发过程中,我们会经常使用到数组Array这种引用类型的数据结构,并十分清楚数组是种有序的集合,并且每个元素都可以使用数字下标的形式获取。但是在一些业务场景中,我们并不需要集合维护一个有序的状态,甚至有些场景需要无序集合,因此ES6里加入了无序集合Set和其的Weak版本WeakSet。u003Cu002Fpu003Eu003Cpu003E其实无序集合的概念十分容易理解,我们可以认为是没有排序概念的数组,并且具有元素不可重复的特性。u003Cu002Fpu003Eu003Cpu003E这篇文章笔者将从以下几方面进行介绍:u003Cu002Fpu003Eu003Culu003Eu003Cliu003ESet代码示例u003Cu002Fliu003Eu003Cliu003ESet和Array的区别u003Cu002Fliu003Eu003Cliu003ESet常用方法u003Cu002Fliu003Eu003Cliu003EWeakSet介绍u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E本篇文章阅读时间预计u003Cstrongu003E5u003Cu002Fstrongu003E分钟u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003ESet代码示例u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003ESet需要使用新语法new Set()声明,代码如下:u003Cu002Fpu003Eu003Cpreu003Elet set = new Set(“Hello!!!”);u003Cbru003Eset.add(12); u002Fu002Fadd 12u003Cbru003Econsole.log(set.has(“!”)); u002Fu002Fcheck if value existsu003Cbru003Econsole.log(set.size);u003Cbru003Eset.delete(12); u002Fu002Fdelete 12u003Cbru003Econsole.log(…set);u003Cbru003Eset.clear(); u002Fu002Fdelete all valuesu003Cbru003Eu002Fu002Foutputu003Cbru003Eu002Fu002Ftrueu003Cbru003Eu002Fu002F6u003Cbru003Eu002Fu002FH e l o !u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E这段代码我们向Set集合里添加了一个字符串和数字,字符串在Set集合里会被拆分成字符进行存储,由于Set集合去重的特点,l和!重复将会被去重( Set { ‘h’, ‘e’, ‘l’, ‘o’ ,’!’}),使用add方法添加了12到Set集合里,因此集合的大小是6。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003ESet与Array的区别u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E以下表格为Array和Set的区别u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F6b08c1d517864e1a9dad9562684e4175″ img_width=”1468″ img_height=”290″ alt=”「ES6基础」Set 与 WeakSet” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003Eu003Cstrongu003ESet常用方法u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E以下表格罗列了Set相关的方法u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fc9d8ca32a8344d1187cab4686b8b3aa8″ img_width=”1452″ img_height=”504″ alt=”「ES6基础」Set 与 WeakSet” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E添加删除清空u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Econst set=new Set();u003Cbru003Esetu003Cbru003E .add(1)u003Cbru003E .add(2)u003Cbru003E .add(3)u003Cbru003E .add(3);u002Fu002F不起作用,因为3已经在集合中u003Cbru003Econsole.log(set);u002Fu002Foutput Set { 1, 2, 3 }u003Cbru003Eu002Fu002F删除元素u003Cbru003Eset.delete(2);u003Cbru003Econsole.log(set);u002Fu002Foutput Set {1,3}u003Cbru003Eu002Fu002F清空集合u003Cbru003Eset.clear();u003Cbru003Econsole.log(set); u002Fu002Foutput Set{}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E检查元素u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E因为Set集合里没有排序的概念,因此我们无法使用Array的IndexOf的方法判断是否大于0来检验是否含有某元素,ES6里使用了更简洁、更易懂的方法来检验是否含有某元素。u003Cu002Fpu003Eu003Cpreu003Econst set=new Set([1,2,3,4]);u003Cbru003Eset.has(2) u002Fu002Foutput true;u003Cbru003Eset.has(5) u002Fu002Foutput false;u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E遍历元素u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E集合对象自身定义了forEach方法,跟数组类型的foreach一样,示例代码如下:u003Cu002Fpu003Eu003Cpreu003Econst set=new Set([1,2,3,4]);u003Cbru003Eset.forEach(item=>{u003Cbru003E console.log(item);u003Cbru003E})u003Cbru003Eu002Fu002Foutputu003Cbru003Eu002Fu002F1u003Cbru003Eu002Fu002F2u003Cbru003Eu002Fu002F3u003Cbru003Eu002Fu002F4u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003Eu003Cstrongu003EWeakSet介绍u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003EJavaScript垃圾回收是一种内存管理技术。在这种技术中,不再被引用的对象会被自动删除,而与其相关的资源也会被一同回收。Set中对象的引用都是强类型化的,并不会允许垃圾回收。这样一来,如果Set中引用了不再需要的大型对象,如已经从DOM树中删除的DOM元素,那么其回收代价是昂贵的。u003Cu002Fpu003Eu003Cpu003E为了解决这个问题,ES6还引入了WeakSet的弱集合。这些集合之所以是“弱的”,是因为它们允许从内存中清除不再需要的被这些集合所引用的对象。u003Cu002Fpu003Eu003Cpu003E首先让我们了解下WeakSet与Set的不同,以下三点是WeakSet与Set不一样的地方:u003Cu002Fpu003Eu003Colu003Eu003Cliu003ESet可以存储值类型和对象引用类型,而WeakSet只能存储对象引用类型,否则会抛出TypeError。u003Cu002Fliu003Eu003Cliu003EWeakSet不能包含无引用的对象,否则会被自动清除出集合(垃圾回收机制)。u003Cu002Fliu003Eu003Cliu003EWeakSet对象是不可枚举的,也就是说无法获取大小,也无法获取其中包含的元素。u003Cu002Fliu003Eu003Cu002Folu003Eu003Cpu003E如下段的代码验证了上述特性:u003Cu002Fpu003Eu003Cpreu003Elet weakset = new WeakSet();u003Cbru003E(function(){ u003Cbru003E let a = {}; u003Cbru003E weakset.add(1); u002Fu002FTypeError: Invalid value used in weak setu003Cbru003E weakset.add(a);u003Cbru003E})(); u002Fu002Fhere ‘a’ is garbage collected from weaksetu003Cbru003Econsole.log()u003Cbru003Econsole.log(weakset.size); u002Fu002Foutput “undefined”u003Cbru003Econsole.log(…weakset); u002Fu002FException is thrownu003Cbru003Eweakset.clear(); u002Fu002FException, no such functionu003Cbru003Econst weakset=new WeakSet();u003Cbru003Elet foo={bar:1};u003Cbru003Eweakset.add(foo);u003Cbru003Econsole.log(weakset.has(foo)); u002Fu002Foutput trueu003Cbru003Efoo=null;u003Cbru003Econsole.log(weakset.has(foo)); u002Fu002Foutput falseu003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E小节u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E今天的内容就介绍到这里,在今后的业务中,我们除了可以使用数组Array,还可以使用Set和WeakSet。 如果不涉及排序去重的场景,我们可以尝试使用set,如果你想优化程序内容的使用,你可以尝试使用WeakSet。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003EES6相关文章u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6713733594054918663u002F?group_id=6713733594054918663″ target=”_blank”u003E「ES6基础」let和作用域u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714091462650233352u002F?group_id=6714091462650233352″ target=”_blank”u003E「ES6基础」const简介u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714508610916844035u002F?group_id=6714508610916844035″ target=”_blank”u003E「ES6基础」默认参数值u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714847432842150414u002F?group_id=6714847432842150414″ target=”_blank”u003E「ES6基础」模板字符串(Template String)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6715214218485826059u002F?group_id=6715214218485826059″ target=”_blank”u003E「ES6基础」展开语法(Spread syntax)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6716304548283023875u002F?group_id=6716304548283023875″ target=”_blank”u003E「ES6基础」解构赋值(destructuring assignment)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712258013375234568u002F?group_id=6712258013375234568″ target=”_blank”u003E「ES6基础」箭头函数(Arrow functions)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712646837519532551u002F?group_id=6712646837519532551″ target=”_blank”u003E「ES6基础」迭代器(iterator)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712984431553937934u002F?group_id=6712984431553937934″ target=”_blank”u003E「ES6基础」生成器(Generator)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「ES6基础」Set 与 WeakSet

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10744.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code