ECMAScript6中Map/WeakMap詳解
更新時間：2015年06月12日 10:44:35 投稿：hebedich
這篇文章主要介紹了ECMAScript6中Map/WeakMap詳解的相關資料,需要的朋友可以參考下
JS的對象本身就是個鍵值結構，ES6為什么還需要加Map呢，它與普通的JS對象有何區(qū)別？
一、Map
1. Map構造器
先看Map的簡單用法
// 字符串作為key， 和JS對象類似
var map = new Map()
// set
map.set('name', 'John')
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) // '寬高'
以上演示了用對象作為key的Map。以下為圖示
Map構造器還支持傳數(shù)組方式
var map = new Map([["name", "John"], ["age", "29"]])
// 遍歷key
for (var key of map.keys()) {
console.log(key) // name, age
}
2. 迭代
和Set一樣用for of來迭代Map，鍵調用map.keys()，值調用map.values()，鍵值實體調用map.entries()
var map = new Map()
// set
map.set('name', 'John')
map.set('age', 29)
// get
map.get('name') // 'John'
map.get('age') // 29
// 遍歷key
for (var key of map.keys()) {
console.log(key)
}
// 遍歷value
for (var val of map.values()) {
console.log(val)
}
// 遍歷實體
for (var arr of map.entries()) {
console.log('key: ' + arr[0] + ', value: ' + arr[1])
}
// 遍歷實體的簡寫
for (var [key, val] of map.entries()) {
console.log('key: ' + key + ', value: ' + val)
}
3. 方法和屬性
二、WeakMap
與Map的區(qū)別
不接受基本類型的值作為鍵名
沒有keys、values、entries和size
有以下方法
以上所述就是本文的全部內容了，希望大家能夠喜歡。
相關文章
今天小編就為大家分享一篇layui多iframe頁面控制定時器運行的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了淺析js實現(xiàn)網頁截圖的兩種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
用戶輸入密碼的強度...2006-07-07
今天小編就為大家分享一篇layui復選框的全選與取消實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本篇文章主要是對判斷js函數(shù)、變量是否存在的簡單示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要為大家介紹了Webpack?模塊加載動態(tài)引入機制源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
JavaScript引擎實現(xiàn)async/await的方法實例
大家應該都知道隨著Node 7的發(fā)布,越來越多的人開始研究據(jù)說是異步編程終級解決方案的async/await,下面這篇文章主要給大家介紹了關于JavaScript引擎是如何實現(xiàn)async/await的相關資料,需要的朋友可以參考下2022-03-03
如何添加桌面快捷?很多網友都有這個疑問;JS 點擊添加網頁桌面快捷方式的代碼，需要的朋友可以參考下2012-12-12
這篇文章主要為大家介紹了前端進階之IntersectionObserver示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了BootStrap實現(xiàn)鼠標懸停下拉列表功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02