前端 —— JavaScript 进阶 27 -- ES6 之 set

数据结构：

        数据结构就是储存数据的结构 如：数组、对象。

       常见的数据结构： 栈  队列  树 图 集合...。这次来说说 ES6 新增的数据结构 Set 和 Map

 

Set:

很多数据放在一起，没有重复项 。

它类似于数组，允许存储任何类型的值，无论是原始值或者是对象引用，但成员的值都是唯一的，没有重复的值。

语法：

var mySet = new Set();

Set 实例的属性和方法如下。

• add(value)：添加某个值，返回Set结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
• has(value)：返回一个布尔值，表示该值是否为Set的成员
• clear()：清除所有成员，没有返回值
• size ： 集合里元素的个数

Set结构的实例有四个遍历方法，可以用于遍历成员。

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员

注意：

** Set结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

** Set的遍历顺序就是插入顺序。

我们来逐个看下实例：

【 实例 1 】利用这一唯一特性进行数组的去重工作

//单一数组的去重。
let mySet = new Set([1,2,2,3,3])
console.log(mySet); //Set { 1, 2, 3 }

//多数组的合并去重
let arr01 = [2,3,4,4,5];
let arr02 = [1,2,4,6,5,7];
let mySet02 = new Set([...arr01,...arr02])
console.log(mySet02);//Set { 2, 3, 4, 5, 1, 6, 7 }
let res = [...mySet02];
console.log(res);//[ 2, 3, 4, 5, 1, 6, 7 ]

【 实例 2 】size 集合里元素的个数

//size 集合里元素的个数
let mySet03 = new Set(['a','b','c']);
console.log(mySet03.size);// 3 

【 实例 3 】add(value)  向Set中添加元素。

//add(value)向Set中添加元素。
let addSet = new Set();
    addSet.add(1);
    addSet.add(2);
    addSet.add(3);
console.log('add',addSet);//add Set { 1, 2, 3 }
console.log(addSet.size); //3

【 实例 4 】delete(value)  从Set中删除元素。

//delete(value)从Set中删除元素。
let delSet = new Set();
    delSet.add(1);
    delSet.add(2);
    delSet.add(3);
    delSet.delete(1);
console.log('deleted',delSet);//deleted Set { 2, 3 }

【 实例 5 】has(value)  判断某元素是否存在。

//has(value)判断某元素是否存在。
let hasSet = new Set();
    hasSet.add(1);
    hasSet.add(2);
    hasSet.add(3);
    hasSet.delete(1); 
console.log('has(1):',hasSet.has(1));//has(1): false
console.log('has(2):',hasSet.has(2));//has(2): true

【 实例 6 】clear() 清除所有成员。

//clear()清除所有成员。
let clearSet = new Set();
    clearSet.add(1);
    clearSet.add(2);
    clearSet.add(3);    
console.log('add',clearSet);//add Set { 1, 2, 3 }
    clearSet.clear(); // 清除所有成员
console.log('clear:',clearSet);//clear: Set {}

Set 和 Array 之间相互转换

【 实例 7 】 数组 转 Set集合

let arrset = new Set([1,2,3,4,5])
console.log(arrset)//Set { 1, 2, 3, 4, 5 }

【 实例 8 】 Set集合 转 数组

//Set集合 转 数组
let setArr = new Set([11,22,33,44]);
console.log([...setArr])//[ 11, 22, 33, 44 ]

【 实例 9 】 forEach()  方法对数组的每个成员执行一次提供的函数

//遍历迭代 循环数组中的每一项。
let forSet = new Set([1,2,3])
console.log(forSet.size);//3

forSet.forEach(function(item){
    console.log(item); 
});
// 1 
// 2 
// 3

集合运算符是对两个集合操作的，两个集合必须具有相同的列数，列具有相同的数据类型

    用上面提到的的函数方法来实现交集并集的效果

    数组的 map 和 filter 方法也可以间接用于Set了,因此使用Set可以很容易地实现并集、交集和差集。

【 实例 10 】 并集 [11,22,33]  [22,33,44,55]  于两个给定集合A、B，由两个集bai合所有元素构成的集合

//并集 [11,22,33]  [22,33,44,55]  于两个给定集合A、B，由两个集bai合所有元素构成的集合
let arr03 = [11,22,33];
let arr04 = [22,33,44,55];
let r = [...arr03,...arr04];
let res = new Set(r);
console.log(res);//Set { 11, 22, 33, 44, 55 }
let uion = [...res];
console.log(uion);//[ 11, 22, 33, 44, 55 ]

【 实例 11 】交集 两个数组都有的元素  两个给定集合A、B，由属于A又属于B的所有元素构成的集合

//交集 两个数组都有的元素  两个给定集合A、B，由属于A又属于B的所有元素构成的集合
//对 arr05做循环，判断其里面的值在arr06中有没有
let arr05 = [11,22,33,22,22];
let arr06 = [22,33,44,55];
let jjSet01 = new Set(arr05);//数组去重
let jjSet02 = new Set(arr06);
let  intersect = [...jjSet01].filter(function(item){
    //console.log(item);
   return jjSet02.has(item);
})
console.log(intersect);//[ 22, 33 ]

【 实例 12 】差集  A，B是两个集合，则所有属于A且不属于B的元素构成的集合

//差集  A，B是两个集合，则所有属于A且不属于B的元素构成的集合
//对 arr06做循环，判断其里面的值在arr07中有没有，没有就是差集
let arr07 = [11,22,33,22,22];
let arr08 = [22,33,44,55];
let cj01 = new Set(arr07);
let cj02 = new Set(arr08);
let diff = [...cj01].filter(function(item){
    return !cj02.has(item)
})
console.log(diff); //[ 11 ]

 webSet

WeakSet结构与Set类似，也是不重复的值的集合

       WeakSet的成员只能是对象，而不能是其他类型的值,WeakSet可以接受一个数组或类似数组的对象作为参数。

        WeakSet是一个构造函数，可以使用new命令，创建WeakSet数据结构。

语法：

let wset = new WeakSet();

 WeakSet结构有以下三个方法。

• add(value)：添加一个新成员。
• delete(value)：清除指定成员。
•  has(value)：表示某个值是否在,返回一个布尔值。

const ws = new WeakSet();
const obj = {};
const foo = {};
ws.add(obj);
ws.has(foo);    // false
//WeakSet 没有size属性，没有办法遍历它的成员。
ws.size // undefined
ws.forEach // undefined
ws.forEach(function(item){ console.log('WeakSet has ' + item)})
// TypeError: undefined is not a function

关于WeakSet()的其他知识点，大家可以自己查资料哦！

下一篇再谈谈 Map

我的文章都是学习过程中的总结，如果发现错误，欢迎留言指出，我及时更正。