[前端攻堅]：Map的使用
theme: smartblue highlight: foundation
開啟掘金成長之旅！這是我參與「掘金日新計劃 · 12 月更文挑戰」的第9天，點擊查看活動詳情
總結一些日常需要用到的一些api，也是在一些面試中會經常出現的題目，今天分享的是Map的一些用法和個人的一些理解， 同時文章也被收錄到我的《JS基礎》專欄中，歡迎大家點擊收藏加關注。
Map類型是鍵值對的有序列表，而鍵和值都可以是任意類型
- set()
- get()
- has()
- size
先看下簡單的調用
- set 用來設置鍵和值
- get 通過鍵獲取值
- has 判斷是否存在某個值
- size 返回map中的個數
- clear 清空map
js let n = new Map() n.set(1, 'a') console.log(n)//Map(1) { 1 => 'a' } console.log(n.get(1))//a console.log(n.has(1))//true n.set(2, 'a') console.log(n.size)//2 n.clear() n.size // 0
基本使用
- 可以使用set來對map設置鍵值，並且可以使用鏈式操作來進行設置
- 鍵可以是任意數據類型
- 鍵只能出現一次；它在
Map的集合中是獨一無二的 - entries和values的使用
js //基本數據類型 let m = new Map() m.set(1, 'a').set(2, 'b').set(3, 'c') // 鏈式操作 // console.log(m) //Map(3) { 1 => 'a', 2 => 'b', 3 => 'c' }
鍵只能出現一次
情況1：在這裏set設置的都是同一個值，所以在這裏鍵會被認為是同一個值，會更改值，而不會新加一個鍵
情況2：這種情況下set會設置一個新鍵
```js //情況1 let a = {a:2} m.set(a, 'a').set(a, 'b') console.log(m)//Map(1) { { a: 2 } => 'b' } console.log(m.has(a)) //true console.log(m.has({a:2})) //false
//情況2 m.set({a:1}, 'a').set({a:1}, 'b') console.log(m)//Map(2) { { a: 1 } => 'a', { a: 1 } => 'b' } console.log(m.has({a:1})) //false let a = {a:1} console.log(m.has(a))//false
//對於情況2的解釋 console.log({a:1}==={a:1}) //false 因為複雜數據類型判斷是否不相等，所以map在複雜數據類型的設置鍵上會有同樣的效果 console.log(a==={a:1}) //false ``` 4.遍歷：entries的使用
```js const map = new Map([ ['F', 'no'], ['T', 'yes'], ]); for (let [key, value] of map.entries()) { console.log(key, value); } // "F" "no" // "T" "yes"
// 等同於使用map.entries() for (let [key, value] of map) { console.log(key, value); } // "F" "no" // "T" "yes" ```
上面是map的使用方法，entries可以用在map上面，object的遍歷也有用到entries這個功能，只是寫法不一樣，寫法如下，用法和map都是相同的，結果的數據也是相同的
js
const map = {
'F':'no',
'T':'yes'
}
for (let [key, value] of Object.entries(map) ){
console.log(key, value);
//F no
//T yes
}
應用場景
從這裏我們可以看出map的存儲類型和object的存儲非常相似，都是通過鍵值對的方式存儲，並且可以通過遍歷輸出，不同的是map的鍵可以是任意的數據類型
對於map的應用場景，可以放到實現深拷貝中進行使用，存儲對象中的複雜數據類型