<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
     //es6提供的新数据类型set,类似数组,内部成员是唯一的,不能有重复的成员,除了对象,数组,和函数。
     //set本身是一个构造函数,用来生成set数据结构,使用new来创建    

     //参数
     //set可以接受一个数组或者一个类数组以及具有 iterable 接口的其他数据结构作为参数
     //也可以使用扩展运算符把值都拿出来 
     function a(){

         let se = new Set([1,2,3])
         console.log([...se])    //[1, 2, 3]   

         let so = new Set(document.querySelectorAll('div'))
         console.log([...so])    //[div, div, div, div, div] 5  

         let ar = new Array([1,1,2,3,4,5,66,7,7,8])
         console.log(new Set(...ar)) //也可以这样去除重复成员   

         let str = 'aaabbb';
         console.log([...new Set(str)].join('')) //也可以去除字符串里面的重复字符   

         //向set加入值的时候,不会发生类型转换,所以5 != '5',Set内部判断两个值是否不同,两个对象,方法,数组总是不相等的
         function f(){console.log('函数f')}
         const ob = {nam:'nam'};
         let ars = [1,2,3]
         let set = new Set([1,2,3,ob,f]);

         //可以使用add()方法来为set添加数据
         set.add(8);  //成功,因为原set结构里面没有8
         set.add(2)   //失败,只会有一个2,后赋值的2会替换前面的值
         set.add({nam:'nam'})  //成功,set不会把对象看作是相等的值
         set.add(function f(){console.log('函数')})    //成功
         set.add(ars)    //成功
         set.add([1,2,3])    //成功
     }

     function b(){
         //set实例的操作方法
         let set = new Set([1,2]);
         set.add(3);     //向set结构的数据添加成员

         set.size;  //size打印set结构数据的成员数量    
         set.delete(3);  //删除某个成员

         set.has(1); //返回一个布尔值,表示该成员是否是set数据结构的    

         set.clear();    //删除所有成员

         //set转换为数组,可以使用set来去除数组重复成员
         Array.from(set);
         let ar = [1,1,1,2,2,3,3,'a','a','b']
         console.log(Array.from(new Set(ar)))
     }

     function c(){
         //set实例的遍历
         //keys(),entries(),values()方法返回的都是遍历器对象。
         //由于set没有建名,所以键名和键值是一样的,或者说是同一个值,所有keys和values方法的行为完全一致
         const ob = [1,2,{nam:'nam'},['a','b'],'string']
         let set = new Set(ob);

         //返回键名
         for(i of set.keys()){ console.log(i) }

         //返回键值
         for(i of set.values()){ console.log(i) }

         //返回键值对,由于键值对是一样的,所以会 返回两个一样的值
         for(i of set.entries()){ console.log(i) }

         //使用回调函数遍历每个成员,与数组的foreach一样,内部参数有键名,键值,集合本身
         set.forEach((item)=>{ console.log(item) })

         //set实例的成员默认可遍历,它的默认遍历器函数就是它的values方法,所以可以直接使用for of进行遍历
         for( i of set){ console.log(i)}
        }
     c()

    </script>
</body>

作为一名前端的小白,Typescript都来了,怎么能不掌握好ES6呢?

必须得跟上时代的脚本,否则只能淘汰啦。

这是我在阮一峰大佬的ECMAScript 6上学习到的内容,发此博客来记录我的学习内容,并且与大家一起分享

注:这是我的学习地址,对es6感兴趣的小伙伴们可以去看http://es6.ruanyifeng.com

01-05 03:04
查看更多