快捷導(dǎo)航

js中Map和Set的用法及區(qū)別實(shí)例詳解

更新時(shí)間：2022年02月15日 16:22:07 作者：摸魚小公舉

map和set一樣是關(guān)聯(lián)式容器,它們的底層容器都是紅黑樹,區(qū)別就在于map的值不作為鍵,鍵和值是分開的,下面這篇文章主要給大家介紹了關(guān)于js中Map和Set的用法及區(qū)別的相關(guān)資料,需要的朋友可以參考下

首先了解一下 Map

Map 是一組鍵值對(duì)的結(jié)構(gòu)，和 JSON 對(duì)象類似。

(1) Map數(shù)據(jù)結(jié)構(gòu)如下

這里我們可以看到的是Map的數(shù)據(jù)結(jié)構(gòu)是一個(gè)鍵值對(duì)的結(jié)構(gòu)

(2) key 不僅可以是字符串還可以是對(duì)象

var obj ={name:"小如",age:9}
let map = new Map()
map.set(obj,"111")

打印結(jié)果如下

(3) Map常用語法如下

//初始化`Map`需要一個(gè)二維數(shù)組(請(qǐng)看 Map 數(shù)據(jù)結(jié)構(gòu))，或者直接初始化一個(gè)空`Map` 
let map = new Map();

//添加key和value值
map.set('Amy','女')
map.set('liuQi','男')

//是否存在key，存在返回true,反之為false
map.has('Amy') //true
map.has('amy') //false

//根據(jù)key獲取value
map.get('Amy') //女

//刪除 key為Amy的value
map.delete('Amy')
map.get('Amy') //undefined  刪除成功

(4) 一個(gè)key只能對(duì)應(yīng)一個(gè)value，多次對(duì)一個(gè)key放入value，后面的值會(huì)把前面的值覆蓋掉

var map =new Map
map.set('Amy',"女")
map.set('Amy',"男")
console.log(map)

打印結(jié)果如下

再來了解一下 Set

Set 對(duì)象類似于數(shù)組，且成員的值都是唯一的

(1) 打印出的數(shù)據(jù)結(jié)構(gòu)如下

這里打印出來是一個(gè)對(duì)象

(2) 最常用來去重使用，去重方法有很多但是都沒有它運(yùn)行的快。

var arr=[1,3,4,2,5,1,4]
// 這里原本是一個(gè)對(duì)象用了es6的語法 轉(zhuǎn)化成了數(shù)組，就是轉(zhuǎn)化數(shù)組之前已經(jīng)過濾掉了重復(fù)的元素了
var arr2=[...new Set(arr)] //[1,3,4,2,5]

(3) Set常用語法如下

//初始化一個(gè)Set ，需要一個(gè)Array數(shù)組，要么空Set
var set = new Set([1,2,3,5,6]) 
console.log(set)  // {1, 2, 3, 5, 6}

//添加元素到Set中
set.add(7) //{1, 2, 3, 5, 6, 7}

//刪除Set中的元素
set.delete(3) // {1, 2, 5, 6, 7}

//檢測(cè)是否含有此元素，有為true，沒有則為false
set.has(2) //true

總結(jié)Map和Set的區(qū)別

(1) 這兩種方法具有極快的查找速度;那么下面我們來對(duì)比一下Map，Set，Array 的執(zhí)行時(shí)間

//首先初始化數(shù)據(jù)
var lng=100
var arr =new Array(lng).fill(2)
var set =new Set(arr)
let map =new Map()
for(var i=0;i<lng;i++){
arr[i]=i
map.set(i,arr[i])
}

// Array
console.time()
for(var j=0;j<lng;j++){
arr.includes(j)
}
console.timeEnd()  //default: 0.01220703125 ms


// Set
console.time()
for(var j=0;j<lng;j++){
set.has(j)
}
console.timeEnd()  // default: 0.005859375 ms

// Map
console.time()
for(var j=0;j<lng;j++){
map.has(j)
}
console.timeEnd()
// default: 0.007080078125 ms

通過以上幾種方法我們可以看到，Set執(zhí)行時(shí)間最短，那么查找速度最快，當(dāng)然了Set 和 Map的查找速度都很快想差不大，所以說這兩種方法具有極快的查找速度。

(2) 初始化需要的值不一樣，Map需要的是一個(gè)二維數(shù)組，而Set 需要的是一維 Array 數(shù)組

(3) Map 和 Set 都不允許鍵重復(fù)

(4) Map的鍵是不能修改，但是鍵對(duì)應(yīng)的值是可以修改的；Set不能通過迭代器來改變Set的值，因?yàn)镾et的值就是鍵。

(5) Map 是鍵值對(duì)的存在，值也不作為??；而 Set 沒有 value 只有 key，value 就是 key；