es6的set和map學習

Set

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

因爲 Set 中的值總是唯一的,所以需要判斷兩個值是否相等。在ECMAScript規範的早期版本中,這不是基於和===操作符中使用的算法相同的算法。具體來說,對於 Set s, +0 (+0 嚴格相等於-0)和-0是不同的值。然而,在 ECMAScript 2015規範中這點已被更改。有關詳細信息,請參閱瀏覽器兼容性 表中的“value equality for -0 and 0”。

另外,NaN和undefined都可以被存儲在Set 中, NaN之間被視爲相同的值(儘管 NaN !== NaN)。
Set本身是一個構造函數,用來生成 Set 數據結構。

Set函數可以接受一個數組(或者具有 iterable 接口的其他數據結構)作爲參數,用來初始化。

let b = new Set(['a','b','c','a','b']);
// Set(3) {"a", "b", "c"}

set傳入參數也可以一試string;

let a = new Set('aabbcc');
// Set(3) {a,b,c}

Set 結構的實例有以下屬性。

  • Set.prototype.constructor:構造函數,默認就是Set函數。
  • Set.prototype.size:返回Set實例的成員總數。

Set 實例的方法分爲兩大類:操作方法(用於操作數據)和遍歷方法(用於遍歷成員)。下面先介紹四個操作方法。

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

Array.from方法可以將 Set 結構轉爲數組。或者是擴展運算符...

const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
const test = [...items];

遍歷操作

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

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

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

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

Set 結構的實例默認可遍歷,它的默認遍歷器生成函數就是它的values方法。

Set.prototype[Symbol.iterator] === Set.prototype.values

// true
這意味着,可以省略values方法,直接用for...of循環遍歷 Set。

let set = new Set(['red', 'green', 'blue']);

for (let x of set) {
  console.log(x);
}
// red
// green
// blue

WeakSet

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

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

const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set

WeakSet 中的對象都是弱引用,即垃圾回收機制不考慮 WeakSet 對該對象的引用,也就是說,如果其他對象都不再引用該對象,那麼垃圾回收機制會自動回收該對象所佔用的內存,不考慮該對象還存在於 WeakSet 之中。

  • WeakSet.prototype.add(value):向 WeakSet 實例添加一個新成員。
  • WeakSet.prototype.delete(value):清除 WeakSet 實例的指定成員。
  • WeakSet.prototype.has(value):返回一個布爾值,表示某個值是否在

Map

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

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

const map = new Map([
  ['name', '張三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "張三"

不僅僅是數組,任何具有 Iterator 接口、且每個成員都是一個雙元素的數組的數據結構(詳見《Iterator》一章)都可以當作Map構造函數的參數。這就是說,Set和Map都可以用來生成新的 Map。

  • Map.prototype.clear()
    移除Map對象的所有鍵/值對 。
  • Map.prototype.delete(key)
    如果 Map 對象中存在該元素,則移除它並返回 true;否則如果該元素不存在則返回 false
  • Map.prototype.get(key)
    返回鍵對應的值,如果不存在,則返回undefined。
  • Map.prototype.has(key)
    返回一個布爾值,表示Map實例是否包含鍵對應的值。
  • Map.prototype.keys()
    返回一個新的 Iterator對象, 它按插入順序包含了Map對象中每個元素的鍵 。
  • Map.prototype.set(key, value)
    設置Map對象中鍵的值。返回該Map對象。

遍歷方法
Map 結構原生提供三個遍歷器生成函數和一個遍歷方法。

  • keys():返回鍵名的遍歷器。
  • values():返回鍵值的遍歷器。
  • entries():返回所有成員的遍歷器。
  • forEach():遍歷 Map 的所有成員。

WeakMap

WeakMap與Map的區別有兩點。

首先,WeakMap只接受對象作爲鍵名(null除外),不接受其他類型的值作爲鍵名。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章