ES6+ 數(shù)據(jù)結(jié)構(gòu)擴(kuò)展

1. 前言

編程語(yǔ)言都具有內(nèi)建的數(shù)據(jù)結(jié)構(gòu)，但各種編程語(yǔ)言的數(shù)據(jù)結(jié)構(gòu)常有不同之處。本文將要說(shuō)的數(shù)據(jù)結(jié)構(gòu)就是 JavaScript 內(nèi)建的數(shù)據(jù)結(jié)構(gòu)及其屬性。

我們知道在 JavaScript 中有兩種數(shù)據(jù)類型，一種是基本數(shù)據(jù)類型，另一種是引用類型。ES5 在數(shù)據(jù)存儲(chǔ)時(shí)一般使用 Array 或 Object 來(lái)存儲(chǔ)數(shù)據(jù)。然而，在越來(lái)越復(fù)雜的業(yè)務(wù)中數(shù)組和對(duì)象已經(jīng)不能滿足我們對(duì)數(shù)據(jù)的存儲(chǔ)要求了。ES6 新增了兩個(gè)用于儲(chǔ)存的數(shù)據(jù)結(jié)構(gòu) ——Set 和 Map，極大地豐富了 JS 數(shù)據(jù)存儲(chǔ)的能力。

2. Set 數(shù)據(jù)結(jié)構(gòu)

ES5 中 JavaScript 中沒(méi)有所謂的集合概念，但是在其他一些語(yǔ)言如：C++、Java、python 等很早就有集合的概念了。ES6 對(duì)集合的數(shù)據(jù)結(jié)構(gòu)進(jìn)行了補(bǔ)充，引入了 Set 數(shù)據(jù)結(jié)構(gòu)。

Set 對(duì)象允許你存儲(chǔ)任何類型的值，且存儲(chǔ)的值是唯一的，存儲(chǔ)的值可以是原始類型或者是引用類型。并且 Set 對(duì)象提供了讀、寫(xiě)、查找和遍歷等方法，用以更加靈活地操作數(shù)據(jù)。

Set 是一個(gè)構(gòu)造函數(shù)，在使用時(shí)必須要使用 new 來(lái)創(chuàng)建一個(gè)實(shí)例，創(chuàng)建的實(shí)例基本上可以當(dāng)作數(shù)組來(lái)使用。構(gòu)造方法如下：

var set = new Set([iterable]);

在 new Set() 時(shí)，可以接收一個(gè)默認(rèn)值作為參數(shù)，這個(gè)參數(shù)需要滿足 可迭代 的要求。

下面我們看下方法的使用實(shí)例：

// 創(chuàng)建一個(gè)空的 Set 實(shí)例
var set = new Set() // Set(0) {}
// 添加數(shù)據(jù)
set.add('es6') // Set(1) {"es6"}
// 還可以鏈?zhǔn)教砑訑?shù)據(jù)
set.add('imooc').add('7') // Set(3) {"es6", "imooc", "7"}
// 接受一個(gè)可遍歷的對(duì)象，作為默認(rèn)值，大部分情況是數(shù)組
var  set  =  new Set([1, 2, 3])
console.log(set) // Set(3) {1, 2, 3}

上面的實(shí)例就是使用 Set 操作數(shù)據(jù)的過(guò)程，和數(shù)字不同的是對(duì)于數(shù)據(jù)的增刪改查 Set 都有對(duì)應(yīng)的方法，而數(shù)字則通過(guò)索引的方式來(lái)實(shí)現(xiàn)的，這樣在一定情況下會(huì)出現(xiàn)不可控的因素。后面的章節(jié)我們會(huì)對(duì) Set 做詳細(xì)的學(xué)習(xí)。

3. Map

我們都知道 Object 對(duì)象的鍵只能是基本類型，大部分情況都是字符串，并且 Object 存儲(chǔ)的數(shù)據(jù)是無(wú)序的，不能記住插入的先后順序。

ES6 為了彌補(bǔ) Object 的缺陷，新增了 Map 數(shù)據(jù)結(jié)構(gòu)用于存儲(chǔ)復(fù)雜的數(shù)據(jù)類型。Map 保存的是鍵值對(duì)，并且能夠記住鍵的插入順序，而且任何值都可以作為 Map 的鍵來(lái)使用，包括引用類型。

和 Set 一樣，Map 也是一個(gè)構(gòu)造函數(shù)，需要通過(guò) new 的方式來(lái)創(chuàng)建一個(gè) Map 實(shí)例。

var map = Map([iterable]);

在創(chuàng)建 Map 實(shí)例時(shí)可以接收一個(gè)特定的二維數(shù)組或是一個(gè)可遍歷的對(duì)象作為參數(shù)，這個(gè)參數(shù)內(nèi)的每一項(xiàng)是以鍵和值的方式來(lái)組合的，如： [key, value] 形式，第一個(gè)元素鍵，第二個(gè)元素是值。

// 創(chuàng)建一個(gè)空的 Map 對(duì)象
var map1 = new Map()
map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);
console.log(map1) // Map(3) {"a" => 1, "b" => 2, "c" => 3}

// map也可以進(jìn)行鏈?zhǔn)秸{(diào)用
var map2 = new Map()
map2.set('a', 1).set('b', 2).set('c', 3)
console.log(map2) // Map(3) {"a" => 1, "b" => 2, "c" => 3}

// 接收一個(gè)二維數(shù)組，二維數(shù)組中包含兩個(gè)值，key和value
var  map3  =  new Map([["x", 10], ["y", 20], ["z", 30]]);
console.log(map3) // Map(3) {"x" => 10, "y" => 20, "z" => 30}
console.log(map1.get('a')) // 1
console.log(map3.get('z')) // 30

上面的代碼展示了 Map 數(shù)據(jù)結(jié)構(gòu)添加和獲取操作，和 Set 一樣，Map 操作數(shù)據(jù)也是通過(guò)函數(shù)的方式來(lái)實(shí)現(xiàn)的。后面的章節(jié)我們會(huì)對(duì) Map 做詳細(xì)的學(xué)習(xí)

4. 數(shù)據(jù)轉(zhuǎn)換

上面說(shuō)到的 Set 和 Map 數(shù)據(jù)結(jié)構(gòu)的簡(jiǎn)單使用，它們還可以和數(shù)組和對(duì)象進(jìn)行對(duì)應(yīng)的轉(zhuǎn)換。這對(duì)于數(shù)據(jù)的操作是非常友好的。下面我們來(lái)看下 Set、Map 和 Array、Object 是如何進(jìn)行轉(zhuǎn)化的。

4.1 Set 轉(zhuǎn) Array

使用擴(kuò)展運(yùn)算符（...）可以將 Set 數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)化數(shù)組形式：

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

還可以是 ES6 中數(shù)組提供的 Array.from() 進(jìn)行轉(zhuǎn)化。

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

4.2 Array 轉(zhuǎn) Map

上文中學(xué)習(xí)了將一個(gè)帶鍵值對(duì)的二維數(shù)組傳入 Map 構(gòu)造函數(shù)，就可以得到一個(gè) Map 數(shù)據(jù)結(jié)構(gòu)，這樣就可以實(shí)現(xiàn)數(shù)組轉(zhuǎn)為 Map。

var map = new Map([['name', 'imooc'], [{name: 'imooc'}, ['JavaScript', 'ES6 wiki']]]);

上面代碼打印后的結(jié)果如下圖，引用類型也可以作為 Map 的鍵保存。

4.3 Map 轉(zhuǎn) Array

上面我們看到了二維數(shù)組轉(zhuǎn)為 Map 數(shù)據(jù)結(jié)構(gòu)，那么 Map 數(shù)據(jù)結(jié)構(gòu)怎么轉(zhuǎn)回?cái)?shù)組呢？其實(shí)很簡(jiǎn)單，和前面已經(jīng)提過(guò)的 Set 轉(zhuǎn)數(shù)組的方式一樣，Map 也可以使用擴(kuò)展運(yùn)算符 (…) 進(jìn)行轉(zhuǎn)換。

const map = new Map()
map.set('name', 'imooc')
map.set({name: 'imooc'}, ['JavaScript', 'ES6 wiki']);
[...myMap]
// [['name', 'imooc'], [{name: 'imooc'}, ['JavaScript', 'ES6 wiki']]]

4.4 Object 轉(zhuǎn) Map

Object 轉(zhuǎn) Map 沒(méi)有一步到位的方法，需要去遍歷 Object 然后逐個(gè)添加。

function objToMap(obj){
	let map = new Map();
	for (let [key, value] of Object.entries(obj)){
		map.set(key, value);
	}
	return  map;
}
objToMap({name:'imooc', lesson: 'ES6 Wiki'})
// Map(2) {"name" => "imooc", "lesson" => "ES6 Wiki"}

上面的代碼中，我們創(chuàng)建了一個(gè)方法用于 Object 轉(zhuǎn) Map 使用，函數(shù)內(nèi)部先構(gòu)造一個(gè) Map 實(shí)例，然后對(duì) Object 進(jìn)行遍歷，逐個(gè)添加到 Map 實(shí)例上。

4.5 Map 轉(zhuǎn) Object

在 Map 轉(zhuǎn) Object 時(shí)需要注意的是，因?yàn)?Map 實(shí)例上的鍵可以是任意類型，而 Object 上的鍵只能是字符串類型。所有，如果 Map 的鍵都是字符串，它可以轉(zhuǎn)為對(duì)象，如果鍵是一個(gè)對(duì)象，在轉(zhuǎn)為對(duì)象時(shí)會(huì)被進(jìn)行 toString 操作。

function mapToObj(map){
	const obj = {}
	for (let [key, value] of map){
		obj[key] = value;
	}
	return obj;
}
const map1 = new Map()
map1.set('name', 'imooc')
map1.set('lesson', 'ES6 Wiki');
mapToObj(map1) // {name: "imooc", lesson: "ES6 Wiki"}

const map2 = new Map()
map2.set('name', 'imooc')
map2.set({name: 'lesson'}, ['JavaScript', 'ES6 wiki']);
mapToObj(map2) // {name: "lesson", [object Object]: ["JavaScript", "ES6 wiki"]}

上面的代碼中需要注意的是 map2，它的第二個(gè)元素的鍵是一個(gè)對(duì)象，在轉(zhuǎn)換對(duì)象的鍵時(shí)進(jìn)行了 toString 操作，變成字符串 [object Object]。

5. 小結(jié)

本節(jié)主要學(xué)習(xí)了 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map 的基本使用，并介紹了 Set 和 Map 與 Array 和 Object 之間的轉(zhuǎn)化方法。從上面的學(xué)習(xí)中我們知道，ES6 新增 Set 和 Map 這兩個(gè)數(shù)據(jù)結(jié)構(gòu)，在彌補(bǔ) JavaScript 數(shù)據(jù)結(jié)構(gòu)的同時(shí)并規(guī)范了操作數(shù)據(jù)的方法。讓 JavaScript 更加像一門成熟的語(yǔ)言前進(jìn)。接下來(lái)的幾個(gè)小節(jié)我們會(huì)對(duì) Set 和 Map 進(jìn)行詳細(xì)的介紹。