ES6中的Set集合与Map映射

文章目录

一、Set集合
二、Map映射
三、ES6的其它知识点说明

一、Set集合

1.Set的基本使用

在ES6之前，我们存储数据的结构主要有两种：数组、对象。

在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。

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

创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：

javascript 复制代码

const s1 = new Set()
const arr = [3, 45, 3]
const s2 = new Set(arr)
console.log(s2)// 3, 45

我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

javascript 复制代码

const arr1 = [3, 4, 6]
const s3 = new Set(arr1)
const arr2 = [...s3]
const srr3 = Array.from(s3)

2.Set的常见方法

Set常见的属性：

size：返回Set中元素的个数；

Set常用的方法：

add(value)：添加某个元素，返回Set对象本身；
delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
has(value)：判断set中是否存在某个元素，返回boolean类型；
clear()：清空set中所有的元素，没有返回值；
forEach(callback, [, thisArg])：通过forEach遍历set；

另外Set是支持for-of的遍历的

javascript 复制代码

// 1.创建Set
const set = new Set()
console.log(set)

// 2.添加元素
set.add(10)
set.add(22)
set.add(35)
set.add(22)
console.log(set)

const info = {}
const obj = {name: "obj"}
set.add(info)
set.add(obj)
set.add(obj)
console.log(set)

// 3.应用场景: 数组的去重
const names = ["abc", "cba", "nba", "cba", "nba"]
// const newNames = []
// for (const item of names) {
//   if (!newNames.includes(item)) {
//     newNames.push(item)
//   }
// }
// console.log(newNames)
const newNamesSet = new Set(names)
const newNames = Array.from(newNamesSet)
console.log(newNames)

// 4.Set的其他属性和方法
// 属性
console.log(set.size)
// 方法
// 4.1. add方法
set.add(100)
console.log(set)
// 4.2. delete方法
set.delete(obj)
console.log(set)
// 4.3. has方法
console.log(set.has(info))
// 4.4. clear方法
// set.clear()
// console.log(set)
// 4.5. forEach
set.forEach(item => console.log(item))

// 5.set支持for...of
for (const item of set) {
    console.log(item)
}

3.WeakSet使用

和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。

那么和Set有什么区别呢？

区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；

WeakSet常见的方法：

add(value)：添加某个元素，返回WeakSet对象本身；
delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；

4.WeakSet的应用

注意：WeakSet不能遍历

因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。
所以存储到WeakSet中的对象是没办法获取的；

那么这个东西有什么用呢？

事实上这个问题并不好回答，我们来使用一个Stack Overflow上的答案；

javascript 复制代码

// 3.WeakSet的应用
const pWeakSet = new WeakSet()
class Person {
    constructor() {
        pWeakSet.add(this)
    }

    running() {
        if (!pWeakSet.has(this)) {
            console.log("Type error: 调用的方式不对")
            return
        }
        console.log("running~")
    }
}

let p = new Person()
// p = null
p.running()
const runFn = p.running
runFn()
const obj = { run: runFn }
obj.run()

二、Map映射

1.Map的基本使用

另外一个新增的数据结构是Map，用于存储映射关系。

但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？

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

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

那么我们就可以使用Map：

javascript 复制代码

const info = { name: "why" }
const info2 = { age: 18 }

// 1.对象类型的局限性: 不可以使用复杂类型作为key
// const obj = {
//   address: "北京市",
//   [info]: "哈哈哈",
//   [info2]: "呵呵呵"
// }
// console.log(obj)

// 2.Map映射类型
const map = new Map()
map.set(info, "aaaa")
map.set(info2, "bbbb")
console.log(map)

// 3.Map的常见属性和方法
// console.log(map.size)
// 3.1. set方法, 设置内容
map.set(info, "cccc")
console.log(map)
// 3.2. get方法, 获取内容
// console.log(map.get(info))
// 3.3. delete方法, 删除内容
// map.delete(info)
// console.log(map)
// 3.4. has方法, 判断内容
// console.log(map.has(info2))
// 3.5. clear方法, 清空内容
// map.clear()
// console.log(map)
// 3.6. forEach方法
// map.forEach(item => console.log(item))

// 4.for...of遍历
for (const item of map) {
    const [key, value] = item
    console.log(key, value)
}

2.Map的常见方法

Map常见的属性：

size：返回Map中元素的个数；

Map常见的方法：

set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
has(key)：判断是否包括某一个key，返回Boolean类型；
delete(key)：根据key删除一个键值对，返回Boolean类型；
clear()：清空所有的元素；
forEach(callback, [, thisArg])：通过forEach遍历Map；

Map也可以通过for-of进行遍历。

3.WeakMap使用

和Map类型的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的。

那么和Map有什么区别呢？

区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；

WeakMap常见的方法有四个：

set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
has(key)：判断是否包括某一个key，返回Boolean类型；
delete(key)：根据key删除一个键值对，返回Boolean类型；

javascript 复制代码

let obj1 = { name: "why" }
let obj2 = { name: "kobe" }

// 1.WeakMap的基本使用
const weakMap = new WeakMap()
// weakMap.set(123, "aaa")
weakMap.set(obj1, "aaa")
weakMap.set(obj2, "bbb")

obj1 = null
obj2 = null

4.WeakMap的应用

注意：WeakMap也是不能遍历的

没有forEach方法，也不支持通过for-of的方式进行遍历；

那么我们的WeakMap有什么作用呢？（后续专门讲解）

vue的响应式源码

三、ES6的其它知识点说明

事实上ES6（ES2015）是一次非常大的版本更新，所以里面重要的特性非常多：

除了前面讲到的特性外还有很多其他特性；

1.Proxy、Reflect

我们会在后续专门进行学习。
并且会利用Proxy、Reflect来讲解Vue3的响应式原理；

2.Promise

用于处理异步的解决方案，后续会详细学习；
并且会学习如何手写Promise；

3.ES Module模块化开发：

从ES6开发，JavaScript可以进行原生的模块化开发；
这部分内容会在工程化部分学习；
包括其他模块化方案：CommonJS、AMD、CMD等方案；