vue foreach用法_ES6 新增的 Set 数据集合的用法【16】

学习要点：1.Set 数据集合

本节课我们来开始学习 ES6 新增的 Set 数据集合的用法；

一．Set 数据集合

1. ES6 之前只有数组一种数据结构，而现在提供了 Set 和 Map 两种集合；

2. Set 集合是一种无重复元素的列表，使用 new Set()方法创建 Set 集合；

let set=new Set();console.log(set); //Set(0) {}console.log(typeof set); //object 类型set.add(1);set.add(2);set.add(2);set.add('2');set.add('c');console.log(set); //Set(5) {1, 2, "2", "c"}console.log(set.size); //4

PS：向集合添加 5 个元素，只有四个有效，并且 2 和字符串’2’不冲突，空对象也不冲突；

3. 我们也可以通过构造函数传递参数的方式进行初始化集合，比如接受一个数组；

//通过构造参数初始化集合let set=new Set([1,2,3,4,5,6]);console.log(set); //{1, 2, 3, 4, 5, …}

4. 使用 has()方法查找是否存在指定元素，注意 2 和’2’是两个元素，不会隐式转换；

let set=new Set([1,2,3,'1','2']);console.log(set.has(3)); //trueconsole.log(set.has('3')); //false

5. 还可以使用 delete()删除指定元素、clear()清空元素；

let set=new Set([1,2,3,4,5,6]);console.log(set.delete(2)); //删除元素 trueconsole.log(set); //{1, 3, 4, 5, 6}console.log(set.clear()); //清除 undefinedconsole.log(set); //{}

6. 我们可以使用...语法，将 Set 集合转换为数组；

let set=new Set([1,2,3,4,5,6]);let arr=[...set];console.log(arr);

7. 我们可以使用 for 或者 forEach 来遍历 Set 集合；

//for...of 遍历let set=new Set([1,2,3,4,5,6]);for(let i of set){    console.log(i);}//forEach 变量 //在 Set 集合中 key 和 value 都是值 //s 表示 set 集合本身set.forEach((k,v,s)=>{    console.log(k+'-'+v+'-'+s);});

8. Set 集合还提供针对对象的 Weak Set 集合，添加非对象类型会报错；

9. Weak Set 集合支持 add()、has()和 delete()方法；

10. Weak Set 不支持遍历，内部隐藏(无法查看内容)，不支持 foreach 和 size；

11. 对于应用场景来说，存放对象的弱引用，不用担心对象被回收后引发的问题；

//强引用let set=new Set(),    obj={1:1};set.add(obj);console.log(set); //引用存在//移除引用obj=null;console.log(set); //引用依然存在

//弱引用let ws=new WeakSet(),    obj={1:1};ws.add(obj);console.log(ws.has(obj)); //true 引用存在obj=null; //移除引用console.log(ws.has(obj)); //false 随着销毁而释放

如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术，陪有梦想的人一起成长！