1. 程式人生 > >js-ES6學習筆記-Set結構和Map結構

js-ES6學習筆記-Set結構和Map結構

基本類 實例 記錄 lba post 而且 同名 方法 zha

http://www.cnblogs.com/lonhon/

1、ES6 提供了新的數據結構 Set。它類似於數組,但是成員的值都是唯一的,沒有重復的值。

Set 本身是一個構造函數,用來生成 Set 數據結構。

2、Set 函數可以接受一個數組(或類似數組的對象)作為參數,用來初始化。

3、Set.prototype.size:返回Set實例的成員總數。

四個操作方法。

  • add(value):添加某個值,返回Set結構本身。
  • delete(value):刪除某個值,返回一個布爾值,表示刪除是否成功。
  • has(value):返回一個布爾值,表示該值是否為Set的成員。
  • clear():清除所有成員,沒有返回值。

4、Set結構的實例有四個遍歷方法,可以用於遍歷成員。

  • keys():返回鍵名的遍歷器
  • values():返回鍵值的遍歷器
  • entries():返回鍵值對的遍歷器
  • forEach():使用回調函數遍歷每個成員

由於 Set 結構沒有鍵名,只有鍵值(或者說鍵名和鍵值是同一個值),所以keys方法和values方法的行為完全一致。

entries方法返回的遍歷器,同時包括鍵名和鍵值,所以每次輸出一個數組,它的兩個成員完全相等。

可用for...of循環遍歷Set。

5、擴展運算符(...)內部使用for...of循環,所以也可以用於Set結構。

let set = new Set([‘red‘, ‘green‘, ‘blue‘]);
let arr = [...set];
// [‘red‘, ‘green‘, ‘blue‘]

6、使用Set可以很容易地實現並集(Union)、交集(Intersect)和差集(Difference)。

技術分享
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 並集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}
技術分享

7、WeakSet結構與Set類似,也是不重復的值的集合。但是,它與Set有兩個區別。

首先,WeakSet的成員只能是對象,而不能是其他類型的值。

其次,WeakSet中的對象都是弱引用,即垃圾回收機制不考慮WeakSet對該對象的引用,也就是說,如果其他對象都不再引用該對象,那麽垃圾回收機制會自動回收該對象所占用的內存,不考慮該對象還存在於WeakSet之中。這個特點意味著,無法引用WeakSet的成員,因此WeakSet是不可遍歷的。

8、WeakSet的一個用處,是儲存DOM節點,而不用擔心這些節點從文檔移除時,會引發內存泄漏。

9、JavaScript的對象(Object),本質上是鍵值對的集合(Hash結構),但是傳統上只能用字符串當作鍵。這給它的使用帶來了很大的限制。

ES6提供了Map數據結構。它類似於對象,也是鍵值對的集合,但是“鍵”的範圍不限於字符串,各種類型的值(包括對象)都可以當作鍵。也就是說,Object結構提供了“字符串—值”的對應,Map結構提供了“值—值”的對應,是一種更完善的Hash結構實現。如果你需要“鍵值對”的數據結構,Map比Object更合適。

10、Map的鍵實際上是跟內存地址綁定的,只要內存地址不一樣,就視為兩個鍵。這就解決了同名屬性碰撞(clash)的問題,我們擴展別人的庫的時候,如果使用對象作為鍵名,就不用擔心自己的屬性與原作者的屬性同名。

11、結合數組的map方法、filter方法,可以實現Map的遍歷和過濾(Map本身沒有mapfilter方法)。

技術分享
let map0 = new Map()
  .set(1, ‘a‘)
  .set(2, ‘b‘)
  .set(3, ‘c‘);

let map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 產生Map結構 {1 => ‘a‘, 2 => ‘b‘}

let map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, ‘_‘ + v])
    );
// 產生Map結構 {2 => ‘_a‘, 4 => ‘_b‘, 6 => ‘_c‘}
技術分享

12、WeakMap結構與Map結構基本類似,唯一的區別是它只接受對象作為鍵名(null除外),不接受其他類型的值作為鍵名,而且鍵名所指向的對象,不計入垃圾回收機制。

典型應用是,一個對應DOM元素的WeakMap結構,當某個DOM元素被清除,其所對應的WeakMap記錄就會自動被移除。基本上,WeakMap的專用場合就是,它的鍵所對應的對象,可能會在將來消失。WeakMap結構有助於防止內存泄漏。

轉自:http://www.cnblogs.com/zczhangcui/p/6441385.html

js-ES6學習筆記-Set結構和Map結構