Set与Map,它们你都了解吗?

1,814 阅读2分钟

这是我参与更文挑战的第12天,活动详情查看: 更文挑战 !

👽 概论

提起JS中的数据类型,相信大家很容易就能联想到Number、String、Boolean、Object等等;没错,以上都属于JS中的两大数据类型。除此之外,JS中还有很多的内置对象。像大家耳熟能详的Array、Math、Function等,也有很多我们不怎么常用的,比如Set、Map、WeakSet、WeakMap。这些对象虽不常用,但也并非毫无用处,一起来看!

👽 Set

👻 基本介绍

Set其实与Aaary极为相似,也是一种有序的引用对象。其与Array的最大区别在于Set内的值不可重复,而Array则无此限制。

const myArray = [1,1,2,2]

const mySet = new Set(myArray)
console.log(mySet2) //输出 Set(2) {1,2}

👻 常用API

//获取Set长度
mySet.size
//向Set中增加值
mySet.add(3)
//从Set中删除值
mySet.delete(3)
//遍历Set
for (let item of mySet){
 console.log(item)
}

👻 使用技巧

既然Set有内部值唯一的特性,那么用来去重再也合适不过了。

//数组去重
let myArray = [1,1,2,2]

myArray = Array.from(new Set(myArray))
console.log(myArray) //输出 [1,2]

//字符串去重
let myStr = 'oovbyyu'

myStr = Array.from(new Set(myStr)).join('')
console.log(myStr) //输出"ovbyu"

👽 Map

👻 基本介绍

Map与Object很像,他们都是键值对。主要的区别在于: 1. Map内部的值是有序的(与插入时的顺序一致); 2. Map的键类型不受限制,可以是任意类型(包括函数,对象等等)。

let myMap = new Map();
let arrayA = [1,2]

myMap.set(arrayA,2)

console.log(myMap) //输出 Map(1) {Array(2) => 2}

👻 常用API

//获取Map长度
myMap.size
//向Map中增加值
myMap.set('mapKey','mapVal')
//从Map中删除值
myMap.delete('mapKey')//成功则返回true,失败则返回false
//获取Map中某键的值
myMap.get(arrayA)
//遍历Map
for (let item of myMap){
 console.log(item)
}

👻 使用技巧

Map内部值有序这一特性极为重要,如果存在需要在遍历Object时,确保遍历顺序一致,此时便可以使用Map。

👽 结语

实践出真知,大家多多尝试~