JS新增物件Map、Set

• Map
• Set

Map

Map對映是ES6裡面新增的一個物件，是一組鍵值對的結構，具有極快的查詢速度。

<script type="text/javascript">
	// 初始化Map需要一個二維陣列，或者直接初始化一個空Map
	var m1 = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]);
	var m11 = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]);
	var m2 = new Map();
	
	console.log(m1);					// 返回Map  {"a" => "a1", "b" => "b2", "c" => "c3"}
	console.log(typeof(m1));			// object, Map仍屬於 object
	console.log(m1 == m11)				// flase  雖然兩個Map裡面的值一樣，但是是屬於不同的object

	// 1. size屬性，返回 Map的元素數
		console.log(m1.size);			// 3

	// 2. keys()	獲取Map的所有key
		console.log(m1.keys());			// 返回 MapIterator {"a", "b", "c"}

	// 3. values()	獲取Map的所有value
		console.log(m1.values());		// 返回 MapIterator {"a1", "b2", "c3"}

	// 4. entries()	獲取Map所有成員  
		console.log(m1.entries());		// 返回 MapIterator {"a" => "a1", "b" => "b2", "c" => "c3"}

	// 5. forEach()	迴圈操作對映元素
		m1.forEach(function(value, key, map) {
			// value:  key對應的值，  
			// key: Map的key，(map引數已省略情況下，key可省略)
			// map:  Map本身，(該引數是可省略引數)
			console.log(value);			// key對應的值   a1  b2  c3
			console.log(key);			// key 			a   b   c
			console.log(map);			// Map本身      Map Map Map
		});

	// 6. set()		給Map新增資料，  返回新增後的Map
		console.log(m2.set('a', 1));	// 返回Map  {"a" => 1}
		console.log(m2.set('b', 2));	// {"a" => 1, "b" => 2}
		console.log(m2.set('a', 11));	// {"a" => 11, "b" => 2} 給已存在的鍵賦值會覆蓋掉之前的值，  

	// 7. has()		檢測是否存在某個key， 返回布林值，有：true； 沒有：false
		console.log(m2.has('a'));		// true
		console.log(m2.has('c'));		// false

	// 8. get()		獲取某個key的值，返回key對應的值，沒有則返回undefined	
		console.log(m2.get('a')); 		// 11
		console.log(m2.get('c'));		// undefined

	// 9. delete()	刪除某個key及其對應的value，返回布林值，成功：true； 失敗：false
		console.log(m2.delete('b'));	// true
		console.log(m2.delete('d'));	// false
		
		console.log(m2.get('b'));		// undefined， 因為b已經刪除

	// 10. clear()	清除所有的值，返回 undefined
		console.log(m1.clear());		// undefined
		console.log(m1);				// {} 
</script>
 

Set

Set也是ES6新增的物件，Set是一組key的集合，但不儲存value, 而且key不重複，可自動排重

<script type="text/javascript">
	// 初始化Map需要提供一個Array作為輸入，或者直接建立一個空Set
	var s1 = new Set(['a', 'b', 'c']);
	var s11 = new Set(['a', 'b', 'c']);
	var s2 = new Set(['a', 'a', 'b', 'b', 'c', 'c']);
	var s3 = new Set();
	
	console.log(s1);					// 返回 Set(3) {"a", "b", "c"}
	console.log(s2);					// 返回 Set(3) {"a", "b", "c"}
	console.log(typeof(s1));			// object
	console.log(s1 == s11)				// false
	console.log(s1 == s2)				// false
	
	// 1. size屬性  返回Set的元素數
		console.log(s1.size);			// 3
	
	// 2. keys() 獲取Set的所有key	
		console.log(s1.keys());			// 返回 SetIterator {"a", "b", "c"}
	
	// 3. values()  獲取Set的值，返回結果和 keys()一樣
		console.log(s1.values());		// 返回 SetIterator {"a", "b", "c"}
	
	// 4. entries() 獲取Set所有成員，返回同keys()
		console.log(s1.entries());		// 返回 SetIterator {"a", "b", "c"}
	
	// 5. forEach() 迴圈操作集合元素	
		s1.forEach(function(v, k, s){	// v、k是集合的鍵，s是集合本身
			console.log(v);				//  a   b   c
			console.log(k);				//  a   b   c
			console.log(s);				// Set Set Set
		});
	// 6. add()   給集合新增資料	返回新增後的Set
		console.log(s3.add('aa'));		// Set(1) {"aa"}
		console.log(s3.add('bb'));		// Set(2) {"aa", "bb"}
		console.log(s3.add('aa'));		// Set(2) {"aa", "bb"}	新增重複的值，會被排重掉，
	
	// 7. has() 查詢集合中是否包含某個元素  返回布林值 有：true； 沒有：false
		console.log(s3.has('aa'));		// true
		console.log(s3.has('ff'));		// false	
	
	// 8. delete() 刪除集合中的某個元素  返回布林值
		console.log(s3.delete('aa'));	// true
		console.log(s3.delete('ee'));	// false
	
		console.log(s3);				// Set(1) {"bb"}
	
	// 9. clear()  清除集合的所有值	返回undefined
		console.log(s1.clear());		// undefined
		
		console.log(s1);				// Set(0) {}
</script>