ES6中的Set集合与Map映射

文章目录

  • 一、Set集合
    • 1.Set的基本使用
    • 2.Set的常见方法
    • 3.WeakSet使用
    • 4.WeakSet的应用
  • 二、Map映射
    • 1.Map的基本使用
    • 2.Map的常见方法
    • 3.WeakMap使用
    • 4.WeakMap的应用
  • 三、ES6的其它知识点说明

一、Set集合

1.Set的基本使用

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

在ES6中新增了另外两种数据结构:SetMap,以及它们的另外形式WeakSetWeakMap

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

创建Set我们需要通过Set构造函数(暂时没有字面量创建的方式):

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

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

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的遍历的

// 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上的答案;
// 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:

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类型;
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中的Set集合与Map映射_第1张图片

三、ES6的其它知识点说明

事实上ES6(ES2015)是一次非常大的版本更新,所以里面重要的特性非常多:

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

1.ProxyReflect

  • 我们会在后续专门进行学习。

  • 并且会利用Proxy、Reflect来讲解Vue3的响应式原理;

2.Promise

  • 用于处理异步的解决方案,后续会详细学习;

  • 并且会学习如何手写Promise;

3.ES Module模块化开发:

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

你可能感兴趣的:(JavaScript高级,es6,前端,javascript)