首頁 >web前端 >js教程 >詳細解讀javascript中map資料結構

詳細解讀javascript中map資料結構

亚连
亚连原創
2018-06-20 17:00:163489瀏覽

這篇文章主要介紹了淺談es6 javascript的map資料結構,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

本文介紹了es6 javascript的map資料結構,分享給大家,具體如下:

Map 結構的目的和基本用法

JavaScript 的物件( Object), 基本上就是鍵值對的集合( Hash 結構), 但傳統上只能用字串當作鍵。這給它的使用帶來了很大的限制。

var data = {}; 
var element = document.getElementById('myp'); 
data[element] = 'metadata'; 
data['[object HTMLpElement]'] // "metadata"

上面程式碼原意是將一個 DOM 節點當作物件data的鍵, 但由於物件只接受字串作為鍵名, 所以element被自動轉為字串[object HTMLpElement]。

為了解決這個問題, ES6 提供了 Map 資料結構。它類似於對象, 也是鍵值對的集合, 但是“ 鍵” 的範圍不限於字串, 各種類型的值( 包括對象) 都可以當作鍵。也就是說, Object 結構提供了「 字串— 值」 的對應, Map 結構提供了「 值— 值」 的對應, 是一種更完善的 Hash 結構實作。如果你需要「 鍵值對」 的資料結構, Map 比 Object 更適合。

var m = new Map(); 
var o = { 
 p: 'Hello World' 
}; 
m.set(o, 'content') 
m.get(o) // "content" 
m.has(o) // true 
m.delete(o) // true 
m.has(o) // false

上面程式碼使用set方法, 將物件o當作m的一個鍵, 然後再使用get方法讀取這個鍵, 接著使用delete方法刪除了這個鍵。
作為建構函數, Map 也可以接受一個陣列作為參數。此陣列的成員是一個個表示鍵值對的陣列。

var map = new Map([ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]); 
map.size // 2 
map.has('name') // true 
map.get('name') // " 张三 " 
map.has('title') // true 
map.get('title') // "Author"

上面程式碼在新建 Map 實例時,就指定了兩個鍵name和title。

Map 建構子接受陣列作為參數, 實際上執行的是下面的演算法。

var items = [ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]; 
var map = new Map(); 
items.forEach(([key, value]) => map.set(key, value));

下面的範例中, 字串true和布林值true是兩個不同的鍵。

var m = new Map([ 
 [true, 'foo'], 
 ['true', 'bar'] 
]); 
m.get(true) // 'foo' 
m.get('true') // 'bar'

如果對同一個鍵多次賦值, 後面的值會覆寫前面的值。

let map = new Map(); 
map 
 .set(1, 'aaa') 
 .set(1, 'bbb'); 
map.get(1) // "bbb"

上面程式碼對鍵1連續賦值兩次, 後一次的值覆寫前一次的值。

如果讀取一個未知的鍵,則傳回undefined。

new Map().get('asfddfsasadf') 
 // undefined

注意, 只有對同一個物件的引用, Map 結構才將其視為同一個鍵。這一點要非常小心。

var map = new Map(); 
map.set(['a'], 555); 
map.get(['a']) // undefined

上面程式碼的set和get方法,表面是針對同一個鍵, 但實際上這是兩個值, 記憶體位址是不一樣的, 因此get方法無法讀取該鍵,傳回undefined。

同理, 同樣的值的兩個實例, 在 Map 結構中被視為兩個鍵。

var map = new Map(); 
var k1 = ['a']; 
var k2 = ['a']; 
map 
 .set(k1, 111) 
 .set(k2, 222); 
map.get(k1) // 111 
map.get(k2) // 222

上面程式碼中, 變數k1和k2的值是一樣的, 但是它們在 Map 結構中被視為兩個鍵。

由上可知, Map 的鍵其實是跟記憶體位址綁定的, 只要記憶體位址不一樣, 就視為兩個鍵。這就解決了同名屬性碰撞( clash) 的問題, 我們擴充別人的函式庫的時候, 如果使用物件作為鍵名, 就不用擔心自己的屬性與原作者的屬性同名。

如果 Map 的鍵是一個簡單類型的值( 數字、 字串、 布林值), 則只要兩個值嚴格相等, Map 將其視為一個鍵, 包括0和 - 0。另外, 雖然NaN不嚴格相等於自身, 但 Map 將其視為同一個鍵。

let map = new Map(); 
map.set(NaN, 123); 
map.get(NaN) // 123 
map.set(-0, 123); 
map.get(+0) // 123

上面是我整理給大家的,希望未來會對大家有幫助。

相關文章:

vue-cli設定檔(詳細教學)

#使用jQuery封裝animate.css(詳細教學)

在vuex中如何實作閒置狀態進行重設

以上是詳細解讀javascript中map資料結構的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn