【重溫基礎】11.Map和Set對象

本文是 重溫基礎 系列文章的第十一篇。
今日感覺：注意身體，生病花錢又難受。

系列目錄：

• 【複習資料】ES6/ES7/ES8/ES9資料整理(我的整理)
• 【重溫基礎】1.語法和數據類型
• 【重溫基礎】2.流程控制和錯誤處理
• 【重溫基礎】3.循環和迭代
• 【重溫基礎】4.函數
• 【重溫基礎】5.表達式和運算符
• 【重溫基礎】6.數字
• 【重溫基礎】7.時間對象
• 【重溫基礎】8.字符串
• 【重溫基礎】9.正則表達式
• 【重溫基礎】10.數組

本章節複習的是JS中的Map和Set對象，是個集合。

前置知識：
Map和Set對象是在ES6中被引入的，做爲一種由key值標記的數據容器。
Map和Set對象承載的數據元素能夠按照插入時的順序，被迭代遍歷。

1 Set對象

介紹:
Set數據結構相似數組，但全部成員的值惟一。
Set自己爲一個構造函數，用來生成Set數據結構，使用add方法來添加新成員。

let a = new Set();
[1,2,2,1,3,4,5,4,5].forEach(x=>a.add(x));
for(let k of a){
    console.log(k)
};
// 1 2 3 4 5

基礎使用：

let a = new Set([1,2,3,3,4]);
[...a]; // [1,2,3,4]
a.size; // 4

// 數組去重
[...new Set([1,2,3,4,4,4])];// [1,2,3,4]

注意：

• 向Set中添加值的時候，不會類型轉換，即5和'5'是不一樣的。

[...new Set([5,'5'])]; // [5, "5"]

屬性和方法：

• 屬性：

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

• 操做方法：

  • add(value)：添加某個值，返回 Set 結構自己。
  • delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
  • has(value)：返回一個布爾值，表示該值是否爲Set的成員。
  • clear()：清除全部成員，沒有返回值。

let a = new Set();
a.add(1).add(2); // a => Set(2) {1, 2}
a.has(2);        // true
a.has(3);        // false
a.delete(2);     // true  a => Set(1) {1}
a.clear();       // a => Set(0) {}

數組去重：

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

2 Set的應用

數組去重：

// 方法1
[...new Set([1,2,3,4,4,4])]; // [1,2,3,4]
// 方法2
Array.from(new Set([1,2,3,4,4,4]));    // [1,2,3,4]

遍歷和過濾：

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

// map 遍歷操做
let b = new Set([...a].map(x =>x*2));// b => Set(4) {2,4,6,8}

// filter 過濾操做
let c = new Set([...a].filter(x =>(x%2) == 0)); // b => Set(2) {2,4}

獲取並集、交集和差集：

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

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

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

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

• 遍歷方法：

  • keys()：返回鍵名的遍歷器。
  • values()：返回鍵值的遍歷器。
  • entries()：返回鍵值對的遍歷器。
  • forEach()：使用回調函數遍歷每一個成員。

Set遍歷順序是插入順序，當保存多個回調函數，只需按照順序調用。但因爲Set結構沒有鍵名只有鍵值，因此keys()和values()是返回結果相同。

let a = new Set(['a','b','c']);
for(let i of a.keys()){console.log(i)};   // 'a' 'b' 'c'
for(let i of a.values()){console.log(i)}; // 'a' 'b' 'c'
for(let i of a.entries()){console.log(i)}; 
// ['a','a'] ['b','b'] ['c','c']

而且 還可使用for...of直接遍歷Set。

let a = new Set(['a','b','c']);
for(let k of a){console.log(k)};   // 'a' 'b' 'c'

forEach與數組相同，對每一個成員執行操做，且無返回值。

let a = new Set(['a','b','c']);
a.forEach((v,k) => console.log(k + ' : ' + v));

3 Map對象

因爲傳統的JavaScript對象只能用字符串當作鍵，給開發帶來很大限制，ES6增長Map數據結構，使得各類類型的值(包括對象)均可以做爲鍵。
Map結構提供了「值—值」的對應，是一種更完善的 Hash 結構實現。
基礎使用：

let a = new Map();
let b = {name: 'leo' };
a.set(b,'my name'); // 添加值
a.get(b);           // 獲取值
a.size;      // 獲取總數
a.has(b);    // 查詢是否存在
a.delete(b); // 刪除一個值
a.clear();   // 清空全部成員 無返回

注意：

• 傳入數組做爲參數，指定鍵值對的數組。

let a = new Map([
    ['name','leo'],
    ['age',18]
])

• 若是對同一個鍵屢次賦值，後面的值將覆蓋前面的值。

let a = new Map();
a.set(1,'aaa').set(1,'bbb');
a.get(1); // 'bbb'

• 若是讀取一個未知的鍵，則返回undefined。

new Map().get('abcdef'); // undefined

• 一樣的值的兩個實例，在 Map 結構中被視爲兩個鍵。

let a = new Map();
let a1 = ['aaa'];
let a2 = ['aaa'];
a.set(a1,111).set(a2,222);
a.get(a1); // 111
a.get(a2); // 222

遍歷方法：
Map 的遍歷順序就是插入順序。

• keys()：返回鍵名的遍歷器。
• values()：返回鍵值的遍歷器。
• entries()：返回全部成員的遍歷器。
• forEach()：遍歷 Map 的全部成員。

let a = new Map([
    ['name','leo'],
    ['age',18]
])

for (let i of a.keys()){...};
for (let i of a.values()){...};
for (let i of a.entries()){...};
a.forEach((v,k,m)=>{
    console.log(`key:${k},value:${v},map:${m}`)
})

將Map結構轉成數組結構：

let a = new Map([
    ['name','leo'],
    ['age',18]
])

let a1 = [...a.keys()];   // a1 => ["name", "age"]
let a2 = [...a.values()]; // a2 =>  ["leo", 18]
let a3 = [...a.entries()];// a3 => [['name','leo'], ['age',18]]

4 Map與其餘數據結構互相轉換

• Map 轉 數組

let a = new Map().set(true,1).set({f:2},['abc']);
[...a]; // [[true:1], [ {f:2},['abc'] ]]

• 數組 轉 Map

let a = [ ['name','leo'], [1, 'hi' ]]
let b = new Map(a);

• Map 轉 對象

若是全部 Map 的鍵都是字符串，它能夠無損地轉爲對象。
若是有非字符串的鍵名，那麼這個鍵名會被轉成字符串，再做爲對象的鍵名。

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

const a = new Map().set('yes', true).set('no', false);
fun(a)
// { yes: true, no: false }

• 對象 轉 Map

function fun(obj) {
  let a = new Map();
  for (let k of Object.keys(obj)) {
    a.set(k, obj[k]);
  }
  return a;
}

fun({yes: true, no: false})
// Map {"yes" => true, "no" => false}

• Map 轉 JSON

(1)Map鍵名都是字符串，轉爲對象JSON：

function fun (s) {
    let obj = Object.create(null);
    for (let [k,v] of s) {
        obj[k] = v;
    }
    return JSON.stringify(obj)
}
let a = new Map().set('yes', true).set('no', false);
fun(a);
// '{"yes":true,"no":false}'

(2)Map鍵名有非字符串，轉爲數組JSON：

function fun (map) {
  return JSON.stringify([...map]);
}

let a = new Map().set(true, 7).set({foo: 3}, ['abc']);
fun(a)
// '[[true,7],[{"foo":3},["abc"]]]'

• JSON 轉 Map

(1)全部鍵名都是字符串：

function fun (s) {
  let strMap = new Map();
  for (let k of Object.keys(s)) {
    strMap.set(k, s[k]);
  }
  return strMap;
  return JSON.parse(strMap);
}
fun('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

(2)整個 JSON 就是一個數組，且每一個數組成員自己，又是一個有兩個成員的數組:

function fun2(s) {
  return new Map(JSON.parse(s));
}
fun2('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

參考資料

1.阮一峯ES6入門

---

本部份內容到這結束

Author	王平安
E-mail	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推薦	https://github.com/pingan8787...
JS小冊	js.pingan8787.com

歡迎關注微信公衆號【前端自習課】天天早晨，與您一塊兒學習一篇優秀的前端技術博文 .