技術文章 » es6 map有序嗎

es6 map有序嗎

2022-11-03 22:02:38

map是有序的。ES6中的map型別是一種儲存著許多鍵值對的有序列表，其中的鍵名和對應的值支援所有資料型別；鍵名的等價性判斷是通過呼叫「Objext.is()」方法來實現的，所以數位5與字串「5」會被判定為兩種型別，可以分別作為兩種獨立的鍵出現在程式中。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：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()

清除所有的值，返回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())//以鍵值對的方式
 
/*輸出：
[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、轉為陣列

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集合

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節點刪除，該狀態就會自動消失，不存在記憶體漏失的風險

1.png

（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>
登入後複製

所體現的效果是一樣的

（3）部署私有屬性

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
*/
登入後複製

【相關推薦：、】

以上就是es6 map有序嗎的詳細內容，更多請關注TW511.COM其它相關文章！