1. 程式人生 > >ECMAScript 6 學習系列課程 (ES6 Set和Map資料結構)

ECMAScript 6 學習系列課程 (ES6 Set和Map資料結構)

這裡寫圖片描述

學過Java的同學,一定用過List和Map的資料結構,不過JavaScript在最新版本中,也提供了Set和Map的資料結構,的確是廣大開發者的福音。

ES6提供了新的資料結構Set。它類似於陣列,但是成員的值都是唯一的,沒有重複的值。

Set

Set本身是一個建構函式,用來生成Set資料結構。

var s = new Set();

[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

上面程式碼中,也展示了一種去除陣列重複成員的方法。

// 去除陣列的重複成員
[...new Set(array)]

如果向Set例項添加了兩個NaN,但是隻能加入一個,在Set內部,兩個NaN是相等,但是兩個物件總是不相等的。

let set = new Set();

set.add({});
set.size // 1

set.add({});
set.size // 2

對於Set家族還有一個方法要值得我們注意,那就是WeakSet,WeakSet的成員只能是物件,而不能是其他型別的值。

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

Map

對於JavaScript,Map的存在是以鍵值對的形式, (key–value), JavaScript的物件(Object),本質上是鍵值對的集合(Hash結構),但是隻能用字串當作鍵。這給它的使用帶來了很大的限制。

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

map.size // 2
map.has('name') // true
map.get('name') // "張三"
map.has('title') // true
map.get('title') // "Author"
var m = new
Map(); var o = {p: "Hello World"}; m.set(o, "content") m.get(o) // "content" m.has(o) // true m.delete(o) // true m.has(o) // false

Map的用法簡單很多,包括get set size delete等方法。

遍歷一個map的方法同樣有很多,我們看下程式碼:

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}

// 等同於使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}

以上就是ES6 Map和Set的諸多用法,大家自己嘗試一下吧!