<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