浅谈es6中的Set和Map

Set

    Set是es6引入的新的数据类型，可以认为是一个集合，他的特点是当中不能存储相同的值。

    Set数据结构多用于数组去重处理。

const mySet = new Set()

//可以通过add的方法添加内容，因为add会返回数据本身，所以可以链式调用
mySet.add(1).add(2).add(3)
console.log(mySet)//Set { 1, 2, 3 }


//也可以通过直接传入值来进行set处理
console.log(new Set([1,2,3,5,74,2,4,83,1]))//Set { 1, 2, 3, 5, 74, 4, 83 }


//可以通过Array.form将其转化为数组
console.log(Array.form(mySet))//[ 1, 2, 3 ]

//也可以通过es6的解构方式将其转化为数组
console.log([...mySet])//[ 1, 2, 3 ]

//对于set的遍历可以通过for...of循环进行遍历
for (const key of mySet) {
    console.log(key)//123
}

//对于set的操作，可以通过delete进行删除
mySet.delete(3)
console.log(mySet)//Set { 1, 2 }

//对于set的操作，可以通过size()方法获取set集合的长度
console.log(mySet.size())//2

//对于set的操作，可以通过has进行是否拥有判断
console.log(mySet.has(2))//true

//对于set的操作，可以通过clear()方法进行数据完全清除
console.log(mySet.clear())//undefined

Map

    在了解Map之前，我们先聊一下JavaScript中的引用数据类型-对象{}

//首先我们定义一个对象，内部有三个数据，他们的key值分别为boolean、number和Object
const myObject = {}
myObject[123] =123
myObject[true] = true
myObject[{myName:'jan'}] = 'jan'
console.log(myObjecj)//{ '123': 123, true: true, '[object Object]': 'jan' }

//在这里，你会发现，在myObject中所有的key都被转化为了string类型
//那么这样会带来什么样的问题呢？
console.log(myObject[{}])					//jan
console.log(myObject['[object Object]'])	//jan
console.log(myObject["{myName:'jan'}"])		//jan

/*你会发现，他们很神奇的都打印了同样的数据，因为基本类型中的Object无法区分这几种key，所以当我们需要将Object作为key值的时候，会影响后面的取值。
为了解决这种问题，es6才引入了Map数据结构。
*/

//在这个代码块中我们来认识一下Map集合
const myMap = new Map()
const myName = {myName:'jan'}

//我们可以通过set方法对Map集合进行添加数据，你会发现内部完全不会造成无法识别的问题
myMap.set(myName,'jan')
myMap.set(1234,1234)
myMap.set(true,true)
console.log(myMap)//Map { { myName: 'jan' } => 'jan', 1234 => 1234, true => true }


//同样的Map集合也有delete和clear方法用于清理相关数据。
//Map集合的获取变量比较特殊，需要使用get方法进行获取
console.log(myMap.get(myName))//jan

//对于map的遍历我们可以通过forEach的方法进行获取
myMap.forEach((value , key)=>{
    console.log(value,key)
})
/*打印结果：
jan { myName: 'jan' }
1234 1234
true true
获取比较特殊，先获取值在获取key
*/