JavaScript中的Map數(shù)據(jù)結構詳解

第JavaScript中的Map數(shù)據(jù)結構詳解目錄1.什么是Map2.Map構造函數(shù)2.1)數(shù)組2.2)Set2.3)Map3.Map的實例屬性和方法3.1)Map的屬性size3.2)Map的方法setgethasdeleteclearforEach4.Map的注意事項5.Map的使用場景總結

1.什么是Map

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

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

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

對象一般用字符串作鍵

constobj={

val:"object"

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

constm=newMap();;

m.set('val','map');

m.set(1,'number');

m.set(newSet([1,2]),'set');

m.set({},'object');

console.log(m);

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

2.Map構造函數(shù)

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

2.1)數(shù)組

注意，要傳遞的是二維數(shù)組，因為二維數(shù)組才能體現(xiàn)出鍵值對

constm=newMap([

['val','map'],

['apple','fruit']

console.log(m);

2.2)Set

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

對Set不了解的，想了解的可以看看下面這篇文章：JavaScriptSet

constm=newMap(newSet([

['tigger','animal'],

['orange','fruit']

console.log(m);

2.3)Map

constm1=newMap([

['watermelon','fruit'],

['cat','animal']

constm2=newMap(m1);

console.log(m2);

這里相當于把m1復制過去，給了m2，不過它們不是同一個Map

console.log(m2===m1);

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

3.Map的實例屬性和方法

3.1)Map的屬性

size

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

constm=newMap([

['val','map'],

['cat','animal'],

['orange','fruit']

console.log(m.size);

3.2)Map的方法

set

給Map中添加成員

constm=newMap();

//它的參數(shù)為兩個，第一個為鍵，第二個為值

m.set('val','map');

console.log(m);

//可以連綴Set

m.set('orange','fruit').set('cat','animal');

console.log(m);

//添加的新成員如果鍵已經(jīng)存在了，那么將會覆蓋它

//鍵的順序不會發(fā)生改變，因為Map能夠記住鍵的原始插入順序

m.set('orange','sweet');

console.log(m);

get

通過鍵獲取Map的成員

constm=newMap([

['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是否含有某個鍵

constm=newMap([

['val','map'],

['orange','fruit'],

['cat','animal'],

[true,'false']

console.log(m.has(true));

console.log(m.has('true'));

delete

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

constm=newMap([

['val','map'],

['orange','fruit'],

['cat','animal'],

[true,'false']

m.delete('cat');

//刪除不存在的成員，將什么也不會發(fā)生，也不會報錯

m.delete('true');

console.log(m);

clear

刪除Map的所有成員

constm=newMap([

['val','map'],

['orange','fruit'],

['cat','animal'],

[true,'false']

m.clear();

console.log(m);

forEach

用來遍歷Map的成員

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

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

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

m.forEach(function(value,key,map){

value就是Map的值

key就是Map的鍵

map就是前面Map的本身，即這里map===m

通過一個例子理解一下：

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

['val','map'],

['orange','fruit'],

['cat','animal'],

[true,'false']

m.forEach(function(value,key,map){

console.log(value,key,map==m);

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

constm=newMap([

['val','map'],

['orange','fruit'],

['cat','animal'],

[true,'false']

m.forEach(function(value,key,map){

console.log(this);

},document);

constm=newMap([

['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代碼：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleMap/title

/head

body

pone/p

ptwo/p

pthree/p

/body

/html

此時效果是這樣的：

然后對p元素進行修改：

script

//利用數(shù)組解構賦值將p元素獲取的同時解構出來

const[p1,p2,p3]=document.querySelectorAll('p');

constm=newMap([

[p1,newMap([

['color','blue'],

['fontSize','40px']

])],

[p2,newMap([

['color','orange'],

['fontSize','40px']

])],

[p3,ne