ECMAScript6中Map/WeakMap詳解
更新時(shí)間：2015年06月12日 10:44:35 投稿：hebedich
這篇文章主要介紹了ECMAScript6中Map/WeakMap詳解的相關(guān)資料,需要的朋友可以參考下
JS的對象本身就是個(gè)鍵值結(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
這么對代碼，看起來確實(shí)沒有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()，鍵值實(shí)體調(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)
}
// 遍歷實(shí)體
for (var arr of map.entries()) {
console.log('key: ' + arr[0] + ', value: ' + arr[1])
}
// 遍歷實(shí)體的簡寫
for (var [key, val] of map.entries()) {
console.log('key: ' + key + ', value: ' + val)
}
3. 方法和屬性
二、WeakMap
與Map的區(qū)別
不接受基本類型的值作為鍵名
沒有keys、values、entries和size
有以下方法
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- ECMAScript6 新特性范例大全
- ECMAScript6輪播圖實(shí)踐知識(shí)總結(jié)
- ECMAScript6快速入手攻略
- ECMAScript6中Set/WeakSet詳解
- ECMAScript6塊級(jí)作用域及新變量聲明（let）
- ECMAScript6新增值比較函數(shù)Object.is
- ECMAScript6函數(shù)剩余參數(shù)（Rest Parameters）
- ECMAScript6函數(shù)默認(rèn)參數(shù)
- ECMAScript6的新特性箭頭函數(shù)（Arrow Function）詳細(xì)介紹
- ECMAScript6--解構(gòu)
相關(guān)文章
JavaScript中String對象的使用方法以及實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript中String對象的使用方法以及實(shí)例的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),方便開發(fā)者在JavaScript開發(fā)中更好地處理字符串,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了對于防止按鈕重復(fù)點(diǎn)擊的嘗試，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JS實(shí)現(xiàn)點(diǎn)擊事件統(tǒng)計(jì)的簡單實(shí)例
下面小編就為大家?guī)硪黄狫S實(shí)現(xiàn)點(diǎn)擊事件統(tǒng)計(jì)的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
js實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)圖片滾動(dòng)停止的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)圖片滾動(dòng)停止的方法,可實(shí)現(xiàn)js滾動(dòng)特效中的鼠標(biāo)懸停停止圖片滾動(dòng)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript 生成隨機(jī)數(shù)并自動(dòng)大小排序
JavaScript按規(guī)定生成隨機(jī)數(shù)，并按指定順序自動(dòng)排序，本例中將生成1——100以內(nèi)的隨機(jī)數(shù)，并按照由小到大的順序排列起來。2009-12-12
這篇文章主要介紹了使用開源工具制作網(wǎng)頁驗(yàn)證碼的方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
JavaScript 讀URL參數(shù)增強(qiáng)改進(jìn)版版
網(wǎng)上有不少JavaScript 讀 URL 參數(shù)的函數(shù)，但沒考慮到 URL 中帶 # 符的情況，我的可以處理這種情況，并使用了點(diǎn)對象寫法，優(yōu)化了些性能。2008-10-10
你所不了解的javascript操作DOM的細(xì)節(jié)知識(shí)點(diǎn)(一)
這篇文章主要介紹了你所不了解的javascript操作DOM的細(xì)節(jié)知識(shí)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2015-06-06
JS實(shí)現(xiàn)中國公民身份證號(hào)碼有效性驗(yàn)證
這篇文章主要介紹了JS實(shí)現(xiàn)中國公民身份證號(hào)碼有效性驗(yàn)證,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
yepnope.js是一個(gè)能夠根據(jù)輸入條件來選擇性異步加載資源文件的js腳本，可以在頁面上僅加載用戶需要的js/css。2011-09-09