首頁 > web前端 > 前端問答 > es6中的map是什麼意思

es6中的map是什麼意思

WBOY
發布: 2022-03-30 18:41:32
原創
4281 人瀏覽過

在es6中,map是一種資料結構,是「key-value」的集合,key可以是任意型別的資料;map提供了「值與值」的對應,是一種更完善的hash結構實現,語法為「new Map([iterable])」。

es6中的map是什麼意思

本教學操作環境:windows10系統、ECMAScript 6.0版、Dell G3電腦。

es6中的map是什麼意思

什麼是Map

之前ES5 中是沒有Map 這種資料集合的,ES6才把它添加進來了。

Map 是 key-value 的集合,key 可以是任意類型的數據,類似於對象,但對象的 key 只能是字串。

ES6 提供了 Map 資料結構。它類似於對象,也是鍵值對的集合,但是“鍵”的範圍不限於字串,各種類型的值(包括對象)都可以當作鍵。

也就是說,Object 結構提供了「字串—值」的對應,Map 結構提供了「值—值」的對應,是一種更完善的 Hash 結構實作。

如果你需要「鍵值對」的資料結構,Map 比 Object 更合適。

語法

new Map([iterable])
登入後複製

Iterable 可以是數組或其他iterable 對象,其元素為鍵值對(兩個元素的數組,例如: [[ 1, ' one' ],[ 2, 'two' ]])。

每個鍵值對都會加入到新的 Map。

null 會被當成 undefined。

Object 和Map 的比較:

Objects 和Maps 類似的是,它們都允許你按鍵存取一個值、刪除鍵、偵測一個鍵是否綁定了值。因此(也沒有其他內建的替代方式了)過去我們一直都把物件當成 Maps 使用。不過Maps 和Objects 有一些重要的區別,在下列情況下使用Map 會是更好的選擇

  • #一個Object的鍵只能是字串或Symbols,但一個Map 的鍵可以是任意值,包括函數、物件、基本型別。

  • Map 中的鍵值是有序的,而新增到物件中的鍵則不是。因此,當對它進行遍歷時,Map 物件是按插入的順序傳回鍵值。

  • 你可以透過 size 屬性直接取得一個 Map 的鍵值對數,而 Object 的鍵值對個數只能手動計算。

  • Map 可直接進行迭代,而 Object 的迭代則需要先 取得它的鍵數組,然後再進行迭代。

  • Object 都有自己的原型,原型鏈上的鍵名有可能和你自己在物件上的設定的鍵名產生衝突。雖然 ES5 一開始可以用 map = Object.create(null) 來建立一個沒有原型的對象,但這種用法不太常見。

  • Map 在涉及頻繁增刪鍵值對的場景下會有些效能優勢。

範例如下:

// 字符串作为key,和JS对象类似
var map = new Map()
// set
map.set('name', 'John')//两个参数,分为对应map中key,value,  推进去的时候会自动检查类型,Object,String,Array等l
map.set('age', 29)
// get
map.get('name') // John
map.get('age')  // 29
这么对代码,看起来确实没有JS对象简洁
但Map的强大之处在于它的key可以是任意类型
// 对象作为key演示
var xy = {x: 10, y: 20}   // 坐标
var wh = {w: 100, h: 200} // 宽高
var map = new Map()
// set
map.set(xy, '坐标')
map.set(wh, '宽高')
// get
map.get(xy) // '坐标'
map.get(wh) // '宽高'
登入後複製

結果:

es6中的map是什麼意思

【相關推薦:javascript影片教學web前端

以上是es6中的map是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
es6
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板