JavaScript深入理解-Set、Map、WeakSet和WeakMap

Set

Set 物件允許儲存任何型別的唯一值，無論是原始值或者是物件參考
本質：建構式，用來生成 Set 資料結構

描述

Set 物件是值的集合,你可以按照插入的順序迭代它的元素，Set 中的元素只會出現一次，即 Set 元素是唯一的，
相當于集合，可以進行并集交集運算，

值的相等

對于原始資料型別（boolean，number，string，null，undefined），如果儲存相同值則只保存一個，對于參考型別,參考地址完全相同則只會存一個，

• +0 與-0 在存盤判斷唯一性的時候是恒等的，所以不可以重復，
• undefined 和 undefined 是恒等的，所以不可以重復，
• NaN 與 NaN 是不恒等的，但是在 Set 中只能存一個不能重復，

屬性方法

• size 屬性：回傳集合元素個數（類似于陣列的長度 length）
• add(value)方法：想集合中添加一個元素，如果添加的元素已存在，則不會進行操作，
• delete(value)方法：從集合中洗掉元素 value
• has(value)方法：判斷 value 是否在合集中，回傳 true 或者 false
• clear()方法：清空集合
• forEach()方法：根據集合中元素的插入順序，依次執行提供的回呼函式

應用場景
陣列去重，交集，并集，差集等等

//陣列去重
...new Set([1,1,2,2,3])

//并集
let arr1 = [1, 2, 3]
let arr2 = [2, 3, 4]
let newArr = [...new Set([...arr1, ...arr2])]
//交集
let arr1 = [1, 2, 3]
let arr2 = [2, 3, 4]
let set1 = new Set(arr1)
let set2 = new Set(arr2)
let newArr = []
set1.forEach(item => {
    set2.has(item) ? newArr.push(item) : ''
})
console.log(newArr)
//差集
let arr1 = [1, 2, 3]
let arr2 = [2, 3, 4]
let set1 = new Set(arr1)
let set2 = new Set(arr2)
let newArr = []
set1.forEach(item => {
    set2.has(item) ? '' : newArr.push(item)
})
set2.forEach(item => {
    set1.has(item) ? '' : newArr.push(item)
})
console.log(newArr)

Map

Map 物件保存鍵值對，并且能夠記住鍵的原始插入順序，任何值（物件或者原始值）都可以左右一個鍵或者一個值

描述：

一個 Map 物件在迭代時會根據物件中元素的插入順序來進行，一個for of 回圈在每次迭代后會回傳一個形式為[key,value]的陣列

鍵的相等

對于原始資料型別（boolean，number，string，null，undefined），如果儲存相同值則只保存一個，對于參考型別,參考地址完全相同則只會存一個，

• +0 與-0 在存盤判斷唯一性的時候是恒等的，所以不可以重復，
• undefined 和 undefined 是恒等的，所以不可以重復，
• NaN 與 NaN 是不恒等的，但是只能存一個不能重復，

Map 和 Object 的區別

屬性方法

• size 屬性：回傳字典長度（類似于陣列的長度 length）
• values()方法：回傳一個可迭代物件，包含按順序插入 Map 物件中每個元素的 value 值
• set(key,value)方法：向字典中添加新元素
• get(key)方法：通過鍵查找特定數值并回傳
• has(key)方法：判斷字典中是否存在鍵 key
• delete(key)方法：通過鍵 key 從字典中移出對應的資料
• clear()方法：清空字典
• forEach()方法：根據集合中元素的插入順序，依次執行提供的回呼函式

遍歷

var myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

for (const [key, value] of myMap) {
  console.log(key, value);
}

myMap.forEach((value, key) => {
  console.log(value, key);
});

轉換

var arr = [
  [1, 2],
  [3, 4],
  [5, 6],
];

var map = new Map(arr);
console.log(map); //Map { 1 => 2, 3 => 4, 5 => 6 }
console.log(Array.from(map)); //[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]

復制
let mapV=newMap(map)

WeakSet

WeakSet 物件允許將弱參考物件存在一個集合中

WeakSet 和 Set 區別：

• WeakSet 只能儲存物件參考，不能存放值，而 Set 物件都可以
• WeakSet 物件中儲存的物件值都是被弱參考的，即垃圾回識訓制不考慮 WeakSet 對該物件的參考，如果沒有其他的變數或者屬性參考這個物件值，則這個物件將會被垃圾回收掉，（不考慮該物件還存在與 WeakSet 中），所以 WeakSet 物件里有多少個成員元素，取決于垃圾回識訓制有沒有運行，運行前后成員個數可能不一致，遍歷結束之后，有的成員可能取不到，被垃圾回收了，因此 ES6 規定，WeakSet 物件是無法被遍歷的，也沒有辦法拿到它包含的所有元素，

屬性：
constructor：建構式
方法：

• add(value)方法：在 WeakSet 中添加一個元素，如果添加的元素已存在，則不會進行操作，
• delete(value)方法：洗掉元素 value
• has(value)方法：判斷 WeakSet 物件中是否包含 value
• clear()方法：清空所有元素

WeakMap

WeakMap 物件是一組鍵值得集合，其中的鍵是弱參考，注意：鍵必需是弱參考，而值可以是任意，
注意：WeakMap 弱參考的只是鍵名，而不是鍵值，鍵值依然是正常參考，

WeakMap 和 Map 區別：
WeakMap 中，每個鍵對自己所參考物件的參考都是弱參考，在沒有其他參考和該鍵參考同一物件，這個物件將會被垃圾回收，相對應的 key 則變成無效的，所以，WeakSet 的 key 是不可列舉的，
屬性：
constructor：建構式
方法：

• set(key,value)方法：設定一組 key 關聯物件
• delete(key)方法：移出 key 的關聯物件
• has(value)方法：判斷 WeakSet 物件中是否包含 value
• get(key)方法：回傳 key 關聯物件，沒有則回傳 undefined

總結

• Set
  • 成員唯一，無序且不會重復
  • 類似于陣列集合，鍵值和鍵名是一致的（只有鍵值，沒有鍵名）
  • 可以遍歷，方法有 add，delete，has
• WeakSet
  • 只能存盤對應參考，不能存放值
  • 成員都是弱參考，會被垃圾回識訓制回收
  • 不能遍歷，方法有 add，delete，has
• Map
  • 鍵名唯一不可重復
  • 類似于集合，鍵值對的集合，任何值都可以作為一個鍵或者一個值
  • 可以遍歷，可以轉換各種資料格式，方法 get，set，has，delet
• WeakMap
  • 只接受物件為鍵名，不接受其他型別的值作為鍵名，鍵值可以是任意
  • 鍵名是拖參考，鍵名所指向的物件，會被垃圾回識訓制回收
  • 不能遍歷，方法 get，set，has，delete

標籤：JavaScript

上一篇：如何在CSS中設定cellpadding和cellspacing

下一篇：01.ElementUI原始碼學習:專案初始化和webpack配置