ES6專欄 - 新的數據結構Map

ES6專欄 - Map數據結構

目錄:

• 基本用法

• Map上的實例方法和屬性

基本用法

在過去的開發中,JS中的對象確實給我們帶來了很大便利性, 但是JS中的對象的key只能放置字符串好像有那麼點差強人意, 所以不管開發者未來是否需要其他類型的數值作爲鍵名, ES6推出了Map結構未雨綢繆

Map結構類似於對象, 也是鍵值對的組合, 但是它的key不限於字符串, 各種類型的值包括對象都可以作爲Map結構的key存在

Map構造函數及二維數組參數

Map數據結構通過Map構造函數而來, 同時Map構造函數接收一個數組作爲參數代表初始化的值, 同時這個數組的每一項又是一個由key和value購成的數組, key - 屬性名, value - 屬性值 我們來看個實例

const fstMap = new Map([
    [1, 1] // key - 1 , value - 1
]);
fstMap.set('name', 'loki');
function foo() {};
const obj = {
    a:  100
}
fstMap.set(foo, foo); // 實例方法往Map實例中插值, 後面會詳細介紹
fstMap.set(obj, obj);
console.log(fstMap);


// 從Map結構中取值, 實例方法get取值
console.log(fstMap.get(obj)); // {a: 100}

我們輸出的結果如下

小提示

事實上, 不僅僅是數組, 任何具備迭代接口且每個成員都是一個雙元素數組的數據結構都可以作爲Map構造函數的參數, 這也就意味着, Set和Map都可以作爲Map構造函數的參數從而生成新的Map

const set = new Set([
    ['number', 1],
    ['string', 'hello']
])

const map = new Map([
    [1, 1],
    ['hello', 'hello']
])

const newMap = new Map(map);
const newSetMap = new Map(set);
console.log(newMap); //  Map(2) {1 => 1, "hello" => "hello"}
console.log(newSetMap); // Map(2){"number" => 1, "string" => "hello"}

覆蓋情況

跟對象一樣, 如果給一個Map結構的同一個key多次賦值, 會進行覆蓋操作

const map = new Map([
    ['name', 'loki']
])

map.set('name', 'thor');

console.log(map.get('name')); // thor

讀取未知不存在key

還跟對象一樣, 如果去讀取一個Map結構中根本就沒有的值, 返回undefined

const map = new Map();
console.log(map.get('name')); // undefined

Map實例上的屬性和方法

• Map實例上的屬性

  • Map.prototype.size

    size屬性用來返回Map結構的成員總數

       const map = new Map([
           ['name', 'loki'],
           ['age', 18]
       ])
    
       console.log(map.size); // 2
    

  • Map.prototype.constructor

    constructor屬性用來返回Map結構的構造函數, 默認是Map

• Map實例上的方法

  • 操作方法

    • Map.prototype.set(key, value)

      set方法接收兩個參數, 前者爲key後者爲value, 用於給Map實例添加值, 如果key值已經存在則進行覆蓋, 該方法執行完畢以後會返回該Map實例, 以便於鏈式調用

          const map = new Map();
          map.set('name', 'loki')
          .set('name', 'thor'); //產生覆蓋
      
          console.log(map.get('name')); // thor
      

    • Map.prototype.get(key)

      get方法接收一個參數爲key, 該方法用於取值, 在Map實例中匹配到相對應的key就返回key對應的value值,如果匹配不到返回undefined

          const map = new Map([
              ['name', 'loki']
          ]);
      
          console.log(map.get('name')); // loki
          console.log(map.gey('age')); // undefined
      

    • Map.prototype.has(key)

      has方法接收一個參數key, 該方法用於判定Map實例中有無參數key, 如果有返回true, 沒有則返回false

          const map = new Map([
              ['name', 'loki']
          ])
          
          console.log(map.has('name')); // true
          console.log(map.has('age')); // false
      

    • Map.prototype.delete(key)

      delete方法同樣接收一個參數key, 該方法用於刪除某個key, 如果刪除成功返回true, 刪除失敗返回false, 刪除不存在的key返回false

          const map = new Map([
              ['name', 'loki'],
              ['age', 18]
          ])
      
          console.log(map.delete('age')); // true
      
          console.log(map.delet('sex')); // false
      

    • Map.prototype.clear()

      clear方法不用接收參數, 它的作用就是用於清除所有成員

          const map = new Map([
              ['name', 'loki'],
              ['age',  18]
          ]);
          
          map.clear(); 
          console.log(map); // Map(0){}
      

  • 遍歷方法

    • Map.prototype.keys()

      keys方法用於返回包含所有鍵名的迭代器, 可用for…of或者next方法進行迭代, 但是for…of方法和next方法不能同時出現

          const map = new Map([
              ['name', 'loki'],
              ['age', 18]
          ])
      
          let mapIterator = map.keys();
      
          for(let item of mapIterator) {
              console.log(item); // 依次輸出name, age 
          }
      
      

    • Map.prototype.values()

      values方法跟key值的操作一樣, 只是keys返回key的迭代器, 而values返回value的迭代器

          const map = new Map([
              ['name', 'loki'],
              ['age', 18]
          ])
          
          let mapIterator = map.values();
      
          console.log(mapIterator.next()); // {value: "loki", done: false}    
          console.log(mapIterator.next()); // {value: 18, done: false}
          console.log(mapIterator.next()); // {value: undefined, done: true}
      

    • Map.prototype.entries()

      keys, values, entries這三哥們基本是個連體嬰, 三哥們的操作都一樣, 就是返回的值不太一樣, entries返回key和value對應的迭代器

          const map = new Map([
              ['name', 'loki'],
              ['age', 18]
          ]);
      
          let mapIterator = map.entries();
      
          for(let item of mapIterator) {
              console.log(item);
          }
      

    • Map.prototype.forEach()

      跟數組和Set一樣, Map的forEach方法也是用來遍歷左右Map結構的成員,forEach方法接收兩個參數, 第一個是回調函數,第二個是回調函數運行期間的this指向

      同時第一個回調函數也接收三個參數, key - 本次循環的key值, value - 本次循環得到的value值, ele - 始終指向該map實例本身

      第二個參數決定this指向, 但是不填或者第一個參數是箭頭函數的情況下永遠都是指向window

          const map = new Map([
              ['name', 'loki'],
              ['age', 18]
          ])
      
          map.forEach(function(key, value, ele) {
              console.log(this.name); // 我是this指向
              console.log(key, value, ele); 
              //上面的輸出語句 依次輸出 
              // loki name Map(2) {"name" => "loki", "age" => 18}
              // 18 "age" Map(2) {"name" => "loki", "age" => 18}
          }, {name: '我是this指向'})
      

  小提示

  因爲Map跟Set結構一樣是具備迭代接口的, 所以Map也可以通過spread擴展運算符快速轉化爲數組

       const map = new Map([
          ['name', 'loki'],
          ['age', 18]
      ])
  
      const arr = [...map];
      console.log(arr); // [['name', 'loki'], ['age', 18]]
  

至此關於ES6的Map數據結構筆者已經基本寫完了, 文中提到的迭代器迭代接口這些如果不懂可以看筆者的關於迭代器的文章, 希望可以幫助到你