JS 數據結構-Map:映射 創建Map 常用Map方法

Map

　　JavaScript 中的對象（Object），本質上是鍵值對的集合，但是只能用字符串來做鍵名。這給它的使用帶來了很大的限制。

　　為了解決這個問題，ES6 提供了Map數據結構。它類似於對象，也是鍵值對的集合，但是“鍵”的范圍不限於字符串，各種類型的值（包括對象）都可以當作鍵。

　　 也就是說，Object 結構提供了“字符串 - 值”的對應，Map 結構提供了“值 - 值”的對應，是一種更完善的 JSON 數據結構的實現。

　　如果你需要更“寬松”的“鍵值對”數據結構，Map 比 Object 更合適。

　　特性：鍵值對=>任意類型=>更好的處理有映射需求的問題。

創建 Map

　　Map 本身是一個構造函數，在使用構造函數時，通過傳入參數進行數據初始化。

let m = new Map();

 

　　Map 函數也可以接受一個數組（或類似數組的對象）作為參數，用來進行初始化。但是跟 Set 不同的是，Map 中該數組中的成員是一對對表示鍵值對的數組。

let m = new Map([["name", "zhangsan"], ["age", 20]]);

 

Map的屬性

　　常用的屬性就一個：size 　　返回 Map 實例的成員總數。

　　

let m = new Map([["name", "zhangsan"], ["age", 20]]);
console.log( m.size );//2

 

 

Map的方法

　　Map 實例的方法分為了兩大類：操作用法（用於數據操作）和遍歷方法（用於遍歷數據）。

 

 

　　操作方法:

　　　　　　set(key, value)　　  添加或修改數據。設置 key 所對應的鍵值，並返回 Map 結構本身

　　　　　　get(key)　　　　　 獲取數據。讀取 key 對應的鍵值，如果找不到 key，返回 undefined

　　　　　　has(key)　　　　　查看是否存在某個數據，返回一個布爾值。

　　　　　　delete(key)　　　　刪除數據。刪除成功返回 true

　　　　　　clear()　　　　　　清除所有數據，沒有返回值

let map = new Map([["name", "zhangsan"], ["age", 20]]);
// 設置 name 的值為 lisa
map.set("name", "lisa");
console.log( map ); // Map(2) {"name" => "lisa", "age" => 20}
// 獲取 name 對應的值
let getMap = map.get("name");
console.log( getMap ); // lisa
// 查看是否存在 age
let hasMap = map.has("age");
console.log( hasMap ); // true
// 刪除 age 鍵值對
let delMap = map.delete("age");
console.log( delMap ); // true
// 清空所有數據
map.clear();
console.log(map); // Map(0) {}

　　

　　遍歷方法：

　　　　　　Map 提供了三個遍歷器生成函數和一個遍歷方法:

　　　　　　keys()　　　　 返回一個鍵名的遍歷器

　　　　　　values()　　　 返回一個鍵值的遍歷器

　　　　　　entries()　　　 返回一個鍵值對的遍歷器

　　　　　　forEach()　　   使用回調函數遍歷每個成員

let num = new Map([["one", 1], ["two", 2], ["three", 3]]);
for(let key of num.keys()){
 console.log(key);
}
// one
// two
// three
for(let value of num.values()){
 console.log(value);
}
// 1
// 2
// 3
for(let item of num.entries()){
     console.log(item[0], item[1]);
}
// one 1
// two 2
// three 3
// 將上面代碼通過解構優化
for(let [key, value] of num.entries()){
     console.log(key, value);
}
// one 1
// two 2
// three 3
num.forEach((value, key) => {
    console.log(value, key)
})
// 1 one
// 2 two
// 3 three

 

與其他數據結構互換

 

Map 轉為數組

　　Map 轉為數組最方便的方法，就是使用擴展運算符 ... 。

　　　　

let myMap = new Map();
myMap
 .set(true, "真")
 .set(false, "假");//因為每次會返回新Map，可以連着寫
console.log(myMap); // {true => "真", false => "假"}
let newMap = [...myMap];
console.log(newMap); // [[true, "真"], [false, "假"]]

 

數組轉為 Map

　　將數組傳入 Map 構造函數中，就可以轉為 Map。

 

let arr = [[true, "真"], [false, "假"]];
let map = new Map(arr);
console.log(map); // {true => "真", false => "假"}

 

Map 轉為對象

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

 

function strMapToObj(strMap){
     let obj = {};
     for(let [k, v] of strMap){
         obj[k] = v;
     }
     return obj;
}
let myMap = new Map().set("green","綠").set("red","紅");
console.log(myMap); // {"green" => "綠", "red" => "紅"}
console.log( strMapToObj(myMap) ); // { green: "綠", red: "紅" }         

 

對象轉為 Map

 

function objToStrMap(obj){
     let strMap = new Map();
     for(let item in obj){
        strMap.set( item, obj[item] )
     }
     return strMap;
}
let obj = { name: "zhangsan", age: 20 };
console.log( objToStrMap(obj) );
// {"name" => "zhangsan", "age" => 20}