熟悉JavaScript的Map和WeakMap

Map

Map的鍵/值可以是任何類型

基本API

初始化映射：

//使用new關鍵字和Map構造函數進行初始化

const m1 = new Map();

//使用嵌套數組初始化映射

const m2 = new Map([

  ['k1', 'v1'],

  ['k2', 'v2'],

  ['k3', 'v3']

]);

// 使用自定義迭代器初始化

const m3 = new Map({

  [Symbol.iterator]:function*() {

    yield ['k1', 'v1'];

    yield ["k2", "v1"];

    yield ["k3", "v3"];

  }

})

Map的方法：set()、get()、has()、delete()、clear()

Map的屬性:size

m2.set('k4', 'v4');

console.log(m2.has('k4'));//true

console.log(m2.get('k4'));//v4

m2.delete('k4');

console.log(m2.has("k4")); //false

console.log(m2.get("k4"));//undefined

m2.clear();

console.log(m2.has('k1'));//false

set()返回映射實例，于是我們可以鏈式調用set()：

m2.set('k4','v4')

	.set('k5','v5');

Map的鍵的相等比較

鍵的比較基于零值相等(SameValueZero)，它認為+0與-0、NaN與NaN是相等的，其他的所有鍵通過===來比較相等性。

m2.set(NaN, 1);

m2.set(NaN,2);

console.log(m2.get(NaN));//2

m2.set(-0, 3);

console.log(m2.get(+0));//3

Map和Object的比較

Object也可以用來完成映射的作用，那選Map還是Object呢？

從以下方面決策：

1. 內存占用：Object和Map在不同瀏覽器上的實現有差異，但是都會隨著鍵值對增加占用內存線性增長，同時在給定相同的內存情況下，Map能比Object多存儲50%的鍵值對。
2. 插入性能：Map的插入比Object稍微好一點兒。
3. 查找速度：如果代碼涉及大量查找操作，那么選擇Object會更好。
4. 刪除性能：如果代碼涉及大量刪除操作，那么選擇Map會更好。
5. 迭代：Map實現了迭代協議，Object沒有。
6. size：Map的鍵值對數量可以通過size屬性輕松獲得，而Object只能手動計算。
7. 序列化和解析：Map沒有序列化和解析支持。

可以實現Map的序列化和解析:How do you JSON.stringify an ES6 Map?

function replacer(key, value) {

if (value instanceof Map) {

 return {

   dataType: "Map",

   value: Array.from(value.entries()), // or with spread: value: [...value]

 };

}

return value;

}

function reviver(key, value) {

if (typeof value === "object" && value !== null) {

 if (value.dataType === "Map") {

   return new Map(value.value);

 }

}

return value;

}

const originalValue = new Map([["a", 1]]);

const str = JSON.stringify(originalValue, replacer);

const newValue = JSON.parse(str, reviver);

console.log(originalValue, newValue);

WeakMap

WeakMap稱為弱映射。"弱"指的是內存回收機制對待WeakMap中鍵的方式。

基本API

弱映射的鍵只能是對象類型(Object或繼承自Object)。值類型無限制。

方法和屬性的名稱和Map相同，除了沒有clear()。

弱鍵

WeakMap中的鍵不是正式的引用，不會阻止垃圾回收。只要鍵存在，鍵值對就會存在于映射中。

const wm = new WeakMap();

wm.set({}, 'v1');

wm新建的鍵值對的鍵對象沒有被引用，所以垃圾回收機制會回收它。

const wm = new WeakMap();

let obj = new Object();

wm.set(obj, 'v1');

console.log(wm.has(obj));//true

obj = null;

console.log(wm.has(obj));//false

不可迭代鍵

WeakMap沒有提供迭代鍵值對的功能，也沒有必要，是為了保證只有通過鍵對象的引用才能取得值。

弱映射的實際使用

私有變量

以對象實例為鍵，以私有成員的字典為值。

const wm = new WeakMap();

class User{

  constructor(id) {

    this.userId = Symbol('id');

    this.setId(id);

  }

  setId(id) {

    const privateMembers = wm.get(this) || {};

    privateMembers[this.userId] = id;

    wm.set(this, privateMembers);

  }

  getId() {

    return wm.get(this)[this.userId];

  }

}

const user = new User(1);

console.log(user.getId());//1

user.setId(2);

console.log(user.getId());//2

上面的變量userId并非真正私有，通過弱映射vm可以獲取：

console.log(wm.get(user)[user.userId]);//2

我們可以把弱映射和類放在一個閉包里：

const User = (() => {

  const wm = new WeakMap();

  class User {

    constructor(id) {

      this.userId = Symbol("id");

      this.setId(id);

    }

    setId(id) {

      const privateMembers = wm.get(this) || {};

      privateMembers[this.userId] = id;

      wm.set(this, privateMembers);

    }

    getId() {

      return wm.get(this)[this.userId];

    }

  }

  return User;

})();

const user = new User(1);

console.log(user.getId());//1

user.setId(2);

console.log(user.getId());//2

總結

以上是生活随笔為你收集整理的JavaScript的Map和WeakMap的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。