JS中的Map對象用法及說明
JS中的Map對象
1.js創(chuàng)建map對象
var map = new Map();
2.將鍵值對放入map對象
map.set("key",value)
map.set("key1",value1)
map.set("key2",value2)3.根據(jù)key獲取map值
map.get(key)
4.刪除map指定對象
delete map[key]
或
map.delete(key)
5.循環(huán)遍歷map
map.forEach(function(key){
console.log("key",key) ?//輸出的是map中的value值
})JS中Map和普通對象
Map對象
Map 對象保存鍵值對。任何值(對象，數(shù)組，字符串，數(shù)值，布爾，null，undefined) 都可以作為一個(gè)鍵或一個(gè)值。
一個(gè)Map對象在迭代時(shí)會(huì)根據(jù)對象中元素的插入順序來進(jìn)行 — 一個(gè) for...of 循環(huán)在每次迭代后會(huì)返回一個(gè)形式為[key，value]的數(shù)組。
Object對象
Object 構(gòu)造函數(shù)創(chuàng)建一個(gè)對象包裝器。內(nèi)容為成對的名稱（字符串）與值（任何值），其中名稱通過冒號(hào)與值分隔。
Objects 和 maps 的比較
Objects 和 Maps 類似的是，它們都允許你按鍵存取一個(gè)值、刪除鍵、檢測一個(gè)鍵是否綁定了值。因此（并且也沒有其他內(nèi)建的替代方式了）過去我們一直都把對象當(dāng)成 Maps 使用。不過 Maps 和 Objects 有一些重要的區(qū)別，在下列情況里使用 Map 會(huì)是更好的選擇：
| Map | Object | |
|---|---|---|
| 意外的鍵 | Map 默認(rèn)情況不包含任何鍵。只包含顯式插入的鍵。 | 一個(gè) Object 有一個(gè)原型, 原型鏈上的鍵名有可能和你自己在對象上的設(shè)置的鍵名產(chǎn)生沖突。注意: 雖然 ES5 開始可以用 Object.create(null) 來創(chuàng)建一個(gè)沒有原型的對象，但是這種用法不太常見。 |
| 鍵的類型 | 一個(gè) Map的鍵可以是任意值，包括函數(shù)、對象或任意基本類型。 | 一個(gè)Object 的鍵必須是一個(gè) String 或是Symbol。 |
| 鍵的順序 | Map 中的 key 是有序的。因此，當(dāng)?shù)臅r(shí)候，一個(gè) Map 對象以插入的順序返回鍵值。 | 一個(gè) Object 的鍵是無序的注意：自ECMAScript 2015規(guī)范以來，對象確實(shí)保留了字符串和Symbol鍵的創(chuàng)建順序； 因此，在只有字符串鍵的對象上進(jìn)行迭代將按插入順序產(chǎn)生鍵。 |
| Size | Map 的鍵值對個(gè)數(shù)可以輕易地通過size 屬性獲取 | Object 的鍵值對個(gè)數(shù)只能手動(dòng)計(jì)算 |
| 迭代 | Map 是 iterable 的，所以可以直接被迭代。 | 迭代一個(gè)Object需要以某種方式獲取它的鍵然后才能迭代。 |
| 性能 | 在頻繁增刪鍵值對的場景下表現(xiàn)更好。 | 在頻繁添加和刪除鍵值對的場景下未作出優(yōu)化。 |
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于js控制滾動(dòng)條滾動(dòng)的兩種簡單方法,通過JavaScript可以直接控制滾動(dòng)條的位置,從而達(dá)到鎖定滾動(dòng)條的效果,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
淺析script標(biāo)簽中的defer與async屬性
最近在網(wǎng)上看到一個(gè)前輩在寫script標(biāo)簽的時(shí)候，居然同時(shí)寫了async和defer屬性，想著這是什么意思呢？所以決定深入的了解下這其中的學(xué)問，以下這篇文章就是個(gè)人在學(xué)習(xí)了之后的一些總結(jié)分析，有需要的朋友們可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
在JavaScript中,繼承允許一個(gè)對象從另一個(gè)對象繼承屬性和方法,本文將詳細(xì)介紹JavaScript中的繼承機(jī)制,包括原型鏈、構(gòu)造函數(shù)、原型對象以及幾種實(shí)現(xiàn)繼承的方法,需要的朋友可以參考下2024-04-04
微信小程序表單驗(yàn)證插件WxValidate的二次封裝功能（終極版）
這篇文章主要介紹了微信小程序表單驗(yàn)證插件WxValidate的二次封裝功能（終極版），文中給大家提到了最終版與前面2版的不同點(diǎn),需要的朋友可以參考下2019-09-09
這里給大家整理的是本人上個(gè)項(xiàng)目中所用到的js方法，都是些非常常用的javascript方法，相信小伙伴們也能經(jīng)常用到，這里整理出來分享給大家。2015-01-01
javascript實(shí)現(xiàn)簡單下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡單下拉菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一2022-08-08
JS實(shí)現(xiàn)圖片懶加載(lazyload)過程詳解
這篇文章主要介紹了JS實(shí)現(xiàn)圖片懶加載(lazyload)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果
這篇文章主要介紹了JS如何實(shí)現(xiàn)手機(jī)端輸入驗(yàn)證碼效果,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
心跳檢測是指在WebSocket連接過程中定時(shí)向服務(wù)端發(fā)送和接收心跳消息,來確定當(dāng)前連接是否是正常狀態(tài)的檢測機(jī)制,斷開重連是指在WebSocket不正常斷開連接后,進(jìn)行重新連接的策略,下面我們就來看看這二者的具體實(shí)現(xiàn)吧2024-01-01
本文給大家分享的是使用javascript實(shí)現(xiàn)判斷微信版本號(hào)以及判斷是否在內(nèi)置的微信瀏覽器中打開的代碼，十分的簡單實(shí)用，有需要的小伙伴可以參考下。2015-05-05