ES6中的数据结构Set

·  阅读 697

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

本文同时参与「掘力星计划」,赢取创作大礼包,挑战创作激励金

前言

小伙伴们大家好,今天开始要跟大家分享的是关于ES6系列的相关知识。前端的小伙伴都应该知道,自从es6发布后,为我们提供了很多新的的语法和方法,也使得我们在开发过程中更加高效更加便利。接下来就将给大家分享一下es6新语法中关于数据结构的Set和Map方法。

Set

Set是es6中提供的一种数据结构,它类似数组但与数组不同的是,它的值都是唯一的没有重复值。Set有如下特点和作用:

  • Set本质也是一个构造函数,因此在使用时需要new,同时Set可以接收一个数组(或者具有 iterable 接口的其他数据结构)作为参数用来初始化Set
  • Set中的值可以是任意类型的,但必须不能重复
  • Set的最大特点就是,里面的值都是唯一的,因此可以用来进行数组去重使用
  • Set中认为NaN和NaN是同一个值,因此Set中只能有一个NaN值(但我们知道事实上NaN和NaN用于是不相等的)
  • Set中两个对象永远是不相等的,即使键和值都是一样的
  • Set也可以为字符串去重
  • 在向Set添加值的时候不会发生类型转换,因此“5”和5是两个值
  • Set 是可遍历的

下面我们用具体代码来一一展示一下上面的这些特点

//1. Set是一个构造函数
//2. Set的值可以是任意类型的
//3. Set不会进行类型转换
//4. Set可接收一个数组作为参数
//5. Set的值都是唯一的
//6. Set是可遍历的
let mySet = new Set([1,2,2,3,4,5,"5","set","set"]);
mySet.forEach(item=>{
	console.log(item);
})
//输出结果: 1,2,3,4,5,'5','set'

//7. Set可以用于数组去重
let arr = [1,1,1,2,3,4,4,5,6,7,8,8,8]
arr = Array.from(new Set(arr))
//arr = [...new Set(arr)]
//输出结果:[1,2,3,4,5,6,7,8]

//8. Set中NaN是同一个值
let set = new Set();
set.add(NaN);
set.add(NaN);
console.log(set.size) // 1 

//9. Set中两个对象总是不相等的
let set = new Set();
set.add({'a':'b'})
set.add({'a':'b'})
console.log(set.size) // 2

//10. Set还可以用于字符串去重
let str = 'abcabcaabbcc'
let set = new Set(str)
str = [...set].join('')
console.log(str);//abc

复制代码

Set的实例属性和方法

为了方便对Set的操作,Set还为我们提供了一套实例属性和方法,细心的小伙伴应该已经发现,其实在上面的案例中我们已经用过了两个方法和一个属性了,下面我们来看一下每个方法的作用和用法吧

  • add(value)方法用于向Set中添加新值,其返回值也是一个Set结构,因此可以连用。如果连续添加同一个值,则最终只会有一个添加进去
  • delete(value)方法用于删除Set结构中的值,返回值为布尔类型,用于标识是否删除成功
  • has(value)方法用于检测Set中是否有某个值,返回值为布尔类型,用于标识是否包含某值
  • clear()方法没有参数也没用返回值,用于清空Set中所有的成员
  • size,size是实例的一个属性,用于标识当前Set中一共有多少个成员,返回值是一个数字
  • keys()方法用于遍历Set数据结构,返回Set中的所有的键名
  • values()方法用于遍历Set数据结构,返回Set中所有的键值
  • entries()方法用于遍历Set数据结构,返回Set中多有的键值对
  • forEach()方法与数组的用法一样,遍历Set中所有的成员,可以根据业务需要进行一些操作

关于add、forEach两个方法和size属性,我们上面的例子中已经用过了这里不再演示,下面简单演示一下其他几个函数的一些用法

let set = new Set([1,2,3,4,5,6,7,8,9,10])
set.delete(1);//true
set.has(1)//false
set.has(2)//true
for(let item of set.keys()){
	console.log(item)
}
//输出:1 2 3 4 5 6 7 8 9 10

for(let item of set.values()){
	console.log(item)
}
//输出:1 2 3 4 5 6 7 8 9 10

for(let item of set.entries()){
	console.log(item)
}
//输出:[1,1] [2,2] [3,3 [4,4] [5,5] [6,6] [7,7] [8,8] [9,9] [10,10]

set.clear();
console.log(set.size);//0
复制代码

需要注意的是:keys方法、values方法、entries方法返回的都是遍历器对象(Iterator 对象)。由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),因此keys方法和values方法的行为完全一致。而entries方法返回的遍历器,同时包括键名和键值,因此每次输出一个数组,它的两个成员完全相等的。

总结

关于Set数据结构就分享到这里,相信学过了Set以后,根据Set数据结构的这些特点,在我们以后的日常开发中一定会带来很多好处。下一节中我们将分享跟Set类似的另一种数据结构WeakSet。 喜欢的小伙伴欢迎点赞评论家关注哦!

分类:
前端
收藏成功!
已添加到「」, 点击更改