JavaScript中的Map數據結構詳解

Posted on by

1. 什麼是 Map

Map 就是映射的意思，即從鍵到值的映射。

Map 保存鍵值對，並且能夠記住鍵的原始插入順序。

那麼它和 Object 有什麼區別 ？

對象一般用字符串作鍵

const obj = {
	val : "object"
}

任何值(對象或者原始值) 都可以作為 Map 的一個鍵或一個值

const m = new Map();;
m.set('val', 'map');
m.set(1, 'number');
m.set(new Set([1, 2]), 'set');
m.set({}, 'object');
console.log(m);

在這裡插入圖片描述

所以，在鍵值對的數據結構中，Map 比 Object 更為合適

2. Map 構造函數

對於 Set 的構造函數的參數，可以傳遞以下幾種形式。

2.1) 數組

註意，要傳遞的是二維數組，因為二維數組才能體現出鍵值對

const m = new Map([
    ['val', 'map'],
    ['apple', 'fruit']
]);
console.log(m);

在這裡插入圖片描述

2.2) Set

以 Set 作為參數，也要體現出鍵值對形式

對 Set 不瞭解的，想瞭解的可以看看下面這篇文章：JavaScript—Set

const m = new Map(new Set([
    ['tigger', 'animal'],
    ['orange', 'fruit']
]));
console.log(m);

在這裡插入圖片描述

2.3) Map

const m1 = new Map([
    ['watermelon', 'fruit'],
    ['cat', 'animal']
])
const m2 = new Map(m1);
console.log(m2);

在這裡插入圖片描述

這裡相當於把m1復制過去，給瞭m2，不過它們不是同一個 Map

console.log(m2 === m1);

在這裡插入圖片描述

綜上，Map 構造函數的參數要能體現出鍵值對的形式。

3. Map 的實例屬性和方法

3.1) Map 的屬性

size

Map 的屬性，有一個屬性size，用來存儲它的成員個數

const m = new Map([
    ['val', 'map'],
    ['cat', 'animal'],
    ['orange', 'fruit']
]);
console.log(m.size);

在這裡插入圖片描述

3.2) Map 的方法

set

給 Map 中添加成員

const m = new Map();
// 它的參數為兩個，第一個為鍵，第二個為值
m.set('val', 'map');
console.log(m);
// 可以連綴 Set
m.set('orange', 'fruit').set('cat', 'animal');
console.log(m);
// 添加的新成員如果鍵已經存在瞭，那麼將會覆蓋它
// 鍵的順序不會發生改變，因為 Map 能夠記住鍵的原始插入順序
m.set('orange', 'sweet');
console.log(m);

在這裡插入圖片描述

get

通過鍵獲取 Map 的成員

const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);
console.log(m.get('val'));
console.log(m.get(true));
// 獲取不存在的鍵時，會返回 undefined
console.log(m.get('tigger'));

在這裡插入圖片描述

has

用來判斷 Map 是否含有某個鍵

const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);
console.log(m.has(true));
console.log(m.has('true'));

在這裡插入圖片描述

delete

通過鍵，來刪除 Map 中的成員

const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);
m.delete('cat');
// 刪除不存在的成員，將什麼也不會發生，也不會報錯
m.delete('true');
console.log(m);

在這裡插入圖片描述

clear

刪除 Map 的所有成員

const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);
m.clear();
console.log(m);

在這裡插入圖片描述

forEach

用來遍歷 Map 的成員

它有兩個參數，第一個參數為回調函數，第二個參數設定回調函數中this指向什麼，即

m.forEach(回調函數, 回調函數的指向)

先來看第一個參數

m.forEach(function(value, key, map){
	value 就是 Map 的值
	key 就是 Map 的鍵
	map 就是前面Map的本身，即這裡 map === m
});

通過一個例子理解一下：

const m = new Map([    ['val', 'map'],    ['orange', 'fruit'],    ['cat', 'animal'],    [true, 'false']]);m.forEach(function(value, key, map) {    console.log(value, key, map == m);});const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);

m.forEach(function(value, key, map) {
    console.log(value, key, map == m);
});

在這裡插入圖片描述

再來看第二個參數

const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);

m.forEach(function(value, key, map) {
    console.log(this);
}, document);
const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);

m.forEach(function(value, key, map) {
    console.log(this);
}, document);

在這裡插入圖片描述

4. Map的註意事項

Map 對鍵名是否相同的判斷基本遵循嚴格相等===的判斷

不過對於NaN，在 Set 中，NaN 等於 NaN

5. Map的使用場景

  • 隻需要鍵值對的結構時，即 key => value 的結構
  • 需要字符串以外的鍵或者值

舉個例子來看看 Map 的應用：

對DOM元素進行操作

先寫一個 HTML 代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</body>
</html>

此時效果是這樣的：

在這裡插入圖片描述

然後對p元素進行修改：

<script>
    // 利用數組解構賦值將 p 元素獲取的同時解構出來
    const [p1, p2, p3] = document.querySelectorAll('p');
    const m = new Map([
        [p1, new Map([
            ['color', 'blue'],
            ['fontSize', '40px']
        ])], 
        [p2,  new Map([
            ['color', 'orange'],
            ['fontSize', '40px']
        ])], 
        [p3,  new Map([
            ['color', 'green'],
            ['fontSize', '40px']
        ])]
    ]);

    m.forEach((propMap, elem) => {
        propMap.forEach((value, prop) => {
            elem.style[prop] = value;
        });
    });
</script>

在這裡插入圖片描述

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：