es6學習筆記之Set和Map

一. Set

ES6 提供了新的數據結構 Set。它類似于數組,但是成員的值都是唯一的,沒有重復的值。

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

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

Tips:上面代碼通過add方法向 Set 結構加入成員,結果表明 Set 結構不會添加重復的值。

Set 函數可以接受一個數組,作為參數,用來初始化。

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

function div(){
    return [...document.querySelectorAll('div')];
}

const set = new Set(divs());
set.size // 56

es6數組去重:
[...new Set(array)]

向Set加入值的時候,不會發生類型轉換,所以5和"5"是兩個不同的值。類似于精確相等運算符(===)

let set = new  Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set{NaN}
//上面代碼向 Set 實例添加了兩個NaN,但是只能加入一個。這表明,在 Set 內部,兩個NaN是相等。

let set = new  Set();

set.add({});
set.size // 1

set.add({});
set.size // 2
//上面代碼表示,由于兩個空對象不相等,所以它們被視為兩個值。

Set.prototype.constructor:構造函數,默認就是Set函數。
Set.prototype.size:返回Set實例的成員總數。

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

let s = new Set();

s.add(1).add(2).add(2);
//注意被加入兩次
s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3)  // fasle

s.delete(2);
s.has(2) //false

Array.from 方法可以將Set結構轉換為數組
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

Tips: 這里出現數組去重的另一種方法

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

unique([1, 1, 2, 3]); // [1, 2, 3]

Set 結構的實例有四個遍歷方法,可以用于遍歷成員。
keys():返回鍵名的遍歷器
values():返回鍵值的遍歷器
entries():返回鍵值對的遍歷器
forEach():使用回調函數遍歷每個成員

Tips: Set的遍歷順序就是插入順序

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

可以省略values方法,直接用for...of循環遍歷 Set。

let set = new Set(['red', 'green', 'blue']);
for(let x of set){
   console.log(x);
}

//red
//green
//blue

Set結構的實例的forEach方法,用于對每個成員執行某種操作,沒有返回值。

let set = new Set([1, 2, 3]);
set.forEach((value, key) => console(value*2))

//2
//4
//6

擴展運算符(...)內部使用for...of循環, 所以也可以用于Set結構

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

數組的map和filter方法也可以用于Set

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x = x*2));
//返回Set結構: {2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2)== 0));
//返回Set結構{2, 4}

Set可以很容易地實現并集(Union)、交集(Intersect)和差集(Difference)。

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

//并集
let union = new Set([...a, ...b]);
//Set{1, 2, 3, 4}

//交集
let intersect = new Set([...a].filter(x => b.has(x)));
//Set {2, 3}

//差集
let differnce = new Set([...a].filter(x => !b.has(x)));
//Set {1}

二. Map

Map類似于對象,也是鍵值對的集合,但是“鍵”的范圍不限于字符串,各種類型的值(包括對象)都可以當作鍵。

const m  = new Map();
const o = { p : 'hello world'};

m.set(o, 'content');
m.get(o, 'content'); // 'content'

m.has(o);  //true
m.delete(o); //true
m.has(o); //false

Tips:上面代碼使用 Map 結構的set方法,將對象o當作m的一個鍵,然后又使用get方法讀取這個鍵,接著使用delete方法刪除了這個鍵。

作為構造函數,Map 也可以接受一個數組作為參數。該數組的成員是一個個表示鍵值對的數組。

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

map.size //2
map.has('name'); // true;
map.get('name'); // 'mark'
map.has('title'); // true
map.get('title'); // 'Author'

如果對同一個鍵多次賦值,后面的值將覆蓋前面的值。

const map = new   Map();
map.set(1, 'aaa')
       .set(1, 'bbb');

map.get(1); // "bbb"

Tips:上面代碼對鍵1連續賦值兩次,后一次的值覆蓋前一次的值。

 //如果讀取一個未知的鍵,則返回undefined。  
 new Map().get('asd');
 //undefined

只有對同一個對象的引用,Map 結構才將其視為同一個鍵。

const map = new Map();
map.set(['a'], 555);
map.get(['a']); // undefined

Tips:上面代碼的set和get方法,表面是針對同一個鍵,但實際上這是兩個值,內存地址是不一樣的,因此get方法無法讀取該鍵,返回undefined。

const map = new Map();

const k1 = ['a'];
const k2 = ['a'];

map.set(k1, 111).set(k2, 222);
map.get(k1); //111
map.get(k2); //222

Tips:上面代碼中,變量k1和k2的值是一樣的,但是它們在 Map 結構中被視為兩個鍵。

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

1.size屬性

size屬性返回 Map 結構的成員總數。

const map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size//2

2.set(key, value)

set方法設置鍵名key對應的鍵值為value,然后返回整個 Map 結構。如果key已經有值,則鍵值會被更新,否則就新生成該鍵。

const m = new Map();
m.set('edition'. 6);  //鍵是字符串
m.set(262, 'standard'); //鍵是數值
m.set(undefined, 'asd'); //鍵是undefinde

set方法返回的是當前的Map對象,因此可以采用鏈式寫法。

let map = new Map()
      .set(1, 'a')
      .set(2, 'b')
      .set(3, 'c');

3.get(key)

get方法讀取key對應的鍵值,如果找不到key,返回undefined。

const m = new Map();
const hello = function(){
    console.log('hello');
 }
 m.set(hello, 'lalala'); // 鍵是函數
 m.get(hello); // 'lalala'

4.has(key)

has方法返回一個布爾值,表示某個鍵是否在當前 Map 對象之中。

const m = new Map();
m.set('edition', 6);
m.set(262, 'standard');
m.set(undefind, 'asd');

m.has('edition'); //true
m.has('years');  //false
m.has(262); //true
m.has(undefined) // true

5.delete(key)

delete方法刪除某個鍵,返回true。如果刪除失敗,返回false。

const m = new Map();
m.set(undfined, 'asd');
m.has(undefined);  //true

m.delete(undefined)
m.has(undefined) //false

6.clear()

clear方法清除所有成員,沒有返回值。

let map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size //2
map.clear();
map.size; // 0

7.遍歷方法

keys():返回鍵名的遍歷器。
values():返回鍵值的遍歷器。
entries():返回所有成員的遍歷器。
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 [key, value] of map.entries){
  console.log(key, value);
}

// "F" "no"
// "T" "yes"

//等同于
for(let [key, value] of map){
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

Map 結構轉為數組結構,比較快速的方法是使用擴展運算符(...)。

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three']
]);

[...map.keys()]
//[1, 2, 3]

[...map.value()]
//['one' , 'two', 'three']

[...map.entries()]
//[['1', 'one'], ['2', 'two'], ['3', 'three']]

[...map]
//[['1', 'one'], ['2', 'two'], ['3', 'three']]

結合數組的map方法、filter方法,可以實現 Map 的遍歷和過濾(Map 本身沒有map和filter方法)。

 const map0 = new Map([
      [1, 'a'],
      [2, 'b'],
      [3, 'c']
  ]);

const map1 = new Map([...map0.filter(k, v) => k <3]);
  //產生 Map 結構 {1 => 'a', 2 => 'b'}

const map2 =  new Map(
  [...map0].map([k, v] => [k *2, '_' + v])
);
//產生Map結構{2 => '_a', 4 => '_b', 6 => '_c'}

Map 還有一個forEach方法,與數組的forEach方法類似,也可以實現遍歷。

map.forEach(function(value, key, map){ console.log(key, value); });

三. 與其他結構的數據互換

1.Map 轉為數組

const map = new Map()
          .set(ture, 7)
          .set('23', 23);
[...map]
//[[true, 7], ['23', 23]]

2.數組 轉為 Map

  const map = new Map([
        [1, 'a'],
        [2, 'b'],
        [3, 'c']
    ]);

3.Map 轉為對象

如果所有 Map 的鍵都是字符串,它可以轉為對象

function strMapToObj(strMap){
    let obj = Object.create(null);
    for(let [k, v] of strMap){
      obj[k] = v
    }
  return obj;
}

const map = new  Map()
          .set('yes', true)
          .set('no', false);

strMapToObj(map);
//{yes : true, no : false}

4.對象轉為Map

function objToStrMap(obj){
  let strMap = new Map();
  for(let k of Objcet.keys(obj)){
     strMap.set(k , obj[k]);
  }
  return strMap;
}

5.map 轉為 json

//Map 的鍵名都是字符串
function strMapToJson(strMap){
    return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true)
                  .set('no', false);
strMapToJson(myMap);
//{'yes' : true, 'no' : false}

//Map 的鍵名有非字符串,轉換為json數組
 function mapToArrayJson(map){
    return JSON.stringify([...map]);
  }

  let myMap = new Map().set(true, 7).set('2', 2);
  mapToArrayJson(myMap);

6.Json轉為Map

//JSON 轉為 Map,正常情況下,所有鍵名都是字符串。
function jsonToStrMap(jsonStr){
    retrurn objTostrMap(JSON.parse(jsonstr));
}

jsonToStrMap('{"yes" : true, "no" : false}')

//Map {'yes' => true, 'no' => no}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,606評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,582評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,540評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,028評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,801評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,223評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,294評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,442評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,976評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,800評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,996評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,543評論 5 360
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,233評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,926評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,702評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容

  • 1.Set 基本用法 ES6提供了新的數據結構Set。它類似于數組,但是成員的值都是唯一的,沒有重復的值。Set本...
    雨飛飛雨閱讀 1,867評論 0 7
  • 1、Set 1.1概念:ES6提供了新的數據結構Set,它類似數組,但是成員的值都是唯一的。 eg:const s...
    Kris_lee閱讀 2,538評論 0 3
  • 筆記,完全摘錄自阮一峰 set數據結構 ES6提供的,新的數據結構,類似于數組。 特點:成員值唯一,沒有重復的值 ...
    布蕾布蕾閱讀 3,345評論 1 6
  • 每到寒冬臘月,瓦房上總飄出一縷縷白煙,遠遠就能聞到一陣陣的酒香。 這時你總會看到,一個女人忙碌的身影。她一會兒向炤...
    穆念晴閱讀 352評論 5 6
  • 可選鏈接(自判斷鏈接)(Optional Chaining)是一種可以請求和調用屬性、方法及子腳本的過程,它的自判...
    冰三尺閱讀 502評論 0 0