es6 map有序嗎
- 青灯夜游原創
- 2022-11-03 19:05:251505瀏覽
map是有順序的。 ES6中的map類型是一種儲存著許多鍵值對的有序列表，其中的鍵名和對應的值支持所有數據類型；鍵名的等價性判斷是通過調用“Objext.is()”方法來實現的，所以數字5與字串「5」會被判定為兩種類型，可以分別作為兩種獨立的鍵出現在程式中。
本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。
一、map集合
JavaScript的物件（object），本質是上鍵值對的集合，但是傳統上只能用字串當做鍵值對。
為了解決這個問題，ES6提供了map資料結構。它類似對象，也是鍵值對的集合。但是這個鍵的範圍不限於字串，各種類型的值（包括物件）都可以當做鍵。也就是說object結構提供了（字串-值）的對應，map結構實作
ES6中的map類型是一種儲存著許多鍵值對的有序列表，其中的鍵名和對應的值支援所有資料類型。鍵名的等價性判斷是透過呼叫Objext.is()方法來實現的，所以數字5與字串‘5’會被判定為兩種類型，可以分別作為兩種獨立的鍵出現在程式中。
注意：有一個例外，在map集合中將0和-0視為相等，與Object.is()結果不同，如果需要「鍵值對」的資料結構，map比object更合適，具有極快的查找速度
1、屬性：size
返回map的元素數
2、基本方法
#（1）set()
#給map新增數據，傳回新增後的map（給已存在的鍵賦值後會覆寫先前的值）
（2）get()
##取得某個key的值，傳回key對應的值，沒有則回傳undefined（3）has()
偵測是否存在某個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()
刪除某個key及其對應的value，傳回布林值，成功刪除則為true#（5）clear()
清除所有的值，回傳undefinedlet 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())//以键值对的方式
/*输出：
[Map Iterator] { 'JacksonWang', 'LEO', 'Z-' }
[Map Iterator] { '123', '456', '789' }
[Map Entries] {
[ 'JacksonWang', '123' ],
[ 'LEO', '456' ],
[ 'Z-', '789' ]
}*/
遍歷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、轉為陣列
#map結構轉為陣列解構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集合，也用於儲存物件的弱引用。 WeakMap集合中的鍵名必須是一個對象，如果使用非對象鍵名會報錯：集合中保存的是這些對象的弱引用，如果在弱引用之外的不存在其他的強引用，引擎的垃圾回收機制會自動回收這個對象，同時會移出WeakMap集合中的鍵值對。但是只有集合的鍵名遵循這個規則，鍵名對應的值如果是一個對象，則保存的對象的強引用，不會觸發垃圾回收裝置
1、WeakMap集合的用途
（1）儲存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测试</button>
<script>
let btn = document.querySelector('#btn');
let wmap = new WeakMap();
wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键
btn.addEventListener('click',function(){
let temp = wmap.get(btn);//从这里获取键名为btn的值
temp.timesClicked++;
console.log(temp.timesClicked)
},false)
</script>
</body>
</html>程式碼中的myElement是一個DOM節點，每當發生click事件，就更新一下狀態。我們將這個狀態當作鍵值放在WeakMap裡，對應的鍵名就是myElement，一旦這個DOM節點刪除，該狀態就會自動消失，不存在記憶體洩漏的風險（2）註冊監聽事件的listener物件
<!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测试</button>
<script>
let btn = document.querySelector('#btn');
let wmap = new WeakMap();
wmap.set(btn,{timesClicked:0})//在map中放一个键值对，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>所體現的效果是一樣的
function Person(name){
this._name = name;
}
Person.prototype.getName = function(){
return this._name;
}
//但这是，创建一个Person对象的时候，我们可以直接访问name
let p = new Person('张三');
console.log(p._name)
//输出：张三###我們不想讓使用者直接存取name屬性，直接使用下面的方法將name包裝成私有屬性###let Person = (function(){
let privateData = new WeakMap();
function Person(yourname){
privateData.set(this,{_name:yourname})//this当前这个键的对象
}
Person.prototype.getName = function(){
return privateData.get(this)._name;//
}
return Person;
})();//定义好了函数就开始执行
let p = new Person('jack');
console.log(p._name)//因为name的私有型，所以在外不可访问
console.log(p.getName())
/*输出:
undefined
jack
*/###【相關推薦：###javascript影片教學###、## #web前端###】###以上是es6 map有序嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！