溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“es6的map是有序嗎”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“es6的map是有序嗎”吧!
map是有序的。ES6中的map類型是一種儲(chǔ)存著許多鍵值對(duì)的有序列表，其中的鍵名和對(duì)應(yīng)的值支持所有數(shù)據(jù)類型；鍵名的等價(jià)性判斷是通過(guò)調(diào)用“Objext.is()”方法來(lái)實(shí)現(xiàn)的，所以數(shù)字5與字符串“5”會(huì)被判定為兩種類型，可以分別作為兩種獨(dú)立的鍵出現(xiàn)在程序中。
JavaScript的對(duì)象（object），本質(zhì)是上鍵值對(duì)的集合，但是傳統(tǒng)上只能用字符串當(dāng)做鍵值對(duì)。
為了解決這個(gè)問(wèn)題，ES6提供了map數(shù)據(jù)結(jié)構(gòu)。它類似對(duì)象，也是鍵值對(duì)的集合。但是這個(gè)鍵的范圍不限于字符串，各種類型的值（包括對(duì)象）都可以當(dāng)做鍵。也就是說(shuō)object結(jié)構(gòu)提供了（字符串-值）的對(duì)應(yīng)，map結(jié)構(gòu)實(shí)現(xiàn)
ES6中的map類型是一種儲(chǔ)存著許多鍵值對(duì)的有序列表，其中的鍵名和對(duì)應(yīng)的值支持所有數(shù)據(jù)類型。鍵名的等價(jià)性判斷是通過(guò)調(diào)用Objext.is()方法來(lái)實(shí)現(xiàn)的，所以數(shù)字5與字符串‘5’會(huì)被判定為兩種類型，可以分別作為兩種獨(dú)立的鍵出現(xiàn)在程序中。
注意：有一個(gè)例外，map集合中將+0和-0視為相等，與Object.is()結(jié)果不同，如果需要“鍵值對(duì)”的數(shù)據(jù)結(jié)構(gòu)，map比object更合適，具有極快的查找速度
1、屬性：size
返回map的元素?cái)?shù)
2、基本方法
（1）set()
給map添加數(shù)據(jù)，返回添加后的map（給已存在的鍵賦值后會(huì)覆蓋掉之前的值）
（2）get()
獲取某個(gè)key的值，返回key對(duì)應(yīng)的值，沒(méi)有則返回undefined
（3）has()
檢測(cè)是否存在某個(gè)key，返回布爾值
let map = new Map();
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
console.log(map.size);
console.log(map.get('JacksonWang'));
console.log(map.get('LEO'));
console.log(map.has('Z-'));
//輸出: 3
// 123
// 456
// true
（4）delete()
刪除某個(gè)key及其對(duì)應(yīng)的value，返回布爾值，成功刪除則為true
（5）clear()
清除所有的值，返回undefined
let map = new Map();
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
map.delete('Z-');
console.log(map.size);
console.log(map.clear())
//輸出: 2
// undefined
3、遍歷方式
注意：map的遍歷順序就是插入順序
（1）keys()
獲取map的所有key
（2）values()
獲取map的所有值
（3）entries()
獲取map的所有成員
let map = new Map();
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
console.log(map.keys())//打印所有的鍵
console.log(map.values())//打印所有的值
console.log(map.entries())//以鍵值對(duì)的方式
/*輸出：
[Map Iterator] { 'JacksonWang', 'LEO', 'Z-' }
[Map Iterator] { '123', '456', '789' }
[Map Entries] {
[ 'JacksonWang', '123' ],
[ 'LEO', '456' ],
[ 'Z-', '789' ]
}*/
（4）forEach()
遍歷map的所有成員
let map = new Map();
map.set('JacksonWang','123');
map.set('LEO','456');
map.set('Z-','789');
for(const [key,value] of map.entries()){
console.log(`${key}:${value}`);
}
/*輸出:
JacksonWang:123
LEO:456
Z-:789
*/
4、轉(zhuǎn)為數(shù)組
map結(jié)構(gòu)轉(zhuǎn)為數(shù)組解構(gòu)
let map1 = new Map([
[1,'One'],
[2,'Two'],
[3,'Three']
])
console.log([...map1.keys()]);
console.log(...map1.entries())
console.log([...map1.entries()]);
/*輸出:
[ 1, 2, 3 ]
[ 1, 'One' ] [ 2, 'Two' ] [ 3, 'Three' ]
[ [ 1, 'One' ], [ 2, 'Two' ], [ 3, 'Three' ] ]
*/
WeakMap是弱引用Map集合，也用于存儲(chǔ)對(duì)象的弱引用。WeakMap集合中的鍵名必須是一個(gè)對(duì)象，如果使用非對(duì)象鍵名會(huì)報(bào)錯(cuò)：集合中保存的是這些對(duì)象的弱引用，如果在弱引用之外的不存在其他的強(qiáng)引用，引擎的垃圾回收機(jī)制會(huì)自動(dòng)回收這個(gè)對(duì)象，同時(shí)會(huì)移出WeakMap集合中的鍵值對(duì)。但是只有集合的鍵名遵循這個(gè)規(guī)則，鍵名對(duì)應(yīng)的值如果是一個(gè)對(duì)象，則保存的對(duì)象的強(qiáng)引用，不會(huì)觸發(fā)垃圾回收裝置
1、WeakMap集合的用途
（1）存儲(chǔ)DOM元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">WeskMap測(cè)試</button>
<script>
let btn = document.querySelector('#btn');
let wmap = new WeakMap();
wmap.set(btn,{timesClicked:0})//在map中放一個(gè)鍵值對(duì)，btn為鍵
btn.addEventListener('click',function(){
let temp = wmap.get(btn);//從這里獲取鍵名為btn的值
temp.timesClicked++;
console.log(temp.timesClicked)
},false)
</script>
</body>
</html>
代碼中的myElement是一個(gè)DOM節(jié)點(diǎn)，每當(dāng)發(fā)生click事件，就更新一下?tīng)顟B(tài)。我們將這個(gè)狀態(tài)作為鍵值放在WeakMap里，對(duì)應(yīng)的鍵名就是myElement，一旦這個(gè)DOM節(jié)點(diǎn)刪除，該狀態(tài)就會(huì)自動(dòng)消失，不存在內(nèi)存泄漏的風(fēng)險(xiǎn)
（2）注冊(cè)監(jiān)聽(tīng)事件的listener對(duì)象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">WeskMap測(cè)試</button>
<script>
let btn = document.querySelector('#btn');
let wmap = new WeakMap();
wmap.set(btn,{timesClicked:0})//在map中放一個(gè)鍵值對(duì)，btn為鍵
// btn.addEventListener('click',function(){
// let temp = wmap.get(btn);//從這里獲取鍵名為btn的值
// temp.timesClicked++;
// console.log(temp.timesClicked)
// },false)
function f1(){
let temp = wmap.get(btn);//從這里獲取鍵名為btn的值
temp.timesClicked++;
console.log(temp.timesClicked)
}
btn.addEventListener('click',f1,false)
</script>
</body>
</html>
所體現(xiàn)的效果是一樣的
（3）部署私有屬性
function Person(name){
this._name = name;
}
Person.prototype.getName = function(){
return this._name;
}
//但這是，創(chuàng)建一個(gè)Person對(duì)象的時(shí)候，我們可以直接訪問(wèn)name
let p = new Person('張三');
console.log(p._name)
//輸出：張三
我們不想讓用戶直接訪問(wèn)name屬性，直接使用下面的方法將name包裝成私有屬性
let Person = (function(){
let privateData = new WeakMap();
function Person(yourname){
privateData.set(this,{_name:yourname})//this當(dāng)前這個(gè)鍵的對(duì)象
}
Person.prototype.getName = function(){
return privateData.get(this)._name;//
}
return Person;
})();//定義好了函數(shù)就開(kāi)始執(zhí)行
let p = new Person('jack');
console.log(p._name)//因?yàn)閚ame的私有型，所以在外不可訪問(wèn)
console.log(p.getName())
/*輸出:
undefined
jack
*/
到此，相信大家對(duì)“es6的map是有序嗎”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
