ECMAScript6中Map/WeakMap詳解
JS的對象本身就是個鍵值結(jié)構(gòu),ES6為什么還需要加Map呢,它與普通的JS對象有何區(qū)別?
一、Map
1. Map構(gòu)造器
先看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的強(qiáng)大之處在于它的key可以是任意類型
// 對象作為key演示 var xy = {x: 10, y: 20} // 坐標(biāo) var wh = {w: 100, h: 200} // 寬高 var map = new Map() // set map.set(xy, '坐標(biāo)') map.set(wh, '寬高') // get map.get(xy) // '坐標(biāo)' map.get(wh) // '寬高'
以上演示了用對象作為key的Map。以下為圖示
Map構(gòu)造器還支持傳數(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,鍵調(diào)用map.keys(),值調(diào)用map.values(),鍵值實體調(diào)用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
有以下方法
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
Webpack?模塊加載動態(tài)引入機(jī)制源碼示例解析
這篇文章主要為大家介紹了Webpack?模塊加載動態(tài)引入機(jī)制源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09JavaScript引擎實現(xiàn)async/await的方法實例
大家應(yīng)該都知道隨著Node 7的發(fā)布,越來越多的人開始研究據(jù)說是異步編程終級解決方案的async/await,下面這篇文章主要給大家介紹了關(guān)于JavaScript引擎是如何實現(xiàn)async/await的相關(guān)資料,需要的朋友可以參考下2022-03-03JS 添加網(wǎng)頁桌面快捷方式的代碼詳細(xì)整理
如何添加桌面快捷?很多網(wǎng)友都有這個疑問;JS 點(diǎn)擊添加網(wǎng)頁桌面快捷方式的代碼,需要的朋友可以參考下2012-12-12一文詳解前端進(jìn)階之IntersectionObserver
這篇文章主要為大家介紹了前端進(jìn)階之IntersectionObserver示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04BootStrap實現(xiàn)鼠標(biāo)懸停下拉列表功能
這篇文章主要介紹了BootStrap實現(xiàn)鼠標(biāo)懸停下拉列表功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02