ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)實(shí)例分析

這篇文章主要介紹“ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)實(shí)例分析”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)實(shí)例分析”文章能幫助大家解決問題。

Set

ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。 Set本身是一個(gè)構(gòu)造函數(shù)，用來生成 Set 數(shù)據(jù)結(jié)構(gòu)。

const s = new Set();

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

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

上面代碼通過add()方法向 Set 結(jié)構(gòu)加入成員，結(jié)果表明 Set 結(jié)構(gòu)不會添加重復(fù)的值。

去除數(shù)組的重復(fù)成員

[...new Set('ababbc')].join('')
// "abc"

向 Set 加入值的時(shí)候，不會發(fā)生類型轉(zhuǎn)換，所以5和"5"是兩個(gè)不同的值。Set 內(nèi)部判斷兩個(gè)值是否不同，使用的算法叫做“Same-value-zero equality”，它類似于精確相等運(yùn)算符（===），主要的區(qū)別是向 Set 加入值時(shí)認(rèn)為NaN等于自身，而精確相等運(yùn)算符認(rèn)為NaN不等于自身。

Set 實(shí)例的屬性和方法 Set 結(jié)構(gòu)的實(shí)例有以下屬性。

Set.prototype.constructor：構(gòu)造函數(shù)，默認(rèn)就是Set函數(shù)。
Set.prototype.size：返回Set實(shí)例的成員總數(shù)。

Set 實(shí)例的方法分為兩大類：操作方法（用于操作數(shù)據(jù)）和遍歷方法（用于遍歷成員）。下面先介紹四個(gè)操作方法。

Set.prototype.add(value)：添加某個(gè)值，返回 Set 結(jié)構(gòu)本身。
Set.prototype.delete(value)：刪除某個(gè)值，返回一個(gè)布爾值，表示刪除是否成功。
Set.prototype.has(value)：返回一個(gè)布爾值，表示該值是否為Set的成員。
Set.prototype.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 結(jié)構(gòu)轉(zhuǎn)為數(shù)組。

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

這就提供了去除數(shù)組重復(fù)成員的另一種方法。

function dedupe(array) {
  return Array.from(new Set(array));
}

dedupe([1, 1, 2, 3]) // [1, 2, 3]

遍歷操作

Set 結(jié)構(gòu)的實(shí)例有四個(gè)遍歷方法，可以用于遍歷成員。

Set.prototype.keys()：返回鍵名的遍歷器
Set.prototype.values()：返回鍵值的遍歷器
Set.prototype.entries()：返回鍵值對的遍歷器
Set.prototype.forEach()：使用回調(diào)函數(shù)遍歷每個(gè)成員
需要特別指出的是，Set的遍歷順序就是插入順序。這個(gè)特性有時(shí)非常有用，比如使用 Set 保存一個(gè)回調(diào)函數(shù)列表，調(diào)用時(shí)就能保證按照添加順序調(diào)用。

附：應(yīng)用場景

1.數(shù)組去重

var arr = [1, 2, 3, undefined,undefined,null,null, NaN, 1, 2, 3, NaN],
    set = new Set(arr);
console.log([...set]);

2. 數(shù)組去重后的實(shí)現(xiàn)映射數(shù)組

set實(shí)例本身沒有map，filter等數(shù)組屬性

let set = new Set([1,2,3,4,5,6,7]);
let set2 = new Set([...set].map(value => value * 2));

let set = new Set([1,2,3]);
let set1 = new Set(Array.from(set, vlaue=>value * 2));

數(shù)組去重后，過濾返回新的數(shù)組

let set = new Set([1,2,3,4,5,6,7,1,2,3]);
let set2 = new Set([...set].filter(x => (x%2) == 0));

Map

JavaScript 的對象（Object），本質(zhì)上是鍵值對的集合（Hash 結(jié)構(gòu)），但是傳統(tǒng)上只能用字符串當(dāng)作鍵。這給它的使用帶來了很大的限制。

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

map.size // 2
map.has('name') // true
map.get('name') // "張三"
map.has('title') // true
map.get('title') // "Author"

和Set 對比

Map.prototype上的clear()、has()、size、delete()方法與Set.prototype上相同；唯一不同的是，Set是不存在鍵名的，鍵值與鍵名相同，所以沒有g(shù)et和set的方法，只有add方法；而Map具有鍵名和鍵值，所以對應(yīng)set和get方法。

關(guān)于“ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。