ES6新增數(shù)據(jù)結(jié)構(gòu)：set,map,weakset,weakmap

引言

業(yè)務(wù)中有碰到需要給一個字符串或者去重的情況丹喻，一般后端同學會幫你做了椒惨，但是有時候后端忙不過來贱鄙，只能前端自己操作劝贸。這時候怎么操作呢？常見的有：
1.利用遞歸去重

function unique(arr) {
    var array= arr;
    var len = array.length;

array.sort(function(a,b){   //排序后更加方便去重
    return a - b;
})

function loop(index){
    if(index >= 1){
        if(array[index] === array[index-1]){
            array.splice(index,1);
        }
        loop(index - 1);    //遞歸loop逗宁，然后數(shù)組去重
    }
}
loop(len-1);
return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))

2.使用for循環(huán)嵌套映九，然后使用splice去重

function unique(arr){            
    for(var i=0; i<arr.length; i++){
        for(var j=i+1; j<arr.length; j++){
            if(arr[i]==arr[j]){         //第一個等同于第二個，splice方法刪除第二個
                arr.splice(j,1);
                j--;
            }
        }
    }
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))

3.使用indexOf重組數(shù)組

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))

還有很多其他方法瞎颗，可以參考>https://segmentfault.com/a/1190000016418021?utm_source=tag-newest
但是上述方法都很復(fù)雜件甥，得益于ES6新的數(shù)據(jù)結(jié)構(gòu)set我們可以大幅簡化代碼捌议，

function unique (arr) {
    return Array.from(new Set(arr))
  }
  var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
  console.log(unique(arr))

set和weakset

set

Set 對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用(MDN)引有。
它類似于數(shù)組瓣颅，但是成員的值都是唯一的，沒有重復(fù)的值譬正。
Set本身是一個構(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

set的參數(shù)

Set函數(shù)可以接受一個數(shù)組（或者具有 iterable 接口的其他數(shù)據(jù)結(jié)構(gòu)）作為參數(shù)曾我，用來初始化粉怕。

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

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// 例三
const set = new Set(document.querySelectorAll('div'));
set.size // 56

// 類似于
const set = new Set();
document
 .querySelectorAll('div')
 .forEach(div => set.add(div));
set.size // 56

set的使用

// 去除數(shù)組的重復(fù)成員
[...new Set(array)]
//去除字符串的重復(fù)成員
[...new Set('ababbc')].join('')
// "abc"

set的實例

實例的屬性

-Set.prototype.constructor：構(gòu)造函數(shù)，默認就是Set函數(shù)抒巢。
-Set.prototype.size：返回Set實例的成員總數(shù)贫贝。

實例的操作方法（用于操作數(shù)據(jù)）

Set.prototype.add(value)：添加某個值，返回 Set 結(jié)構(gòu)本身蛉谜。
Set.prototype.delete(value)：刪除某個值稚晚，返回一個布爾值，表示刪除是否成功型诚。
Set.prototype.has(value)：返回一個布爾值蜈彼，表示該值是否為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
實例的遍歷方法（用于遍歷成員）

-Set.prototype.keys()：返回鍵名的遍歷器
-Set.prototype.values()：返回鍵值的遍歷器
-Set.prototype.entries()：返回鍵值對的遍歷器
-Set.prototype.forEach()：使用回調(diào)函數(shù)遍歷每個成員

keys方法、values方法暮现、entries方法返回的都是遍歷器對象还绘。由于 Set 結(jié)構(gòu)沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值）栖袋，所以keys方法和values方法的行為完全一致拍顷。

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"]

Set 結(jié)構(gòu)的實例與數(shù)組一樣，也擁有forEach方法塘幅，用于對每個成員執(zhí)行某種操作昔案，沒有返回值。

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

上面代碼說明电媳，forEach方法的參數(shù)就是一個處理函數(shù)踏揣。該函數(shù)的參數(shù)與數(shù)組的forEach一致，依次為鍵值匾乓、鍵名捞稿、集合本身（上例省略了該參數(shù)）。這里需要注意，Set 結(jié)構(gòu)的鍵名就是鍵值（兩者是同一個值）娱局，因此第一個參數(shù)與第二個參數(shù)的值永遠都是一樣的彰亥。

另外，forEach方法還可以有第二個參數(shù)衰齐，表示綁定處理函數(shù)內(nèi)部的this對象任斋。
擴展運算符（...）內(nèi)部使用for...of循環(huán)，所以也可以用于 Set 結(jié)構(gòu)耻涛。

let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']

weakset

weakset和set大體上一樣仁卷，但是有兩個重大區(qū)別：
1.WeakSet 的成員只能是對象，而不能是其他類型的值犬第。
2.WeakSet 中的對象都是弱引用锦积，即垃圾回收機制不考慮 WeakSet 對該對象的引用，也就是說歉嗓，如果其他對象都不再引用該對象丰介，那么垃圾回收機制會自動回收該對象所占用的內(nèi)存，不考慮該對象還存在于 WeakSet 之中鉴分。

這是因為垃圾回收機制依賴引用計數(shù)哮幢，如果一個值的引用次數(shù)不為0，垃圾回收機制就不會釋放這塊內(nèi)存志珍。結(jié)束使用該值之后橙垢，有時會忘記取消引用，導致內(nèi)存無法釋放伦糯，進而可能會引發(fā)內(nèi)存泄漏柜某。WeakSet 里面的引用，都不計入垃圾回收機制敛纲，所以就不存在這個問題喂击。因此，WeakSet 適合臨時存放一組對象淤翔，以及存放跟對象綁定的信息翰绊。只要這些對象在外部消失，它在 WeakSet 里面的引用就會自動消失旁壮。

由于上面這個特點监嗜，WeakSet 的成員是不適合引用的，因為它會隨時消失抡谐。另外裁奇，由于 WeakSet 內(nèi)部有多少個成員，取決于垃圾回收機制有沒有運行童叠，運行前后很可能成員個數(shù)是不一樣的框喳，而垃圾回收機制何時運行是不可預(yù)測的，因此 ES6 規(guī)定 WeakSet \color{red}{不可遍歷}厦坛。

這些特點同樣適用于WeakMap 結(jié)構(gòu)五垮。

weakset的方法

WeakSet.prototype.add(value)：向 WeakSet 實例添加一個新成員。
WeakSet.prototype.delete(value)：清除 WeakSet 實例的指定成員杜秸。
WeakSet.prototype.has(value)：返回一個布爾值放仗，表示某個值是否在

const ws = new WeakSet();
const obj = {};
const foo = {};

ws.add(window);
ws.add(obj);

ws.has(window); // true
ws.has(foo);    // false

ws.delete(window);
ws.has(window);    // false

WeakSet 沒有size屬性，沒有辦法遍歷它的成員撬碟。

ws.size // undefined
ws.forEach // undefined

ws.forEach(function(item){ console.log('WeakSet has ' + item)})
// TypeError: undefined is not a function

上面代碼試圖獲取size和forEach屬性诞挨，結(jié)果都不能成功。

WeakSet 不能遍歷呢蛤，是因為成員都是弱引用惶傻，隨時可能消失，遍歷機制無法保證成員的存在其障，很可能剛剛遍歷結(jié)束银室，成員就取不到了。WeakSet 的一個用處励翼，是儲存 DOM 節(jié)點蜈敢，而不用擔心這些節(jié)點從文檔移除時，會引發(fā)內(nèi)存泄漏汽抚。

map

JavaScript 的對象（Object）抓狭，本質(zhì)上是鍵值對的集合（Hash 結(jié)構(gòu)），但是傳統(tǒng)上只能用字符串當作鍵造烁。這給它的使用帶來了很大的限制否过。
為了解決這個問題，ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)惭蟋。它類似于對象叠纹，也是鍵值對的集合，但是“鍵”的范圍不限于字符串敞葛，各種類型的值（包括對象）都可以當作鍵誉察。
不僅僅是數(shù)組，任何具有 Iterator 接口惹谐、且每個成員都是一個雙元素的數(shù)組的數(shù)據(jù)結(jié)構(gòu)都可以當作Map構(gòu)造函數(shù)的參數(shù)持偏。這就是說，Set和Map都可以用來生成新的 Map氨肌。

const set = new Set([
    ['foo', 1],
    ['bar', 2]
  ]);
  const m1 = new Map(set);
  m1.get('foo') // 1
  
  const m2 = new Map([['baz', 3]]);
  const m3 = new Map(m2);
  m3.get('baz') // 3

如果 Map 的鍵是一個簡單類型的值（數(shù)字鸿秆、字符串、布爾值）怎囚，則只要兩個值嚴格相等卿叽，Map 將其視為一個鍵桥胞，比如0和-0就是一個鍵，布爾值true和字符串true則是兩個不同的鍵考婴。另外贩虾，undefined和null也是兩個不同的鍵。雖然NaN不嚴格相等于自身沥阱，但 Map 將其視為同一個鍵缎罢。

let map = new Map();

map.set(-0, 123);
map.get(+0) // 123

map.set(true, 1);
map.set('true', 2);
map.get(true) // 1

map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3

map.set(NaN, 123);
map.get(NaN) // 123
map實例的屬性和操作方法

1.size 屬性：size屬性返回 Map 結(jié)構(gòu)的成員總數(shù)。

2.Map.prototype.set(key, value)：set方法設(shè)置鍵名key對應(yīng)的鍵值為value考杉，然后返回整個 Map 結(jié)構(gòu)策精。如果key已經(jīng)有值，則鍵值會被更新崇棠，否則就新生成該鍵咽袜。set方法返回的是當前的Map對象，因此可以采用鏈式寫法枕稀。

3.Map.prototype.get(key)：get方法讀取key對應(yīng)的鍵值酬蹋，如果找不到key，返回undefined抽莱。

4.Map.prototype.has(key)：has方法返回一個布爾值范抓，表示某個鍵是否在當前 Map 對象之中。

5.Map.prototype.delete(key)：delete方法刪除某個鍵食铐，返回true匕垫。如果刪除失敗，返回false虐呻。

6.Map.prototype.clear()：clear方法清除所有成員象泵，沒有返回值。

map的遍歷方法

Map 結(jié)構(gòu)原生提供三個遍歷器生成函數(shù)和一個遍歷方法斟叼。

Map.prototype.keys()：返回鍵名的遍歷器偶惠。
Map.prototype.values()：返回鍵值的遍歷器。
Map.prototype.entries()：返回所有成員的遍歷器朗涩。
Map.prototype.forEach()：遍歷 Map 的所有成員忽孽。
需要特別注意的是，Map 的遍歷順序就是插入順序谢床。

const 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);
  }
  // "F" "no"
  // "T" "yes"
  
  // 等同于使用map.entries()
  for (let [key, value] of map) {
    console.log(key, value);
  }
  // "F" "no"
  // "T" "yes"

weakmap

與map的區(qū)別：
1.WeakMap只接受對象作為鍵名（null除外）兄一，不接受其他類型的值作為鍵名。
2.WeakMap的鍵名所指向的對象识腿，不計入垃圾回收機制
\color{red}{WeakMap的設(shè)計目的在于出革，有時我們想在某個對象上面存放一些數(shù)據(jù)，但是這會形成對于這個對象的引用渡讼。}
基本上骂束，如果你要往對象上添加數(shù)據(jù)耳璧，又不想干擾垃圾回收機制，就可以使用 WeakMap展箱。一個典型應(yīng)用場景是旨枯，在網(wǎng)頁的 DOM 元素上添加數(shù)據(jù)，就可以使用WeakMap結(jié)構(gòu)析藕。當該 DOM 元素被清除召廷，其所對應(yīng)的WeakMap記錄就會自動被移除凳厢。
總之账胧，WeakMap的專用場合就是，它的鍵所對應(yīng)的對象先紫，可能會在將來消失治泥。WeakMap結(jié)構(gòu)有助于\color{red}{防止內(nèi)存泄漏。}
注意遮精，WeakMap 弱引用的只是鍵名居夹，而不是鍵值。\color{red}{鍵值依然是正常引用本冲。}

weakmap的語法

1.一是沒有遍歷操作（即沒有keys()准脂、values()和entries()方法）
2.二是無法清空，即不支持clear方法檬洞。因此狸膏，WeakMap只有四個方法可用：get()、set()添怔、has()湾戳、delete()。

參考資料

https://es6.ruanyifeng.com/#docs/set-map#WeakSet
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set
https://segmentfault.com/a/1190000016418021?utm_source=tag-newest

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末广料，一起剝皮案震驚了整個濱河市砾脑，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌艾杏，老刑警劉巖韧衣，帶你破解...
    沈念sama閱讀 211,948評論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異购桑，居然都是意外死亡汹族，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門其兴，熙熙樓的掌柜王于貴愁眉苦臉地迎上來顶瞒，“玉大人，你說我怎么就攤上這事元旬×裥欤” “怎么了守问？”我有些...
    開封第一講書人閱讀 157,490評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長坑资。 經(jīng)常有香客問我耗帕，道長，這世上最難降的妖魔是什么袱贮？ 我笑而不...
    開封第一講書人閱讀 56,521評論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任仿便，我火速辦了婚禮，結(jié)果婚禮上攒巍，老公的妹妹穿的比我還像新娘嗽仪。我一直安慰自己，他們只是感情好柒莉，可當我...
    茶點故事閱讀 65,627評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布闻坚。 她就那樣靜靜地躺著，像睡著了一般兢孝。 火紅的嫁衣襯著肌膚如雪窿凤。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,842評論 1贊 290
  • 城市分裂傳說
    那天跨蟹，我揣著相機與錄音雳殊，去河邊找鬼。 笑死窗轩，一個胖子當著我的面吹牛夯秃，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播品姓，決...
    沈念sama閱讀 38,997評論 3贊 408
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼寝并，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了腹备？” 一聲冷哼從身側(cè)響起衬潦，我...
    開封第一講書人閱讀 37,741評論 0贊 268
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎植酥，沒想到半個月后镀岛，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,203評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡友驮，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年漂羊，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卸留。...
    茶點故事閱讀 38,673評論 1贊 341
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡走越，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出耻瑟，到底是詐尸還是另有隱情旨指，我是刑警寧澤赏酥，帶...
    沈念sama閱讀 34,339評論 4贊 330
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站谆构，受9級特大地震影響裸扶，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜搬素，卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3贊 313
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一呵晨、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧熬尺，春花似錦摸屠、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0贊 21
  • 一樁弒父案餐塘，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽妥衣。三九已至皂吮，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間税手，已是汗流浹背蜂筹。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1贊 266
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留芦倒，地道東北人艺挪。 一個月前我還...
    沈念sama閱讀 46,394評論 2贊 360
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像兵扬，于是被迫代替她去往敵國和親麻裳。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 43,562評論 2贊 349