ES6 的 Set数据结构
<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
浙公网安备 33010602011771号