Map 和 WeakMap

在對象中，如果鍵值設置爲了數字，對象會自動把數字轉換爲字符串

let obj = {
      1: 'hhh',
      '1': 'bbb'
    }
    console.log(obj)

相當於創建了兩個鍵值是字符串1的值，後面的把前面的覆蓋掉，結果等同如下

let obj = {
      '1': 'bbb'
    }

所以如果對象賦值，同名一個字符串一個數字是不可能的，但如果遇到這種需求會怎麼辦呢，使用Map，Map對鍵值的比較是使用Object.is()

1. map.set('鍵名'，'鍵值') 設置值

let map = new Map()
    map.set('name', 'zhou')
    map.set(1, 'hh')
    map.set('1', 'aa')
    console.log(map) // Map(3) {"name" => "zhou", 1 => "hh", "1" => "aa"}

鏈式調用：

let map = new Map()
    map.set('name', 'zhou').set(1, 'hh').set('1', 'aa')
    console.log(map) // Map(3) {"name" => "zhou", 1 => "hh", "1" => "aa"}

鍵值設置爲對象：

 let map = new Map()
    let obj = {
      name: 'zhou'
    }
    map.set(obj, 'fang')
    console.log(map)

2. map.get('鍵名')  取值

let map = new Map()
    map.set('name', 'zhou').set(1, 'hh').set('1', 'aa')
    console.log(map.get('name')) // zhou
    console.log(map.get('1')) // aa
    console.log(map.get(1)) // hh

3. map.has('鍵名') 判斷是否存在

let map = new Map()
    let obj = {
      name: 'zhou'
    }
    map.set(obj, 'fang')
    console.log(map.has(obj)) // true
    console.log(map.has(name)) // false

4. map.delete('鍵名') 刪除 刪除成功返回true否則返回false

let map = new Map()
    let obj = {
      name: 'zhou'
    }
    map.set(obj, 'fang').set('age', 21)
    console.log(map.delete(obj)) // true
    console.log(map.delete('age')) // true
    console.log(map.delete(name)) // false
    console.log(map) // Map(0) {}

.5. map.clear() 清空map 無返回值

let map = new Map()
    let obj = {
      name: 'zhou'
    }
    map.set(obj, 'fang').set('age', 21)
    map.clear()
    console.log(map) // Map(0) {}

7. map.size：用於指明包含了多少對鍵值

console.log(map.size)

8.  map初始化

可以一次性將大量數據添加到Map中，將數組傳入Map構造器，該數組中每一項也必須是一個數組，內部數組的首個項會作爲鍵，第二項爲對應值。

let map = new Map([['name', 'zhou'], ['age', 21], ['sex', '女']])
    console.log(map)
    console.log(map.size) // 3

9. Map 遍歷 （鍵值）

let map = new Map()
    let obj = {
      name: 'zhou'
    }
    map.set(obj, 'fang').set('age', 21)
    map.forEach((value,key) => {
      console.log(value,key)
    })

注意key、value順序，第一個參數是值，第二個參數是鍵，第三個參數是Map本身

10. WeakMap

WeakMap 也是弱引用類型，鍵必須是數組或對象，基本引用類型會報錯。當WeakMap中的鍵在WeakMap之外不存在引用時，該鍵值對會被移除。

WeakMap至於兩個方法能用來與鍵值交互，has() 和 delete()

也沒有 forEach等操作

let map = new WeakMap()
    let arr = []
    map.set(arr, 'zhou')

內存引用於WeakSet相同

let Map = new WeakMap()
    let element = document.getElementsByClassName('element')[0]
    Map.set(element, 'Original')
    console.log(Map)
    element.parentNode.removeChild(element)
    element = null
    setInterval(() => {
      console.log(Map)
    }, 4000)

不會立即被垃圾回收，可看到大概8s之後，WeakMap變爲空

不再可用後被銷燬，能夠優化內存使用並且規避內存泄漏