溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

發(fā)布時(shí)間：2022-01-25 08:58:27 來源：億速云 閱讀：112 作者：小新 欄目：開發(fā)技術(shù)

這篇“JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

1.什么是 Map

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

Map 保存鍵值對(duì)，并且能夠記住鍵的原始插入順序。

那么它和 Object 有什么區(qū)別 ？

對(duì)象一般用字符串作鍵

const obj = {
	val : "object"
}

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

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);

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

所以，在鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)中，Map 比 Object 更為合適

2. Map 構(gòu)造函數(shù)

對(duì)于 Set 的構(gòu)造函數(shù)的參數(shù)，可以傳遞以下幾種形式。

2.1) 數(shù)組

注意，要傳遞的是二維數(shù)組，因?yàn)槎S數(shù)組才能體現(xiàn)出鍵值對(duì)

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

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

2.2) Set

以 Set 作為參數(shù)，也要體現(xiàn)出鍵值對(duì)形式

對(duì) Set 不了解的，想了解的可以看看下面這篇文章：JavaScript—Set

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

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

2.3) Map

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

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

這里相當(dāng)于把m1復(fù)制過去，給了m2，不過它們不是同一個(gè) Map

console.log(m2 === m1);

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

綜上，Map 構(gòu)造函數(shù)的參數(shù)要能體現(xiàn)出鍵值對(duì)的形式。

3. Map 的實(shí)例屬性和方法

3.1) Map 的屬性

size

Map 的屬性，有一個(gè)屬性size，用來存儲(chǔ)它的成員個(gè)數(shù)

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

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

3.2) Map 的方法

set

給 Map 中添加成員

const m = new Map();
// 它的參數(shù)為兩個(gè)，第一個(gè)為鍵，第二個(gè)為值
m.set('val', 'map');
console.log(m);
// 可以連綴 Set
m.set('orange', 'fruit').set('cat', 'animal');
console.log(m);
// 添加的新成員如果鍵已經(jīng)存在了，那么將會(huì)覆蓋它
// 鍵的順序不會(huì)發(fā)生改變，因?yàn)?nbsp;Map 能夠記住鍵的原始插入順序
m.set('orange', 'sweet');
console.log(m);

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

get

通過鍵獲取 Map 的成員

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

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

has

用來判斷 Map 是否含有某個(gè)鍵

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

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

delete

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

const m = new Map([
    ['val', 'map'],
    ['orange', 'fruit'],
    ['cat', 'animal'],
    [true, 'false']
]);
m.delete('cat');
// 刪除不存在的成員，將什么也不會(huì)發(fā)生，也不會(huì)報(bào)錯(cuò)
m.delete('true');
console.log(m);

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

clear

刪除 Map 的所有成員

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

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

forEach

用來遍歷 Map 的成員

它有兩個(gè)參數(shù)，第一個(gè)參數(shù)為回調(diào)函數(shù)，第二個(gè)參數(shù)設(shè)定回調(diào)函數(shù)中this指向什么，即

m.forEach(回調(diào)函數(shù), 回調(diào)函數(shù)的指向)

先來看第一個(gè)參數(shù)

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

通過一個(gè)例子理解一下：

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);
});

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

再來看第二個(gè)參數(shù)

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);

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

4. Map的注意事項(xiàng)

Map 對(duì)鍵名是否相同的判斷基本遵循嚴(yán)格相等===的判斷

不過對(duì)于NaN，在 Set 中，NaN 等于 NaN

5. Map的使用場(chǎng)景

  • 只需要鍵值對(duì)的結(jié)構(gòu)時(shí)，即 key => value 的結(jié)構(gòu)

  • 需要字符串以外的鍵或者值

舉個(gè)例子來看看 Map 的應(yīng)用：

對(duì)DOM元素進(jìn)行操作

先寫一個(gè) 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>

此時(shí)效果是這樣的：

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

然后對(duì)p元素進(jìn)行修改：

<script>
    // 利用數(shù)組解構(gòu)賦值將 p 元素獲取的同時(shí)解構(gòu)出來
    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>

JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的

以上是“JavaScript中Map數(shù)據(jù)結(jié)構(gòu)是怎么樣的”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手