本篇內(nèi)容介紹了“在什么時(shí)候適合使用Map”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司長期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為靖西企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)，靖西網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

「Map」映射是一種經(jīng)典的數(shù)據(jù)結(jié)構(gòu)類型，其中數(shù)據(jù)以 「key/value」 的鍵值對形式存在

Map 基本用法

const testMap = new Map()  let str = '今天不學(xué)習(xí)',      num = 666,      keyFunction = function () {},      keySymbol = Symbol('Web'),      keyNull = null,      keyUndefined = undefined,      keyNaN = NaN  //添加鍵值對  //基本用法  testMap.set('key', 'value') // Map(1) {"key" => "value"}  testMap.set(str, '明天變辣雞')  testMap.set(num, '前端Sneaker')  testMap.set(keyFunction, '你的函數(shù)寫的好棒棒哦')  testMap.set(keySymbol, '大前端')  testMap.set(keyNull, '我是個(gè)Null')  testMap.set(keyUndefined, '我是個(gè)Undifined')  testMap.set(keyNaN, '我是個(gè)NaN')  testMap.get(function () {}) //undefined  testMap.get(Symbol('Web')) //undefined  //雖然NaN !== NaN 但是作為Map鍵名并無區(qū)別  testMap.get(NaN) //"我是個(gè)NaN"  testMap.get(Number('NaN')) //"我是個(gè)NaN"

除了NaN比較特殊外，其他「Map」的get方法都是通過對比鍵名是否相等（===）來獲取，不相等則返回undefined

比較 Map 和 Object

定義

//Map  const map = new Map();  map.set('key', 'value'); // Map(1) {"key" => "value"}  map.get('key'); // 'value'  //Object  const someObject = {};  someObject.key = 'value';  someObject.key; // 'value'

這里可以明顯看出其實(shí)其定義行為是十分相似的，想必看到這里大家還沒看出來「Map」到底在何時(shí)使用才是最佳實(shí)踐，別急接著來。

鍵名類型

JavaScript 「Object」只接收兩種類型的鍵名 String 和 Symbol，你可以使用其他類型的鍵名，但是最終 JavaScript 都會(huì)隱式轉(zhuǎn)換為字符串

const obj = {}  //直接看幾種比較特殊的鍵名  obj[true] = 'Boolean'  obj[1] = 'Number'  obj[{'前端':'Sneaker'}] = '666'  Object.keys(obj) // ["1", "true", "[object Object]"]

再來看看 「Map」 的，其接收任何類型的鍵名并保留其鍵名類型 (此處簡單舉例，詳細(xì)可看文章開頭「Map」基本使用)

const map = new Map();  map.set(1, 'value');  map.set(true, 'value');  map.set({'key': 'value'}, 'value');  for (const key of map.keys()) {    console.log(key);  }  // 1  // true  // {key: "value"}  //除此之外，Map還支持正則作為鍵名  map.set(/^1[3456789]\d{9}$/,'手機(jī)號(hào)正則')  //Map(1) {/^1[3456789]\d{9}$/ => "手機(jī)號(hào)正則"}

「Map」支持正則表達(dá)式作為鍵名，這在Object是不被允許的直接報(bào)錯(cuò)

原型 Prototype

「Object」不同于「Map」，它不僅僅是表面所看到的?！窶ap」只包含你所定義的鍵值對，但是「Object」對象具有其原型中的一些內(nèi)置屬性

const newObject = {};  newObject.constructor; // ƒ Object() { [native code] }

如果操作不當(dāng)沒有正確遍歷對象屬性，可能會(huì)導(dǎo)致出現(xiàn)問題，產(chǎn)生你意料之外的 bug

const countWords = (words) => {    const counts = { };    for (const word of words) {      counts[word] = (counts[word] || 0) + 1;    }    return counts;  };  const counts = countWords(['constructor', 'creates', 'a', 'bug']);  // {constructor: "function Object() { [native code] }1", creates: 1, a: 1, bug: 1}

這個(gè)例子靈感來源于《Effective TypeScript》[1]一書

迭代器

「Map」 是可迭代的，可以直接進(jìn)行迭代，例如forEach循環(huán)或者for...of...循環(huán)

//forEach  const map = new Map();  map.set('key1', 'value1');  map.set('key2', 'value2');  map.set('key3', 'value3');  map.forEach((value, key) => {    console.log(key, value);  });  // key1 value1  // key2 value2  // key3 value3  //for...of...  for(const entry of map) {    console.log(entry);  }  // ["key1", "value1"]  // ["key2", "value2"]  // ["key3", "value3"]

但是對于「Object」是不能直接迭代的，當(dāng)你嘗試迭代將導(dǎo)致報(bào)錯(cuò)

const object = {    key1: 'value1',    key2: 'value2',    key3: 'value3',  };  for(const entry of object) {    console.log(entry);  }  // Uncaught TypeError: object is not iterable

這時(shí)候你就需要一個(gè)額外的步驟來檢索其鍵名、鍵值或者鍵值對

for(const key of Object.keys(object)) {    console.log(key);  }  // key1  // key2  // key3  for(const value of Object.values(object)) {    console.log(value); }  // value1  // value2  // value3  for(const entry of Object.entries(object)) {    console.log(entry);  }  // ["key1", "value1"]  // ["key2", "value2"]  // ["key3", "value3"]  for(const [key,value] of Object.entries(object)) {    console.log(key,value);  }  //"key1", "value1"  //"key2", "value2"  //"key3", "value3"

當(dāng)然也可以使用for...in...進(jìn)行遍歷循環(huán)鍵名

for(const key in object) {    console.log(key);  }  // key1  // key2  // key3

元素順序和長度

Map 保持對長度的跟蹤，使其能夠在O(1)復(fù)雜度中進(jìn)行訪問

const map = new Map();  map.set('key1', 'value1');  map.set('key2', 'value2');  map.set('key3', 'value3');  map.size; // 3

而另一方面，對于「Object」而言，想要獲得對象的屬性長度，需要手動(dòng)對其進(jìn)行迭代，使其為O(n)復(fù)雜度，屬性長度為n

在上文提及的示例中，我們可以看到「Map」始終保持按插入順序返回鍵名。但「Object」卻不是。從 ES6 開始，String和Symbol鍵是按順序保存起來的，但是通過隱式轉(zhuǎn)換保存成String的鍵就是亂序的

const object = { };  object['key1'] = 'value1';  object['key0'] = 'value0';  object; // {key1: "value1", key0: "value0"}  object[20] = 'value20';  object; // {20: "value20", key1: "value1", key0: "value0"}  Object.keys(object).length; //3

Object/Map 何為最佳實(shí)踐

如上就是 「Map」 和 「Object」 的基本區(qū)別，在解決問題考慮兩者的時(shí)候就需要考慮兩者的區(qū)別。

•  當(dāng)插入順序是你解決問題時(shí)需要考慮的，并且當(dāng)前需要使用除 String 和 Symbol 以外的鍵名時(shí)，那么 「Map」 就是個(gè)最佳解決方案

•  如果需要遍歷鍵值對（并且需要考慮順序）,那我覺得還是需要優(yōu)先考慮 「Map」。

•  Map是一個(gè)純哈希結(jié)構(gòu)，而Object不是（它擁有自己的內(nèi)部邏輯）。Map 在頻繁增刪鍵值對的場景下表現(xiàn)更好，性能更高。因此當(dāng)你需要頻繁操作數(shù)據(jù)的時(shí)候也可以優(yōu)先考慮 Map

•  再舉一個(gè)實(shí)際的例子，比如有一個(gè)自定義字段的用戶操作功能，用戶可以通過表單自定義字段，那么這時(shí)候最好是使用 Map，因?yàn)楹苡锌赡軙?huì)破壞原有的對象 

const userCustomFields = {    'color':    'blue',    'size':     'medium',    'toString': 'A blue box'  };

此時(shí)用戶自定義的 toString 就會(huì)破壞到原有的對象 而 「Map」 鍵名接受任何類型，沒有影響

function isMap(value) {    return value.toString() === '[object Map]';  }  const actorMap = new Map(); actorMap.set('name', 'Harrison Ford');  actorMap.set('toString', 'Actor: Harrison Ford');  // Works!  isMap(actorMap); // => true

•  當(dāng)你需要處理一些屬性，那么 「Object」 是完全受用的，尤其是需要處理 JSON 數(shù)據(jù)的時(shí)候。由于 「Map」 可以是任意類型，因此沒有可以將其轉(zhuǎn)化為 JSON 的原生方法。 

var map = new Map()  map.set('key','value')  JSON.stringify(map)  //"{}"

•  當(dāng)你需要通正則表達(dá)式判斷去處理一些業(yè)務(wù)邏輯時(shí)，「Map」將是你的最佳解決方案 

const actions = ()=>{    const functionA = ()=>{/*do sth*/}    const functionB = ()=>{/*do sth*/}    const functionC = ()=>{/*send log*/}    returnnewMap([      [/^guest_[1-4]$/,functionA],      [/^guest_5$/,functionB],      [/^guest_.*$/,functionC],      //...    ])  } const onButtonClick = (identity,status)=>{    let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))    action.forEach(([key,value])=>value.call(this))  }

利用數(shù)組循環(huán)的特性，符合正則條件的邏輯都會(huì)被執(zhí)行，那就可以同時(shí)執(zhí)行公共邏輯和單獨(dú)邏輯，因?yàn)檎齽t的存在，你可以打開想象力解鎖更多的玩法,更多相關(guān) Map 用法樣例可以查看JavaScript 復(fù)雜判斷的更優(yōu)雅寫法

“在什么時(shí)候適合使用Map”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！