JS的ES6新增数据结构Set、WeakSet、Map、WeakMap

1. 新增数据结构Set的基本使用

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组不同的区别是元素不能重复；

创建Set我们需要通过Set构造函数；

Set有一个非常有用的功能就是给数组去重；

// 10, 20, 40, 333
// 1.创建Set结构
const set = new Set()
set.add(10)
set.add(20)
set.add(40)
set.add(333)

set.add(10)

// 2.添加对象时特别注意:  这样添加的是两个不同的{} 内存地址不同
set.add({})
set.add({})
console.log(set);   //Set(6) { 10, 20, 40, 333, {}, {} }

// 这样添加的是obj  是同一个对象  只会添加依次
const obj = {}
set.add(obj)
set.add(obj)

console.log(set)  //Set(7) { 10, 20, 40, 333, {}, {}, {} }

// 3.对数组去重(去除重复的元素)
const arr = [33, 10, 26, 30, 33, 26]
// const newArr = []
// for (const item of arr) {
//   if (newArr.indexOf(item) !== -1) {
//     newArr.push(item)
//   }
// }

const arrSet = new Set(arr)
console.log(arrSet);  //Set(4) { 33, 10, 26, 30 }

Set的常见方法：

const arr = [33, 10, 26, 30, 33, 26]

const arrSet = new Set(arr)

// 4.size属性
console.log(arrSet.size)  // 4

// 5.Set的方法
// add
arrSet.add(100)
console.log(arrSet)  //Set(5) { 33, 10, 26, 30, 100 }

// delete
arrSet.delete(33)
console.log(arrSet)  //Set(4) { 10, 26, 30, 100 }

// has
console.log(arrSet.has(100))  //true

// clear
// arrSet.clear()
console.log(arrSet)  // 

// 6.对Set进行遍历
arrSet.forEach(item => {
  console.log(item)  //10 26 30 100
})

for (const item of arrSet) {
  console.log(item)  //10 26 30 100
}

2. 新增数据解构WeakSet的基本使用

WeakSet与Set的区别：

①WeakSet只能存放对象类型，不能存放基本数据类型；

②WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；

注意：WeakSet不能遍历

WeakSet的常见方法：

 3. 新增数据解构Map的基本使用

ES6新增的数据结构Map，用于存储映射关系

事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；

某些情况下我们希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串作为key；

这个时候我们就可以用到Map：

 将一个对象作为映射关系的key

/ 1.JavaScript中对象中是不能使用对象来作为key的
const obj1 = { name: "why" }
const obj2 = { name: "kobe" }

// const info = {
//   [obj1]: "aaa",
//   [obj2]: "bbb"
// }

// console.log(info)

// 2.Map就是允许我们对象类型来作为key的
// 构造方法的使用
const map = new Map()
map.set(obj1, "aaa")
map.set(obj2, "bbb")
map.set(1, "ccc")
console.log(map)

输出 // Map(3) {
  { name: 'why' } => 'aaa',
  { name: 'kobe' } => 'bbb',
  1 => 'ccc'
}


const map2 = new Map([[obj1, "aaa"], [obj2, "bbb"], [2, "ddd"]])
console.log(map2)
输出 //Map(3) {
  { name: 'why' } => 'aaa',
  { name: 'kobe' } => 'bbb',
  2 => 'ddd'
}

 Map的常用方法：

const obj1 = { name: "why" }
const obj2 = { name: "kobe" }
const map2 = new Map([[obj1, "aaa"], [obj2, "bbb"], [2, "ddd"]])

// 3.常见的属性和方法
console.log(map2.size)  // 3

// set
map2.set("why", "eee")
console.log(map2) 

输出 // Map(4) {
    {name: 'why'} => 'aaa',
    {name: 'kobe'} => 'bbb',
    2 => 'ddd',
    'why' => 'eee'
    }

// get(key)
console.log(map2.get("why")) // eee

// has(key)
console.log(map2.has("why")) // true

// delete(key)
map2.delete("why")
console.log(map2)

输出 // Map(4) {
    {name: 'why'} => 'aaa',
    {name: 'kobe'} => 'bbb',
    2 => 'ddd',
    }

// clear
// map2.clear()
// console.log(map2)

// 4.遍历map
map2.forEach((item, key) => {
  console.log(item, key)
})
//aaa { name: 'why' }
//bbb { name: 'kobe' }
//ddd 2


for (const item of map2) {
  console.log(item[0], item[1])
}
//{ name: 'why' } aaa
//{ name: 'kobe' } bbb
//2 ddd


for (const [key, value] of map2) {
  console.log(key, value)
}
//{ name: 'why' } aaa
//{ name: 'kobe' } bbb
//2 ddd

 4. 新增数据解构WeakMap的使用

 WeakMap与Map的区别：

①WeakMap的key只能是对象，不接受其他类型作为key；

②WeakMap的key对对象的引用是弱引用，果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；

注意：WeakMap也不能遍历

WeakMap的常见方法：