ECMAScript6中的Set(集合)

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

  1、基础知识点

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6</title>
</head>
<body>
    <p>红色</p>
    <p>黄色</p>
    <p>黑色</p>
    <p>白色</p>

    <script>
        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++') )      //判断元素是否在该集合中存在
    </script>
</body>
</html>

  输出结果:

  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'}

猜你喜欢

转载自blog.csdn.net/dawn0718/article/details/127104196
今日推荐