记es6学习笔记(一)对ES6中的Set,WeakSet,Map,WeakMap的理解

75 阅读3分钟

(一) Set

set是ES6新增的一种数据结构,set中元素不能重复,使用场景:保存数组不希望是重复的或数组去重

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

// 添加对象时特别注意,{}是指一个对象,对象的地址是不同的,所以可以存储
set.add({})
set.add({})
console.log(set)
// 打印结果:Set(4) { 10, 20, {}, {} }

// 去重
const arr = [33, 10, 26, 1, 33, 26]
const arrSet = new Set(arr)
const newArr = Array.from(arrSet) // 或者使用const newArr = [ ...arrSet]
console.log(newArr);
// 打印结果:[ 33, 10, 26, 1 ]

Set属性:

// Set.size Set的元素个数
console.log(arrSet.size) // 4

Set方法

// set.add() 添加元素
const set = new Set()
set.add(10) //{10}

// set.delete() 删除元素 不支持索引删除
set.delete(10) //删除元素10

// set.has() 是否包含某一个元素
set.add(10)
set.has(10) // true

// set.clear() 清除所有元素
set.clear() // {}

对Set进行遍历

arrSet.forEach(item => {
  console.log(item);
})

for( const item of arrSet) {
  console.log(item);
}

(二) WeakSet

WeakSet和Set的区别

1, WeakSet只能存放对象类型,不能存放基本数据类型
2, WeakSet对元素的引用是弱引用,如果没有对象进行引用,GC会对该对象回收
3, (补充)关于强/弱引用:强引用是指在对普通对象的引用,如果一个对象具有强引用,那么垃圾回收器就不会回收它。而弱引用是指垃圾回收器(GC)扫描内存空间时,只要发现弱引用对象,都会将它回收。
4, WeakSet有add(value),delete(value),has(value)三种方法,WeakSet不能遍历,存储到WeakSet中的对象没办法获取
WeakSet的应用场景
WeakSet通常不会被使用,使用场景的代码如下
// 应用场景
const personSet = new WeakSet()

class Person {
  constructor () {
    personSet.add(this)
  }

  running() {
    if(!personSet.has(this)) {
      throw new Error('不能通过非构造方法创建出来的对象调用running方法')
    }
    console.log('running~', this);
  }
}

const obj = new Person
obj.running.call({name: 'lhm'})

Map

Map允许存储{键,值}对,其中任何值都可以用作键或值;Map集合中的键和值可以是任何类型,并且如果使用集合中已存在的键将值添加到Map集合中,新值将替换旧值。

const obj1 = {name: 'lhm'}
const obj2 = {name: 'kobe'}
const map = new Map()
// 使用set存值
map.set(obj1, 'aaa')
map.set(obj2, 'bbb')
map.set(1, 'ccc')
console.log(map);  //{ { name: 'lhm' } : 'aaa', { name: 'kobe' } : 'bbb', 1 : 'ccc' }

//存放数组需要此种格式:[[key,value], [key,value], [key,value] ]
const map2 = new Map([[obj1,'aaa'], [obj2,'bbb'], [2,'ccc'] ])
console.log(map2);  //{{ name: 'lhm' } : 'aaa', { name: 'kobe' } : 'bbb', 2 : 'ccc'}

// 常见的属性和方法

console.log(map2.size); // 获取长度,打印结果:3
map2.set(3, 'eeee')  // 储存数据
console.log(map2.get(3));  // 获取值,打印结果:eeee
console.log(map2.has(3));  // 判断值存不存在,打印结果:true
console.log(map2.delete(3));  // 删除某个值 

// 遍历
map2.forEach((item, key) => {
  console.log(item, key);
})

for (const [key, value] of map2) {
  console.log(key, value);
}

weakMap

WeakMap和Map的区别

1, WeakMap只能存放对象类型,不能存放基本数据类型
2, WeakMap对元素的引用是弱引用,如果没有对象进行引用,GC会对该对象回收
const obj = {name: 'obj1'}
const weakMap = new WeakMap()
// 存值
weakMap.set(obj)
// 取值
weakMap.get(obj)
// 判断是否包含某元素
weakMap.has(obj)
// 删除值
weakMap.delete(obj)
// WeakMap不能遍历
console.log(weakMap); // 打印结果为 { <items unknown> }