如果有一件事我知道如何做好，那就是如何跟上變化。因為如果你不這樣做，你就會落后。我親身體會到，使用熟記在心的東西，而不是嘗試“新的”東西，是多么舒服。
但不適是讓你成長的原因，無論是作為普通人還是開發者。
讓我們先深入看看“新”Map能教給我們什么。
什么是Map對象?
以下是holy source (MDN)的定義:
Map對象保存著鍵值對，并記住鍵的原始插入順序。任何值(包括對象和基本類型值)都可以用作鍵或值。
簡單來說，Map是JAVAScript原生的散列或字典數據結構。
語法: Map vs Object
Andrej發布了一個方便的備忘單，很好地展示了它們的語法差異。
原因一:你不會意外地覆蓋默認的Key
Map
默認情況下，Map不包含任何鍵。這是一個全新的開始。它只有你放進去的東西。
不多也不少。
Object
默認情況下，對象都有自己的原型，因此它包含的默認鍵可能與你自己的鍵發生沖突。
在創建新對象時，可以通過傳遞null作為原型繞過該方法:
看看它們的區別:
- New Object
- New Object帶有null原型
原因2:它可以接受任何類型的鍵
Map
map接受任何類型的鍵。這包括函數、對象和所有基本類型(string、number、boolean、symbol、undefined、null和bigint)。
let obj = { 'a': 'a' };let func = () => 'hey';//也可以使用數組語法一次初始化多個值let map = new Map([[123, true], [true, 123], [obj, 'object'], [func, 'function']])map.keys() // 123, true, Object, () => 'hey'map.get(obj) // 'object'map.get(func) // 'function'map.get({ 'a': 'a' }) // undefined//對象和函數是按引用存儲的，所以{'a':'a'}和obj是不同的對象)
Object
對象的鍵必須是字符串或符號（Symbol）。
let obj1 = { 'a': 'a' };let func = () => 'hey';let obj = { 123: true, true: 123, obj1: 'object', func: 'function' };Object.keys(obj)// ['123', 'true', 'obj1', 'func'] 轉換所有的key為字符串obj[func] //undefinedobj['func'] // 'function'原因三:map是可迭代的
Map
map本身是可迭代的。這意味著可以使用for或。foreach()循環遍歷它們。
const map = new Map();map.set(0, 'zero').set(1, 'one'); //you can chain .set()for (const [key, value] of map) {console.log(`key: ${key}, value: ${value}`);// key: 0, value: zero// key: 1, value: one//如果你只想要` values `或者` keys `for (const key of map.keys()) { // or map.values()console.log(key);map.forEach((value, key) => console.log(`key: ${key}, value: ${value}`));// key: 0, value: zero// key: 1, value: one
Object
對象是不可迭代的，盡管可以使用for in和Object.Entries()迭代它們。
let obj = { 0: 'zero', 1: 'one' }for(let key in obj){console.log(`key: ${key}, value: ${obj[key]}`)// key: 0, value: zero// key: 1, value: oneObject.entries(obj).forEach((item) => console.log(`key: ${item[0]}, value: ${item[1]}`))// key: 0, value: zero// key: 1, value: one原因四:Map可以與數組（Array）合并，并轉換為數組
Map
map和數組是100%兼容的，可以直觀地從一個映射到另一個。
下面展示了如何將Map轉換為數組
let map = new Map([ [1, 'one'], [2, 'two'] ]);Array.from(map) //[ [1, 'one'], [2, 'two'] ] 和你最初傳入的數組一模一樣//或者你可以使用展開運算符const newArr = [...map];
數組映射到Map中
let arr = [ [1, 'one'], [2, 'two'] ];new Map(arr); //{ 1 => 'one', 2 => 'two' }
下面展示了如何合并一個Map和一個Array
let map = new Map([ [1, 'one'], [2, 'two'] ]);let arr = [3, 'three']let combinedMap = new Map(...map, arr);// { 1 => 'one', 2 => 'two', 3 => 'three' }let combinedArr = [...map, arr];// [ [1, 'one'], [2, 'two'], [3, 'three'] ]
Object
將對象合并到數組中
let obj = { 1: 'one', 2: 'two'};Array.from(obj) // []//你必須這樣Array.from(Object.entries(obj))//[ ['1', 'one'],['2', 'two'] ]//或者[...Object.entries(obj)]//[ ['1', 'one'],['2', 'two'] ]原因五:你可以很容易地檢查其大小
Map
Map有一個內置的size屬性，可以返回其大小。
let map = new Map([1, 'one'], [true, 'true']);map.size // 2
Object
要檢查對象的大小，必須將object .keys()和.length結合起來
let obj = { 1: 'one', true: 'true' };Object.keys(obj).length // 2缺點呢?沒有用于序列化和解析的原生方法
Map
map原生不支持序列化或解析JSON。
文檔建議使用可以傳遞給JSON.stringify(obj, replacer)的replacer參數來實現你自己的方法。和傳入JSON.parse (string,reviver)的reviver
Object
你可以使用原生的JSON.stringify()和JSON.parse()來序列化和解析JSON對象。
2個替換objectwithmap的例子
#1計算電子商務購物車的總價格和商品
這是JavaScript .reduce()函數完整指南中的一個例子
給定下面的數組
const shoppintCart = [{ price: 10, amount: 1 },{ price: 15, amount: 3 },{ price: 20, amount: 2 },
我們希望返回一個類似{totalItems: 6, totalPrice: 45}的對象。
這是原始代碼
shoppintCart.reduce((accumulator, currentItem) => {return {totalItems: accumulator.totalItems + currentItem.amount,totalPrice:accumulator.totalPrice + currentItem.amount * currentItem.price,},{ totalItems: 0, totalPrice: 0 } //初始化對象// { totalItems: 6, totalPrice: 45 }
這是使用Map的版本
shoppintCart.reduce((accumulator, currentItem) => {accumulator.set('totalItems', accumulator.get('totalItems') + currentItem.amount);accumulator.set('totalPrice', accumulator.get('totalPrice') + currentItem.price);return accumulator;},new Map([['totalItems', 0], ['totalPrice', 0]])// { 'totalItems' => 6, 'totalPrice' => 45 }
#2從數組中刪除重復對象的另一種方法
這是我在開始學習JavaScript時在制作bookshelf應用程序時用到的一段代碼。
通過搜索如何從數組中刪除重復對象，我找到了下面分享的示例。
這是一個包含一個重復對象的數組
const books = [{ id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie' },{ id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie' },{ id: 2, title: 'The Alchemist', author: 'Paulo Coelho' },
下面是一種刪除重復內容的特殊方法:
const uniqueObjsArr = [...new Map(books.map(book => [book.id, book])).values()
上面的單行代碼發生了太多事情。讓我們把它分解成塊，這樣它就容易消化。
// 1. 將數組映射為一個包含`id`和`book`的數組const arrayOfArrays = books.map(book => [ book.id, book ])// arrayOfArrays:[ 1, {id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie' } ],[ 1, {id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie' } ],[ 2, { title: 'Alchemist', author: 'Paulo Coelho' } ]// 2.由于鍵必須是唯一的，重復的鍵會被自動刪除const mapOfUniqueObjects = new Map(arrayOfArrays)// mapOfUniqueObjects:1 => {id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie'},2 => { title: 'Alchemist', author: 'Paulo Coelho' }// 3. 將這些值轉換回數組。const finalResult = [...mapOfUniqueObjects.values()];// finalResult:{id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie'},{id: 2, title: 'The Alchemist', author: 'Paulo Coelho'}結論
如果需要存儲鍵值對(散列或字典)，請使用Map。
如果你只使用基于字符串的鍵，并且需要最大的讀取性能，那么對象可能是更好的選擇。
除此之外，用你想用的任何東西，因為，在一天結束的時候，這只是一個在互聯網上隨便一個人的文章。
以下是我們介紹的內容:
- 什么是Map對象?
- 語法:Map vs Object
- 原因一:你不會意外地覆蓋默認的密鑰
- 原因2:它可以接受任何類型的鍵
- 原因三:map是可迭代的
- 原因四:映射可以與數組合并，并轉換為數組
- 原因五:你可以很容易地檢查尺寸
- 缺點呢?沒有用于序列化和解析的原生方法
- 兩個用Map替換Object的例子
感謝您的閱讀!
