摘要：本文是重溫基礎(chǔ)系列文章的第十一篇。返回一個布爾值，表示該值是否為的成員。使用回調(diào)函數(shù)遍歷每個成員。與數(shù)組相同，對每個成員執(zhí)行操作，且無返回值。

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

系列目錄：

【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個人整理)

【重溫基礎(chǔ)】1.語法和數(shù)據(jù)類型

【重溫基礎(chǔ)】2.流程控制和錯誤處理

【重溫基礎(chǔ)】3.循環(huán)和迭代

【重溫基礎(chǔ)】4.函數(shù)

【重溫基礎(chǔ)】5.表達(dá)式和運(yùn)算符

【重溫基礎(chǔ)】6.數(shù)字

【重溫基礎(chǔ)】7.時間對象

【重溫基礎(chǔ)】8.字符串

【重溫基礎(chǔ)】9.正則表達(dá)式

【重溫基礎(chǔ)】10.數(shù)組

本章節(jié)復(fù)習(xí)的是JS中的Map和Set對象，是個集合。

前置知識：
Map和Set對象是在ES6中被引入的，作為一種由key值標(biāo)記的數(shù)據(jù)容器。
Map和Set對象承載的數(shù)據(jù)元素可以按照插入時的順序，被迭代遍歷。

介紹:
Set數(shù)據(jù)結(jié)構(gòu)類似數(shù)組，但所有成員的值唯一。
Set本身為一個構(gòu)造函數(shù)，用來生成Set數(shù)據(jù)結(jié)構(gòu)，使用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

基礎(chǔ)使用：

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

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

注意：

向Set中添加值的時候，不會類型轉(zhuǎn)換，即5和"5"是不同的。

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

屬性和方法：

屬性：

Set.prototype.constructor：構(gòu)造函數(shù)，默認(rèn)就是Set函數(shù)。

Set.prototype.size：返回Set實(shí)例的成員總數(shù)。

操作方法：

add(value)：添加某個值，返回 Set 結(jié)構(gòu)本身。

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)?{}

數(shù)組去重：

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

數(shù)組去重：

// 方法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()：使用回調(diào)函數(shù)遍歷每個成員。

Set遍歷順序是插入順序，當(dāng)保存多個回調(diào)函數(shù)，只需按照順序調(diào)用。但由于Set結(jié)構(gòu)沒有鍵名只有鍵值，所以keys()和values()是返回結(jié)果相同。

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與數(shù)組相同，對每個成員執(zhí)行操作，且無返回值。

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

由于傳統(tǒng)的JavaScript對象只能用字符串當(dāng)做鍵，給開發(fā)帶來很大限制，ES6增加Map數(shù)據(jù)結(jié)構(gòu)，使得各種類型的值(包括對象)都可以作為鍵。
Map結(jié)構(gòu)提供了“值—值”的對應(yīng)，是一種更完善的 Hash 結(jié)構(gòu)實(shí)現(xiàn)。
基礎(chǔ)使用：

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

注意：

傳入數(shù)組作為參數(shù)，指定鍵值對的數(shù)組。

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

同樣的值的兩個實(shí)例，在 Map 結(jié)構(gòu)中被視為兩個鍵。

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結(jié)構(gòu)轉(zhuǎn)成數(shù)組結(jié)構(gòu)：

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

Map 轉(zhuǎn) 數(shù)組

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

數(shù)組 轉(zhuǎn) Map

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

Map 轉(zhuǎn) 對象

如果所有 Map 的鍵都是字符串，它可以無損地轉(zhuǎn)為對象。
如果有非字符串的鍵名，那么這個鍵名會被轉(zhuǎn)成字符串，再作為對象的鍵名。

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 }

對象 轉(zhuǎn) 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 轉(zhuǎn) JSON

(1)Map鍵名都是字符串，轉(zhuǎn)為對象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鍵名有非字符串，轉(zhuǎn)為數(shù)組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 轉(zhuǎn) 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 就是一個數(shù)組，且每個數(shù)組成員本身，又是一個有兩個成員的數(shù)組:

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

1.阮一峰ES6入門

本部分內(nèi)容到這結(jié)束

歡迎關(guān)注微信公眾號【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .