日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
什么時候適合使用Map而不是Object

首先我們先有請「Map」簡單介紹下自己

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

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

  Map Object
默認(rèn)值 默認(rèn)不包含任何值，只包含顯式插入的鍵 一個 Object 有一個原型，原型上的鍵名有可能和自己對象上設(shè)置的鍵名沖突
類型 任意 String 或 Symbol
長度 鍵值對個數(shù)通過 size 屬性獲取 鍵值對個數(shù)只能手動計算
性能 頻繁增刪鍵值對的場景下表現(xiàn)更好 頻繁添加和刪除鍵值對的場景下未作出優(yōu)化

Map 基本用法

接受任何類型的鍵 劃重點，是任何 any!!!

 
 
 
 
    
  
  
  
  
  1. const testMap = new Map() 
    2. 
  
  
  
  
  2. let str = '今天不學(xué)習(xí)', 
    3. 
  
  
  
  
  3.     num = 666, 
    4. 
  
  
  
  
  4.     keyFunction = function () {}, 
    5. 
  
  
  
  
  5.     keySymbol = Symbol('Web'), 
    6. 
  
  
  
  
  6.     keyNull = null, 
    7. 
  
  
  
  
  7.     keyUndefined = undefined, 
    8. 
  
  
  
  
  8.     keyNaN = NaN 
    9. 
  
  
  
  
  9. //添加鍵值對 
    10. 
  
  
  
  
  10. //基本用法 
    11. 
  
  
  
  
  11. testMap.set('key', 'value') // Map(1) {"key" => "value"} 
    12. 
  
  
  
  
  12. testMap.set(str, '明天變辣雞') 
    13. 
  
  
  
  
  13. testMap.set(num, '前端Sneaker') 
    14. 
  
  
  
  
  14. testMap.set(keyFunction, '你的函數(shù)寫的好棒棒哦') 
    15. 
  
  
  
  
  15. testMap.set(keySymbol, '大前端') 
    16. 
  
  
  
  
  16. testMap.set(keyNull, '我是個Null') 
    17. 
  
  
  
  
  17. testMap.set(keyUndefined, '我是個Undifined') 
    18. 
  
  
  
  
  18. testMap.set(keyNaN, '我是個NaN') 
    19. 
  
  
  
  
  19. testMap.get(function () {}) //undefined 
    20. 
  
  
  
  
  20. testMap.get(Symbol('Web')) //undefined 
    21. 
  
  
  
  
  21. //雖然NaN !== NaN 但是作為Map鍵名并無區(qū)別 
    22. 
  
  
  
  
  22. testMap.get(NaN) //"我是個NaN" 
    23. 
  
  
  
  
  23. testMap.get(Number('NaN')) //"我是個NaN"
    24.

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

比較 Map 和 Object

定義

 
 
 
 
    
  
  
  
  
  1. //Map 
    2. 
  
  
  
  
  2. const map = new Map(); 
    3. 
  
  
  
  
  3. map.set('key', 'value'); // Map(1) {"key" => "value"} 
    4. 
  
  
  
  
  4. map.get('key'); // 'value' 
    5. 
  
  
  
  
  5. //Object 
    6. 
  
  
  
  
  6. const someObject = {}; 
    7. 
  
  
  
  
  7. someObject.key = 'value'; 
    8. 
  
  
  
  
  8. someObject.key; // 'value'
    9.

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

鍵名類型

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

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

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

 
 
 
 
    
  
  
  
  
  1. const map = new Map(); 
    2. 
  
  
  
  
  2. map.set(1, 'value'); 
    3. 
  
  
  
  
  3. map.set(true, 'value'); 
    4. 
  
  
  
  
  4. map.set({'key': 'value'}, 'value'); 
    5. 
  
  
  
  
  5. for (const key of map.keys()) { 
    6. 
  
  
  
  
  6.   console.log(key); 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8. // 1 
    9. 
  
  
  
  
  9. // true 
    10. 
  
  
  
  
  10. // {key: "value"} 
    11. 
  
  
  
  
  11. //除此之外，Map還支持正則作為鍵名 
    12. 
  
  
  
  
  12. map.set(/^1[3456789]\d{9}$/,'手機(jī)號正則') 
    13. 
  
  
  
  
  13. //Map(1) {/^1[3456789]\d{9}$/ => "手機(jī)號正則"}
    14.

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

原型 Prototype

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

 
 
 
 
    
  
  
  
  
  1. const newObject = {}; 
    2. 
  
  
  
  
  2. newObject.constructor; // ? Object() { [native code] }
    3.

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

 
 
 
 
    
  
  
  
  
  1. const countWords = (words) => { 
    2. 
  
  
  
  
  2.   const counts = { }; 
    3. 
  
  
  
  
  3.   for (const word of words) { 
    4. 
  
  
  
  
  4.     counts[word] = (counts[word] || 0) + 1; 
    5. 
  
  
  
  
  5.   } 
    6. 
  
  
  
  
  6.   return counts; 
    7. 
  
  
  
  
  7. }; 
    8. 
  
  
  
  
  8. const counts = countWords(['constructor', 'creates', 'a', 'bug']); 
    9. 
  
  
  
  
  9. // {constructor: "function Object() { [native code] }1", creates: 1, a: 1, bug: 1}
    10.

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

迭代器

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

 
 
 
 
    
  
  
  
  
  1. //forEach 
    2. 
  
  
  
  
  2. const map = new Map(); 
    3. 
  
  
  
  
  3. map.set('key1', 'value1'); 
    4. 
  
  
  
  
  4. map.set('key2', 'value2'); 
    5. 
  
  
  
  
  5. map.set('key3', 'value3'); 
    6. 
  
  
  
  
  6. map.forEach((value, key) => { 
    7. 
  
  
  
  
  7.   console.log(key, value); 
    8. 
  
  
  
  
  8. }); 
    9. 
  
  
  
  
  9. // key1 value1 
    10. 
  
  
  
  
  10. // key2 value2 
    11. 
  
  
  
  
  11. // key3 value3 
    12. 
  
  
  
  
  12. //for...of... 
    13. 
  
  
  
  
  13. for(const entry of map) { 
    14. 
  
  
  
  
  14.   console.log(entry); 
    15. 
  
  
  
  
  15. } 
    16. 
  
  
  
  
  16. // ["key1", "value1"] 
    17. 
  
  
  
  
  17. // ["key2", "value2"] 
    18. 
  
  
  
  
  18. // ["key3", "value3"]
    19.

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

 
 
 
 
    
  
  
  
  
  1. const object = { 
    2. 
  
  
  
  
  2.   key1: 'value1', 
    3. 
  
  
  
  
  3.   key2: 'value2', 
    4. 
  
  
  
  
  4.   key3: 'value3', 
    5. 
  
  
  
  
  5. }; 
    6. 
  
  
  
  
  6. for(const entry of object) { 
    7. 
  
  
  
  
  7.   console.log(entry); 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9. // Uncaught TypeError: object is not iterable
    10.

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

 
 
 
 
    
  
  
  
  
  1. for(const key of Object.keys(object)) { 
    2. 
  
  
  
  
  2.   console.log(key); 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. // key1 
    5. 
  
  
  
  
  5. // key2 
    6. 
  
  
  
  
  6. // key3 
    7. 
  
  
  
  
  7. for(const value of Object.values(object)) { 
    8. 
  
  
  
  
  8.   console.log(value);
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10. // value1 
    11. 
  
  
  
  
  11. // value2 
    12. 
  
  
  
  
  12. // value3 
    13. 
  
  
  
  
  13. for(const entry of Object.entries(object)) { 
    14. 
  
  
  
  
  14.   console.log(entry); 
    15. 
  
  
  
  
  15. } 
    16. 
  
  
  
  
  16. // ["key1", "value1"] 
    17. 
  
  
  
  
  17. // ["key2", "value2"] 
    18. 
  
  
  
  
  18. // ["key3", "value3"] 
    19. 
  
  
  
  
  19. for(const [key,value] of Object.entries(object)) { 
    20. 
  
  
  
  
  20.   console.log(key,value); 
    21. 
  
  
  
  
  21. } 
    22. 
  
  
  
  
  22. //"key1", "value1" 
    23. 
  
  
  
  
  23. //"key2", "value2" 
    24. 
  
  
  
  
  24. //"key3", "value3"
    25.

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

 
 
 
 
    
  
  
  
  
  1. for(const key in object) { 
    2. 
  
  
  
  
  2.   console.log(key); 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. // key1 
    5. 
  
  
  
  
  5. // key2 
    6. 
  
  
  
  
  6. // key3
    7.

元素順序和長度

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. const object = { }; 
    2. 
  
  
  
  
  2. object['key1'] = 'value1'; 
    3. 
  
  
  
  
  3. object['key0'] = 'value0'; 
    4. 
  
  
  
  
  4. object; // {key1: "value1", key0: "value0"} 
    5. 
  
  
  
  
  5. object[20] = 'value20'; 
    6. 
  
  
  
  
  6. object; // {20: "value20", key1: "value1", key0: "value0"} 
    7. 
  
  
  
  
  7. Object.keys(object).length; //3
    8.

Object/Map 何為最佳實踐

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

  •  當(dāng)插入順序是你解決問題時需要考慮的，并且當(dāng)前需要使用除 String 和 Symbol 以外的鍵名時，那么 「Map」 就是個最佳解決方案
  •  如果需要遍歷鍵值對（并且需要考慮順序）,那我覺得還是需要優(yōu)先考慮 「Map」。
  •  Map是一個純哈希結(jié)構(gòu)，而Object不是（它擁有自己的內(nèi)部邏輯）。Map 在頻繁增刪鍵值對的場景下表現(xiàn)更好，性能更高。因此當(dāng)你需要頻繁操作數(shù)據(jù)的時候也可以優(yōu)先考慮 Map
  •  再舉一個實際的例子，比如有一個自定義字段的用戶操作功能，用戶可以通過表單自定義字段，那么這時候最好是使用 Map，因為很有可能會破壞原有的對象
 
 
 
 
    
  
  
  
  
  1. const userCustomFields = { 
    2. 
  
  
  
  
  2.   'color':    'blue', 
    3. 
  
  
  
  
  3.   'size':     'medium', 
    4. 
  
  
  
  
  4.   'toString': 'A blue box' 
    5. 
  
  
  
  
  5. };
    6.

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

 
 
 
 
    
  
  
  
  
  1. function isMap(value) { 
    2. 
  
  
  
  
  2.   return value.toString() === '[object Map]'; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. const actorMap = new Map();
    5. 
  
  
  
  
  5. actorMap.set('name', 'Harrison Ford'); 
    6. 
  
  
  
  
  6. actorMap.set('toString', 'Actor: Harrison Ford'); 
    7. 
  
  
  
  
  7. // Works! 
    8. 
  
  
  
  
  8. isMap(actorMap); // => true
    9.
  •  當(dāng)你需要處理一些屬性，那么 「Object」 是完全受用的，尤其是需要處理 JSON 數(shù)據(jù)的時候。由于 「Map」 可以是任意類型，因此沒有可以將其轉(zhuǎn)化為 JSON 的原生方法。
 
 
 
 
    
  
  
  
  
  1. var map = new Map() 
    2. 
  
  
  
  
  2. map.set('key','value') 
    3. 
  
  
  
  
  3. JSON.stringify(map)  //"{}"
    4.
  •  當(dāng)你需要通正則表達(dá)式判斷去處理一些業(yè)務(wù)邏輯時，「Map」將是你的最佳解決方案
 
 
 
 
    
  
  
  
  
  1. const actions = ()=>{ 
    2. 
  
  
  
  
  2.   const functionA = ()=>{/*do sth*/} 
    3. 
  
  
  
  
  3.   const functionB = ()=>{/*do sth*/} 
    4. 
  
  
  
  
  4.   const functionC = ()=>{/*send log*/} 
    5. 
  
  
  
  
  5.   returnnewMap([ 
    6. 
  
  
  
  
  6.     [/^guest_[1-4]$/,functionA], 
    7. 
  
  
  
  
  7.     [/^guest_5$/,functionB], 
    8. 
  
  
  
  
  8.     [/^guest_.*$/,functionC], 
    9. 
  
  
  
  
  9.     //... 
    10. 
  
  
  
  
  10.   ]) 
    11. 
  
  
  
  
  11. }
    12. 
  
  
  
  
  12. const onButtonClick = (identity,status)=>{ 
    13. 
  
  
  
  
  13.   let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`))) 
    14. 
  
  
  
  
  14.   action.forEach(([key,value])=>value.call(this)) 
    15. 
  
  
  
  
  15. }
    16.

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

總結(jié)：

「Object」對象通?？梢院芎玫谋４娼Y(jié)構(gòu)化數(shù)據(jù)，但是也有相應(yīng)的局限性：

  1.  鍵名接受類型只能用 String 或者 Symbol
  2.  自定義的鍵名容易與原型繼承的屬性鍵名沖突（例如 toString，constructor 等）
  3.  對象/正則無法用作鍵名 而這些問題通過 「Map」 都可以解決，并且提供了諸如迭代器和易于進(jìn)行大小查找之類的好處

不要將「Map」作為普通「Object」的替代品，而應(yīng)該是普通對象的補(bǔ)充


網(wǎng)站名稱：什么時候適合使用Map而不是Object
瀏覽地址：http://www.5511xx.com/article/dppjdpe.html