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