以前在学习编程的时候,有掌握一门开发语言后有固守的恶习,比如在2000年的时候熟练掌握VB5和ASP后就希望一直使用这两个开发工具,对于ASP.net和VB6、VB.net有潜在的排斥心理,说到底还是不愿意去接受新知识和新事物。 在潜意识里,当一种愉悦能够给予自身现实兑现的时候,人们往往会有一种难以割舍的认定,就是总是假设维持现状那么这种愉悦就会即时跟随,事实上它是短暂的,也会随着时间去递减的。 它带来的隐患就是不愿意去接受新事物,让你一直满足于现状,默默地让你画地为牢,把自己锁住和圈闭。 程序员要不断更新自己的。 ECMAJavaScript5语言已经足够丰富了,运用它已经可以完成相当丰富的功能,ECMAJavaScript6又带来更加丰富的语言元素,有些新元素学习了可能暂时用不上,那可能是你的开发场景不具备或者开发思维有问题,这些新元素是那些我们无法触及的高人设置,他们考虑问题远超我们想象,不用怀疑这些新元素的应用,所以对于这些新知识应该及时掌握。
1、基础知识点
在ES6中,数据结构set(集合)中的成员值是唯一的,它实现了iterator接口,可以使用[...]和[for ... of ...]进行遍历。 ⑴ size 返回集合元素的个数 ⑵ add 增加一个新元素,返回当前集合对象 ⑶ delete 删除元素 ⑷ has 检查集合中是否包含某个元素
ES6
红色
黄色
黑色
白色
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++') ) //判断元素是否在该集合中存在
输出结果:
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'}