深入理解ES6 007【學習筆記】

Set 集合與 Map 集合

在 JavaScript (JS) 中有一個 in 運算子，其不需要讀取物件的值就可以判斷屬性在物件中是否存在，如果存在就回傳 true。但是 in 運算子也會檢索物件的原型，只有當物件原型為 null 時使用這個方法才比較穩妥。

Set 集合

let set = new Set()
set.add(5)
set.add("5")
console.log(set.size) // 2
const key1={},key2={}
set.add(key1)
set.add(key1)
console.log(set.size) // 4
// 傳入相同值實際上會被忽略
let set1 = new Set(1,2,3,4,5,5,5,5)
console.log(set.size) //5
set1.has(5) //true
set1.has(6) // false
set1.delete(5)
set1.has(5) //false

set1.clear() // 所有元素被清除

Set 集合中不會對所儲存的值進行強制型別轉換，數字 5 和字串「5」可以作為兩個獨立元素存在（引擎內部使用之前提過的 Object.is() 來判斷），如果向 Set 中加入多個物件則它們之間彼此保持獨立。

Set 集合的 forEach 方法

forEach() 方法的回呼函式接受以下 3 個參數

• Set 集合下一個索引位置
• 與第一個參數相同的值
• 被遍歷的 Set 集合本身

Set 集合的 forEach() 方法與陣列中的 forEach() 方法有一個奇怪的差別：回呼函式前兩個參數的值竟然是一樣的。實際上 Map 集合的 forEach() 的回呼函式都接受 3 個參數，前兩個分別是值和鍵名。

forEach 函式的第二個參數與陣列一樣，如果需要回呼函式中使用 this，則可以將它作為第二個參數傳入

let set = new Set([1,2])
let processor = {
  output(value){
    console.log(value)
  },
  process(dataSet){
    // 這裡使用箭頭函數，就無須再將this作為第二個參數傳入回調函數了
    dataSet.forEach(function(value){
      this.output(value)
    },this)
  }
}
processor.process(set)

儘管 Set 集合更適合用來追蹤多個值，而且又可以透過 forEach() 方法操作集合中的每一個元素，但是你不能像存取陣列元素那樣直接透過索引存取集合中的元素。如有需要，最好先將 Set 集合轉換成一個陣列

let set = new Set([1,2,3,3,3,4,5])
arrray = [...set]
console.log(array) // [1,2,3,4,5] 去重

function eliminateDuplicates(items){
  return [...new Set(items)]
}
let numbers = [1,2,3,3,3,4,5],
noDuplicates = eliminateDuplicates(numbers);
console.log(noDuplicates); // [1,2,3,4,5]

Weak Set 集合

將物件儲存在 Set 的實例中與儲存在變數中一樣，只要 Set 實例中的引用存在，垃圾回收機制就無法釋放該物件的記憶體空間，於是之前提到的 Set 型別可以被視為一個強引用的 Set 集合。如下所示

let set = new Set(),
key = {};
set.add(key);
console.log(set.size) // 1
// 移除原始引用
key = null;
console.log(set.size) // 1
// 重新取回原始引用
key = [...set][0]

舉例來說，我們使用這個 Set 儲存一個 DOM 物件，當有腳本把這個 DOM 元素刪除掉，那麼 Set 中還保留著這份引用（引起記憶體洩漏），所以 ES6 引入了一個 WeakSet 集合。WeakSet 只能儲存物件的弱引用，並且不可以儲存原始值；集合中的弱引用如果是物件的唯一引用，則會被回收並釋放相應記憶體。

// 集合支持add()/has()/delete()
let set = new WeakSet(),key = {};
// 向集合添加對象
set.add(key);
console.log(set.has(key)); // true
set.delete(key);
console.log(set.has(key)); // false
let key1 = {}, key2 = {};
set = new WeakSet([key1,key2]) // 如果數組中包含其非對象值，程序會拋出錯誤
console.log(set.has(key1)) // true
console.log(set.has(key2)) // true

// #################
// 移除對象key的最後一個強引用（Weak Set中的引用也自動移除）
let set = new Set(),
key = {};
set.add(key);
console.log(set.has(key)) // true
// 移除對象key的最後個強引用（Weak Set中的引用也自動移除）
key = null;
// 這段代碼執行過後，就無法訪問WeakSet中的key的引用了，由於我們需要向has方法傳遞一個強引用才能驗證這個弱引用是否已被移除了。

• WeakSet
• 如果向 add/has/delete 3 個方法傳入非物件參數會導致程式報錯
• 不可迭代 (Iterable)，不能使用 for-of 迴圈
• 不暴露任何迭代器 keys 和 values，所以無法透過程式本身來檢測其中的內容
• 不支援 forEach
• 不支援 size

Map (映射)

• set
• get
• has
• delete
• clear
• size 屬性

初始化方法

let map = new Map([["name","Nicholas"],["age",23]])

forEach((value,key,ownerMap)=>{},綁定上下文)

let map = new Map([["name","Nicholas"],["age",23]])
map.forEach(function(value,key,ownerMap){
   console.log(key+" "+value);
   console.log(ownerMap === map)
})

WeakMap (弱映射)

原理與 WeakSet 一致，鍵是對物件的弱引用，而且 key 只能是儲存物件

let map = new WeakMap(),
element = document.querySelector('.element');
map.set(element,"Original")
let value = map.get(element)
console.log(value) // Original
// 移除element元素
element.parentNode.removeChild(element);
element = null;
// 此時Weak Map集合為空

私有物件資料

function Person(name){
  this._name = name;
}
Person.prototype.getName = function(){
  return this._name;
}
// 約定前綴為下划線的屬性為私有屬性，不允許在對象實例外改變這個屬性。例如，只能通過getName()方法讀取this._name，所以它也有可能在無意間被覆寫

ES5 透過以下這種模式建立一個接近真正私有資料的物件

var Person = (function(){
  var privateData = {},
  privateId = 0;
  function Person(name){
    Object.defineProperty(this,"_id",{value:privateId++})
    privateData[this._id] = {
      name:name
    }
  }
  Person.prototype.getName = function(){
    return privateData[this._id].name
  }
  return Person
}())

呼叫 Person 建構函式時，屬性 _id 的值被加 1，這個屬性不可列舉、不可配置且不可寫入，上述程式碼最大的問題是無法主動管理，由於無法取得物件實例何時被銷毀，因此 privateData 中的資料就永遠不會消失。而且使用 WeakMap 集合可以解決這個問題

let Person = (function(){
  let privateData = new WeakMap();
  function Person(name){
    privateData.set(this,{name:name})
  }
  Person.prototype.getName = function(){
    return privateData.get(this).name
  }
  return Person
}())
// 只要對象實例被銷毀，相關信息也會被銷毀，從而保證了信息的私有性

只要物件實例被銷毀，相關資訊也會被銷毀，從而保證了資訊的私有性