您当前的位置: 首页 >  ecmascript

dawn

暂无认证

  • 0浏览

    0关注

    204博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

ECMAScript6中的Set(集合)

dawn 发布时间:2022-09-30 23:57:29 ,浏览量:0

  以前在学习编程的时候,有掌握一门开发语言后有固守的恶习,比如在2000年的时候熟练掌握VB5和ASP后就希望一直使用这两个开发工具,对于ASP.net和VB6、VB.net有潜在的排斥心理,说到底还是不愿意去接受新知识和新事物。   在潜意识里,当一种愉悦能够给予自身现实兑现的时候,人们往往会有一种难以割舍的认定,就是总是假设维持现状那么这种愉悦就会即时跟随,事实上它是短暂的,也会随着时间去递减的。   它带来的隐患就是不愿意去接受新事物,让你一直满足于现状,默默地让你画地为牢,把自己锁住和圈闭。   程序员要不断更新自己的。   ECMAJavaScript5语言已经足够丰富了,运用它已经可以完成相当丰富的功能,ECMAJavaScript6又带来更加丰富的语言元素,有些新元素学习了可能暂时用不上,那可能是你的开发场景不具备或者开发思维有问题,这些新元素是那些我们无法触及的高人设置,他们考虑问题远超我们想象,不用怀疑这些新元素的应用,所以对于这些新知识应该及时掌握。

  1、基础知识点

  在ES6中,数据结构set(集合)中的成员值是唯一的,它实现了iterator接口,可以使用[...]和[for ... of ...]进行遍历。   ⑴ size  返回集合元素的个数   ⑵ add  增加一个新元素,返回当前集合对象   ⑶ delete 删除元素   ⑷ has  检查集合中是否包含某个元素




    
    
    
    ES6


    

红色

黄色

黑色

白色

let arrP=new Set(document.querySelectorAll('p')); console.log(arrP); console.log("元素个数:" + arrP.size); for(let item of arrP){ console.log(item.outerHTML +" " +item.outerText) } let tools=new Set(['VSCode','Idea','HBuilderX']); tools.add('PyCharm') //增加元素 tools.delete('VSCode') //删除元素 console.log(tools); console.log("元素个数:" + tools.size); console.log( tools.has('Notepad++') ) //判断元素是否在该集合中存在

  输出结果:

  2、注意点

  ⑴ set集合在判断元素是否重复时,认为两个NaN是相同的,而看似相同的对象则是不同的,哪怕是两个空对象(因为引用)。

        let set1=new Set();
        [1,2,3,3,2,NaN,NaN].every(e=>set1.add(e));
        console.log(set1);

        let set2=new Set();
        ['1',1,2,2,{},{}].forEach(e => set2.add(e));
        console.log(set2);

  输出结果:

  ⑵ ‘1’与1是不同的,在加入set中时不会发生类型转换。

  ⑶ 为Set赋值比较多的做法是传入iterable类型的数据,比如Array、Set、Map等。

        const set1=new Set(['A','B','A']);
        console.log(set1);

        const set2=new Set(['A',1,1,2,2]);
        console.log(set2);

        const set3=new Set(...set1);
        console.log(set3);

        const map=new Map()
        map.set("A",123);
        map.set("BC",22);
        map.set("DDD",443);

        const set4=new Set(map);
        console.log(set4);

  输出结果:

  ⑷ 集合元素的输出

        const set1=new Set(['A',2,'B','A','OP']);
        for(let item of set1.values()){
            console.log(item);
        }

        for(let item of set1.keys()){
            console.log(item);
        }

        for(let item of set1.entries()){
            console.log(item);
        }

        set1.forEach(e=>{
            if(typeof e =='number'){console.log(e);}
        })

  (5) set集合与数组

        let set1=new Set([1,2,3,4,5]);
        let set2=new Set( [...set1].map(e=>e*2) ) ;
        console.log(set2);
        
        //返回结果:
        //Set(5) {2, 4, 6, 8, 10}

        let set3=new Set([2,4,3,6,5,4]);
        let set4=new Set([...set3].filter( e=>e%2 ==1) );
        console.log(set4);

        //返回结果:
        //Set(2) {3, 5}

        let arr1=[...set3];
        console.log(arr1);
        //返回结果:
        //(5) [2, 4, 3, 6, 5]

        let arr2=[1,2,3,4,3,2,1];
        arr2=[...new Set(arr2) ];
        console.log(arr2);
        //返回结果:
        //(4) [1, 2, 3, 4]

        let arr3=[1,2,3,4,3,2,1];
        arr3=Array.from( set4 );
        console.log(arr3);
        //返回结果:
        //(2) [3, 5]

  6) set集合的并集、交集、差集

        let set1=new Set([1,2,3,4]);
        let set2=new Set([2,3,5,7]);

        //并集
        let set3=new Set([...set1,...set2]);
        for(let e of set3){
            console.log(e);
        } 
        //set3.forEach(e=>console.log(e));

        console.log('---------------')
        //交集
        let set4=new Set( [...set1].filter( e=>set2.has(e)) );
        set4.forEach(e=>console.log(e));

        console.log('---------------')
        //差集:在集合set1中存在,在集合set2中不存在
        let set5=new Set(  [...set1].filter( e=>! set2.has(e))  );
        console.log([...set5]);

        console.log('---------------')
        //差集:在集合set2中存在,在集合set1中不存在
        let set6=new Set(  [...set2].filter( e=>! set1.has(e))  );
        console.log(set6);

  结果输出:

  3、应用场景

  这个语言元素的设计肯定有它专属的应用场景,我们可以想到的就是利用它的特点去完成一些功能,比如数组、数据库记录、字符串的去重,又或者提取不同数组、数据库记录、字符串独有的数据等等,当然还有其他的应用只是我们没有遇到而已。

        //字符串的去重
        let str="ABCDAAACBD";
        let set=new Set([...str]);
        console.log(set);

        输出结果:
        Set(4) {'A', 'B', 'C', 'D'}

关注
打赏
1664252102
查看更多评论
立即登录/注册

微信扫码登录

0.1229s