ES6新特性五：Set與Map的資料結構執行個體分析，es6執行個體分析

ES6新特性五：Set與Map的資料結構執行個體分析，es6執行個體分析

本文執行個體講述了ES6新特性五之Set與Map的資料結構。分享給大家供大家參考，具體如下：

1. Set

① 定義：它類似於數組，但是成員的值都是唯一的，沒有重複的值。Set本身是一個建構函式，用來產生Set資料結構。

var s = new Set();[2,3,5,4,5,2,2].map(x => s.add(x))console.log(s); //Set { 2, 3, 5, 4 }

② 屬性和方法

Set結構有以下屬性。

Set.prototype.constructor：建構函式，預設就是Set函數。
Set.prototype.size：返回Set的成員總數。

Set資料結構有以下方法。

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

var s = new Set();s.add(1).add(2).add(2);// 注意2被加入了兩次console.log(s.size) // 2console.log(s.has(1)) // trueconsole.log(s.has(2)) // trueconsole.log(s.has(3)) // falseconsole.log(s.delete(2));console.log(s.has(2)) // false

③ Array.from方法可以將Set結構轉為數組

var items = new Set([1, 2, 3, 4, 5]);var arr = Array.from(items);//運用: 去除數組中重複元素的方法var array = [1,2,3,2,3,4];function fun(array) {  return Array.from(new Set(array));}console.log(fun(array));//[ 1, 2, 3, 4 ]

④ Set結構有一個values方法，返回一個遍曆器。

var s = new Set([1, 2, 3, 4, 5]);console.log(s.values());//SetIterator { 1, 2, 3, 4, 5 }//Set結構的預設遍曆器就是它的values方法console.log(Set.prototype[Symbol.iterator] === Set.prototype.values)//true//所以遍曆可以直接使用 for...offor (let x of s) {  console.log(x);}//由於擴充運算子（...）內部使用for...of迴圈，將Set轉化為數組。var arr = [...s];console.log(arr);//[ 1, 2, 3, 4, 5 ]

⑤ Set結構的foreach方法

var set = new Set([1, 2, 3]);set.forEach(function(value,key){  console.log(value);});

⑥ Set結構也有keys和entries方法，這時每個值的鍵名就是索引值。

let set = new Set(['red', 'green', 'blue']);for ( let item of set.keys() ){  console.log(item);}// red// green// bluefor ( let [key, value] of set.entries() ){  console.log(key, value);}// red, red// green, green// blue, blue

⑦ 數組的map和filter方法的運用

map(x){}: 遍曆數組，對每一元素進行處理，返回處理後的數組。
filter(x){}: 遍曆數組，對每一個元素進行校正，返回含有通過校正元素的數組。

var set = new Set([1, 2, 3]);set = new Set([...set].map(x => x * 2));console.log(set);//返回Set結構：{2, 4, 6}var set = new Set([1, 2, 3, 4, 5]);set = new Set([...set].filter(x => (x % 2) == 0));console.log(set);// 返回Set結構：{2, 4}

2. Map

① 原因：JavaScript的對象，本質上是索引值對的集合，但是只能用字串當作鍵。

② 定義：它類似於對象，也是索引值對的集合，但是“鍵”的範圍不限於字串，各種類型的值（包括對象）都可以當作鍵。

③ 屬性和方法

size：返回成員總數。
set(key, value)：設定key所對應的索引值，然後返回整個Map結構。如果key已經有值，則索引值會被更新，否則就新產生該鍵。
get(key)：讀取key對應的索引值，如果找不到key，返回undefined。
has(key)：返回一個布爾值，表示某個鍵是否在Map資料結構中。
delete(key)：刪除某個鍵，返回true。如果刪除失敗，返回false。
clear()：清除所有成員，沒有傳回值。

④ 與set 相同 可以接受數組參數建立map，但數組的元素是一個個代表索引值對的數組構成。

var map = new Map();var map1 = new Map([["name", "張三"], ["title", "Author"]]);console.log(map1.size)//2

⑤ 只有對同一個對象的引用，Map結構才將其視為同一個鍵，只要記憶體位址不一樣，就視為兩個鍵。

var map = new Map();map.set(['a'], 555);console.log(map.get(['a'])) // undefinedvar k1 = ['a'];//雖然值相同，但這是一個新的值，記憶體位址不一樣,new 的var k2 = ['a'];map.set(k1, 111);map.set(k2, 222);

⑥ 遍曆

Map結構的預設遍曆器介面（Symbol.iterator屬性），就是entries方法。

keys()：返回鍵名的遍曆器。
values()：返回索引值的遍曆器。
entries()：返回所有成員的遍曆器。

console.log(Map[Symbol.iterator] === Map.entries)//truelet map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);console.log([...map.keys()]);//[ 1, 2, 3 ]console.log([...map.values()]);//[ 'one', 'two', 'three' ]console.log([...map.entries()]);//[ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]console.log([...map]);[ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]

⑦Map還有一個forEach方法，進行遍曆。

⑧與set相同，map可以結合數組的map方法、filter方法，可以實現Map的遍曆和過濾。

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