JS中的Map對(duì)象用法及說(shuō)明
JS中的Map對(duì)象
1.js創(chuàng)建map對(duì)象
var map = new Map();
2.將鍵值對(duì)放入map對(duì)象
map.set("key",value)
map.set("key1",value1)
map.set("key2",value2)3.根據(jù)key獲取map值
map.get(key)
4.刪除map指定對(duì)象
delete map[key]
或
map.delete(key)
5.循環(huán)遍歷map
map.forEach(function(key){
console.log("key",key) ?//輸出的是map中的value值
})JS中Map和普通對(duì)象
Map對(duì)象
Map 對(duì)象保存鍵值對(duì)。任何值(對(duì)象,數(shù)組,字符串,數(shù)值,布爾,null,undefined) 都可以作為一個(gè)鍵或一個(gè)值。
一個(gè)Map對(duì)象在迭代時(shí)會(huì)根據(jù)對(duì)象中元素的插入順序來(lái)進(jìn)行 — 一個(gè) for...of 循環(huán)在每次迭代后會(huì)返回一個(gè)形式為[key,value]的數(shù)組。
Object對(duì)象
Object 構(gòu)造函數(shù)創(chuàng)建一個(gè)對(duì)象包裝器。內(nèi)容為成對(duì)的名稱(字符串)與值(任何值),其中名稱通過(guò)冒號(hào)與值分隔。
Objects 和 maps 的比較
Objects 和 Maps 類似的是,它們都允許你按鍵存取一個(gè)值、刪除鍵、檢測(cè)一個(gè)鍵是否綁定了值。因此(并且也沒(méi)有其他內(nèi)建的替代方式了)過(guò)去我們一直都把對(duì)象當(dāng)成 Maps 使用。不過(guò) Maps 和 Objects 有一些重要的區(qū)別,在下列情況里使用 Map 會(huì)是更好的選擇:
| Map | Object | |
|---|---|---|
| 意外的鍵 | Map 默認(rèn)情況不包含任何鍵。只包含顯式插入的鍵。 | 一個(gè) Object 有一個(gè)原型, 原型鏈上的鍵名有可能和你自己在對(duì)象上的設(shè)置的鍵名產(chǎn)生沖突。注意: 雖然 ES5 開(kāi)始可以用 Object.create(null) 來(lái)創(chuàng)建一個(gè)沒(méi)有原型的對(duì)象,但是這種用法不太常見(jiàn)。 |
| 鍵的類型 | 一個(gè) Map的鍵可以是任意值,包括函數(shù)、對(duì)象或任意基本類型。 | 一個(gè)Object 的鍵必須是一個(gè) String 或是Symbol。 |
| 鍵的順序 | Map 中的 key 是有序的。因此,當(dāng)?shù)臅r(shí)候,一個(gè) Map 對(duì)象以插入的順序返回鍵值。 | 一個(gè) Object 的鍵是無(wú)序的注意:自ECMAScript 2015規(guī)范以來(lái),對(duì)象確實(shí)保留了字符串和Symbol鍵的創(chuàng)建順序; 因此,在只有字符串鍵的對(duì)象上進(jìn)行迭代將按插入順序產(chǎn)生鍵。 |
| Size | Map 的鍵值對(duì)個(gè)數(shù)可以輕易地通過(guò)size 屬性獲取 | Object 的鍵值對(duì)個(gè)數(shù)只能手動(dòng)計(jì)算 |
| 迭代 | Map 是 iterable 的,所以可以直接被迭代。 | 迭代一個(gè)Object需要以某種方式獲取它的鍵然后才能迭代。 |
| 性能 | 在頻繁增刪鍵值對(duì)的場(chǎng)景下表現(xiàn)更好。 | 在頻繁添加和刪除鍵值對(duì)的場(chǎng)景下未作出優(yōu)化。 |
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
談?wù)劄槭裁茨愕?JavaScript 代碼如此冗長(zhǎng)
這篇文章主要介紹了談?wù)劄槭裁茨愕?JavaScript 代碼如此冗長(zhǎng),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
基于Leaflet的Webgis經(jīng)緯網(wǎng)格功能實(shí)現(xiàn)
本文將介紹一款Leaflet的經(jīng)緯網(wǎng)插件,基于這款經(jīng)緯網(wǎng)插件,詳細(xì)介紹如何實(shí)現(xiàn)經(jīng)緯網(wǎng)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2023-12-12
詳解JavaScript中的數(shù)組合并方法和對(duì)象合并方法
這篇文章主要介紹了JavaScript中的數(shù)組合并方法和對(duì)象合并方法,通過(guò)代碼的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05
JavaScript快速切換繁體中文和簡(jiǎn)體中文的方法及網(wǎng)站支持簡(jiǎn)繁體切換的絕招
這篇文章主要介紹了JavaScript快速切換繁體中文和簡(jiǎn)體中文方法的相關(guān)資料,需要的朋友可以參考下2016-03-03
JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器小程序
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器小程序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
微信小程序動(dòng)態(tài)評(píng)分展示/五角星展示/半顆星展示/自定義長(zhǎng)度展示功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序動(dòng)態(tài)評(píng)分展示/五角星展示/半顆星展示/自定義長(zhǎng)度展示的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
微信小程序錯(cuò)誤this.setData報(bào)錯(cuò)及解決過(guò)程
這篇文章主要介紹了微信小程序錯(cuò)誤this.setData報(bào)錯(cuò)及解決過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09

