ES6學習筆記之Set和Map資料結構詳解

NO IMAGE

本文例項講述了ES6學習筆記之Set和Map資料結構。分享給大家供大家參考,具體如下:

一.Set

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

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

1 . Set函式可以接受一個陣列(或類似陣列的物件)作為引數,用來初始化。


var s = new Set();
var set = new Set([1, 2, 3, 4, 4]);
[...set]  // [1, 2, 3, 4]
var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

2.Set 支援 add(item) 方法,用來向 Set 新增任意型別的元素,如果已經新增過則自動忽略;has(item) 方法用來檢測 Set 中是否存在指定元素;delete(item) 方法用來從 Set 中刪除指定元素;clear() 用來清空 Set;獲取 Set 集合長度用 size 屬性。如下:

JS


var set = new Set();
set.add(window);
set.has(window); // true
set.size; // 1
set.add(window);
set.add(1);
set.size; // 2
set.delete(window);
set.has(window); // false
set.clear();
set.size; // 0

Set 呼叫 add、has、delete 等方法時對 key 進行的比較,不做型別轉換。向Set加入值的時候,不會發生型別轉換,所以5和”5”是兩個不同的值。

Set 中,NaN 只能新增一次;

Set 中,「-0」和「0 或 0」可以同時存在,因為符號不一樣;
另外,兩個物件總是不相等的。


let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2

上面程式碼表示,由於兩個空物件不相等,所以它們被視為兩個值。

3.除陣列重複成員的方法。


var set = new Set([1, 2, 3, 4, 4]);
[...set]  // [1, 2, 3, 4]

4.Set例項屬性和方法

屬性:

Set.prototype.constructor:建構函式,預設就是Set函式。
Set.prototype.size:返回Set例項的成員總數。

Set例項的方法分為兩大類:操作方法(用於運算元據)和遍歷方法(用於遍歷成員)。

方法:

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

上面這些屬性和方法的例項如下。


s.add(1).add(2).add(2);
// 注意2被加入了兩次
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.delete(2);
s.has(2) // false

Array.from方法可以將Set結構轉為陣列。


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

5.Set的遍歷

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

keys():返回鍵名的遍歷器
values():返回鍵值的遍歷器
entries():返回鍵值對的遍歷器

key方法、value方法、entries方法返回的都是遍歷器物件

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

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

forEach():使用回撥函式遍歷每個成員


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"]
//可以省略values方法,直接用for...of迴圈遍歷Set。
for (let x of set) {
console.log(x);
}
// red
// green
// blue

Set結構的例項的forEach方法,用於對每個成員執行某種操作,沒有返回值。該函式的引數依次為鍵值、鍵名、集合本身(下例省略了該引數)。另外,forEach方法還可以有第二個引數,表示繫結的this物件。


let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6

6.應用

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


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}

如果想在遍歷操作中,同步改變原來的Set結構,目前沒有直接的方法,但有兩種變通方法。一種是利用原Set結構對映出一個新的結構,然後賦值給原來的Set結構;另一種是利用Array.from方法。


// 方法一
let set = new Set([1, 2, 3]);
set = new Set([...set].map(val => val * 2));
// set的值是2, 4, 6
// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6

二、WeakSet

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

首先,WeakSet的成員只能是物件,而不能是其他型別的值。

其次,WeakSet中的物件都是弱引用,即垃圾回收機制不考慮WeakSet對該物件的引用

三、Map

1、Map結構的目的和基本用法:

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

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

物件作為引數:


var m = new Map();
var o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content" 使用set方法,將物件o當作m的一個鍵,然後又使用get方法讀取這個鍵,

作為建構函式,Map也可以接受一個陣列作為引數。該陣列的成員是一個個表示鍵值對的陣列。


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"

注意:

a. 字串true和布林值true是兩個不同的鍵。

b. 如果對同一個鍵多次賦值,後面的值將覆蓋前面的值。


let map = new Map();
map.set(1, 'aaa')
map.set(1, 'bbb');
map.get(1) // "bbb"

c. 如果讀取一個未知的鍵,則返回undefined。

d.只有對同一個物件的引用,Map結構才將其視為同一個鍵。這一點要非常小心。同理,同樣的值的兩個例項,在Map結構中被視為兩個鍵。
好處:

由上可知,Map的鍵實際上是跟記憶體地址繫結的,只要記憶體地址不一樣,就視為兩個鍵。這就解決了同名屬性碰撞(clash)的問題,我們擴充套件別人的庫的時候,如果使用物件作為鍵名,就不用擔心自己的屬性與原作者的屬性同名。

e. 如果Map的鍵是一個簡單型別的值(數字、字串、布林值),則只要兩個值嚴格相等,Map將其視為一個鍵,包括0和-0。另外,雖然NaN不嚴格相等於自身,但Map將其視為同一個鍵。


let map = new Map();
map.set(NaN, 123);
map.get(NaN) // 123
map.set(-0, 123);
map.get( 0) // 123

2.Map例項屬性和操作方法

(1)size屬性:返回Map結構的成員總數。


let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2

(2)set(key, value) 方法設定key所對應的鍵值,然後返回整個Map結構。如果key已經有值,則鍵值會被更新,否則就新生成該鍵。


var m = new Map();
m.set("edition", 6)    // 鍵是字串
m.set(262, "standard")   // 鍵是數值
m.set(undefined, "nah")  // 鍵是undefined

set方法返回的是Map本身,因此可以採用鏈式寫法。


let map = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');

(3)get(key)方法讀取key對應的鍵值,如果找不到key,返回undefined。


var m = new Map();
var hello = function() {console.log("hello");}
m.set(hello, "Hello ES6!") // 鍵是函式
m.get(hello) // Hello ES6!

(4)has(key)方法返回一個布林值,表示某個鍵是否在Map資料結構中。


var m = new Map();
m.set("edition", 6);
m.set(262, "standard");
m.set(undefined, "nah");
m.has("edition")   // true
m.has("years")    // false
m.has(262)      // true
m.has(undefined)   // true

(5)delete(key)方法刪除某個鍵,返回true。如果刪除失敗,返回false。


var m = new Map();
m.set(undefined, "nah");
m.has(undefined)   // true
m.delete(undefined)
m.has(undefined)    // false

(6)clear() 方法清除所有成員,沒有返回值。


let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
map.clear()
map.size // 0

3.遍歷方法

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

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

需要特別注意的是,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);
}

Map結構轉為陣列結構,比較快速的方法是結合使用擴充套件運算子(…)。


let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

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


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'}

Map還有一個forEach方法,與陣列的forEach方法類似,也可以實現遍歷。


map.forEach(function(value, key, map) {
console.log("Key: %s, Value: %s", key, value);
});

4、與其他資料結構的轉換

(1)Map轉為陣列:擴充套件運算子(…)


let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

(2)陣列轉為Map:將陣列轉入Map建構函式


new Map([[true, 7], [{foo: 3}, ['abc']]])
// Map {true => 7, Object {foo: 3} => ['abc']}

(3)Map轉為物件:前提是 所有Map的鍵都是字串,它可以轉為物件。


function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

(4)物件轉為Map


function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
objToStrMap({yes: true, no: false})
// [ [ 'yes', true ], [ 'no', false ] ]

(5)Map轉為JSON

Map轉為JSON要區分兩種情況。一種情況是,Map的鍵名都是字串,這時可以選擇轉為物件JSON。


function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

另一種情況是,Map的鍵名有非字串,這時可以選擇轉為陣列JSON。


function mapToArrayJson(map) {
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

(6)JSON轉為Map

JSON轉為Map,正常情況下,所有鍵名都是字串。


function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes":true,"no":false}')
// Map {'yes' => true, 'no' => false}

但是,有一種特殊情況,整個JSON就是一個陣列,且每個陣列成員本身,又是一個有兩個成員的陣列。這時,它可以一一對應地轉為Map。這往往是陣列轉為JSON的逆操作。


function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

四、WeakMap

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

希望本文所述對大家ECMAScript程式設計有所幫助。

您可能感興趣的文章:

ES6教程之for迴圈和Map,Set用法分析ES6新特性五:Set與Map的資料結構例項分析ES6學習筆記之map、set與陣列、物件的對比