帶你玩轉 JavaScript ES6 (六) - Map 映射

acrazing 發布于2019-08-22 14:02 / 2228人閱讀

摘要：初始化申明一個設置和獲取值使用設置新值或更新值申明設置值張三豐張三豐重復設置值如果鍵值存在則新值替換舊值張三豐使用獲取值，如果獲取的不存在返回分別獲取判斷是否存在使用判斷給定是否存在映射內。

本文同步帶你入門 帶你玩轉 JavaScript ES6 (六) - Map 映射，轉載請注明出處。

本章我們講學習 ES6 中的 Map(映射)。上一章節我們學習了 [Set(集合)]()的相關內容，如果說 Set 類似于數組，那么 Map 就類似于對象。

一、概念

Map 是一個可以存儲鍵值對的對象。其中鍵和值都可以是對象、原始值或二者的結合。

先看一個簡單的示例，來了解 Map 基本用法:

// 申明 map 實例
let departments = new Map()

// 向 map 中添加元素
departments.set("UX", {
    "name": "UX Center",
    "employees": 48
})

departments.set("dev", {
    "name": "Research & Development Center",
    "employees": 200    
})

console.log(departments)// Map {"UX" => Object {name: "UX Center", employees: 48}, "dev" => Object {name: "Research & Development Center", employees: 200}}

console.log(typeof departments)// object

本質上 Map(映射) 就是一個 object(對象)，在 ES6 以前，我們通常會使用 object 模擬出類似 Map 的數據結構。

二、 Map 映射常用操作

常用的 Map 操作有：set(key, value) 修改, get(key) 獲取, delete(key) 刪除, has(key) 判斷是否存在, values() 獲取所有值和 clear() 清空 Map 等。

2.1 初始化

// 申明一個 Map
let m = new Map()
console.log(m)

2.2 設置和獲取值

① 使用 map.set(key, value) 設置新值或更新值

// 申明 Map
let students = new Map();

// 設置值
students.set("huliuqing", {
    name: "huliuqing",
    age: 18
})

students.set("zhangsanfeng", {
    name: "張三豐",
    age: 128
})

console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 18}, "zhangsanfeng" => Object {name: "張三豐", age: 128}}

// 重復設置值, 如果鍵值存在則新值替換舊值
students.set("huliuqing", {
    name: "huliuqing",
    age: 16
})

console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 16}, "zhangsanfeng" => Object {name: "張三豐", age: 128}}

② 使用 get(key) 獲取值，如果獲取的 key->value 不存在返回 undefined

let students = new Map();

students.set("huliuqing", {
    name: "huliuqing",
    age: 18
})

// 分別獲取 huliuqing ,zhangsanfeng
console.log(students.get("huliuqing"))// {name: "huliuqing", age: 18}
console.log(students.get("zhangsanfeng"))// undefined

2.3 判斷是否存在

使用 map.has(key) 判斷給定 key 是否存在 Map(映射) 內。

let students = new Map();

students.set("huliuqing", {
    name: "huliuqing",
    age: 18
})

console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 18}}

console.log(students.has("huliuqing"))// true
console.log(students.has("zhangsanfeng"))// false

2.4 刪除

方法 map.delete(key) 刪除給定 key 的鍵值對，并返回成功或失敗結果。

成功返回 true; 失敗或key不存在返回 false。

let students = new Map();

students.set("huliuqing", {
    name: "huliuqing",
    age: 18
})
console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 

// 刪除
let deleted = students.delete("zhangsanfeng")
console.log(`deleted zhangshanfeng: ${deleted}`)
console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 

deleted = students.delete("huliuqing")
console.log(`deleted huliuqing: ${deleted}`)
console.log(students)// Map {}

2.5 清空映射

使用 map.clear() 清空 Map 映射內所有元素

let students = new Map();

students.set("huliuqing", {
    name: "huliuqing",
    age: 18
})

students.set("zhangsanfeng", {
    name: "張三豐",
    age: 128
})

console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 18}, "zhangsanfeng" => Object {name: "張三豐", age: 128}}

// 清空
students.clear();
console.log(students);// Map {}

2.6 獲取 Map 中元素個數

使用 map.size 可以獲取當前 Map 中有多少個元素

三、 Map(映射) 的遍歷

由于 Map 同 Set 一樣，是一個可迭代對象，所以可以使用 for of 迭代語法 對其迭代獲取所有值

let pets = new Map()

pets.set("cat", {
     name: "lily" ,
     age: 2
})

pets.set("dog", {
    name: "cat",
    age: 1
})

for (pet of pets) {
    console.log(pet)// ["cat", Object]; ["dog", Object]
}

for (let [name, pet] of pets) {
    console.log(`${name} : ${pet}`)//cat : [object Object]; dog : [object Object]
}

四、 Object 與 Map 異同

由于 Map 本質是 Object 對象，雖然以前我們也拿 Object 當 Map 來使用，但是相比 Object 對象，Map 有一下特點:

4.1 object 與 map 異同

object 通常有原型即對象實例有 prototype 屬性，Map 無 prototype 屬性。雖然 ES5 開始可以使用 map = Object.create(null) 創建無 prototype 的對象。

Map 的鍵名可以是對象、原始值或二者的結合，而對象的屬性只能是 string 或 symbols 類型(Symbol 類型為 ES6 新的基礎數據類型)。

Map 使用 size 屬性可以非常用以獲取鍵值對個數。而對象僅能手動確認。

4.2 如何選擇 Map 或 Object

如果你需要解決下面這些問題，那么果斷擁抱 Map。

- 在運行之前 key 是否是未知的，是否需要動態地查詢 key 呢？
- 是否所有的值都是統一類型，這些值可以互換么？
- 是否需要不是字符串類型的 key ？
- 鍵值對經常增加或者刪除么？
- 是否有任意個且非常容易改變的鍵值對?
- 這個集合可以遍歷么(Is the collection iterated)?

五、 WeakMap

WeakMap 解構同 Map 結構類似，不同點在于 WeakMap 鍵名僅支持對象和null

參考資料

MDN Map

云服務器 GPU云服務器教你玩轉html5 javascript實現map 帶你學c帶你飛你玩

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92791.html

帶你玩轉 JavaScript ES6 (七) - 異步

摘要：說明處理方法被異步執行了。意味著操作成功完成。狀態的對象可能觸發狀態并傳遞一個值給相應的狀態處理方法，也可能觸發失敗狀態并傳遞失敗信息。注生命周期相關內容引用自四使用和異步加載圖片這是官方給出的示例，部分的代碼如下帶你玩轉 JavaScript ES6 (七) - 異步本文同步帶你玩轉 JavaScript ES6 (七) - 異步，轉載請注明出處。本章我們將學習 ES6 中的 ...

he_xd 2019-08-26 11:38 評論0 收藏0
【深入淺出容器云】五分鐘帶你玩轉Docker容器服務

摘要：深入淺出容器云系列文章是由時速云出品，本文是第二篇，歡迎大家不吝賜教。容器服務是一種高度可擴展的高性能容器管理服務，服務于應用的完整生命周期。存儲卷容器服務支持有狀態和無狀態服務。當容器重新部署時也會隨著容器在不同主機之間遷移。導語：隨著以Docker為代表的容器技術在國內的迅速發展，容器云也逐漸被廣大開發者所熟知，但容器云（CaaS）相比傳統的云主機（IaaS）在實際應用中還存在著...

AlexTuan 2019-06-28 15:07 評論0 收藏0
帶你玩轉css3的3D！

摘要：透視即是以現實的視角來看屏幕上的事物，從而展現的效果。旋轉則不再是平面上的旋轉，而是三維坐標系的旋轉，就包括軸，軸，軸旋轉。必須與屬性一同使用，而且只影響轉換元素。可自由轉載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...

Panda 2019-08-29 11:03 評論0 收藏0
帶你玩轉css3的3D！

摘要：透視即是以現實的視角來看屏幕上的事物，從而展現的效果。旋轉則不再是平面上的旋轉，而是三維坐標系的旋轉，就包括軸，軸，軸旋轉。必須與屬性一同使用，而且只影響轉換元素。可自由轉載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...

archieyang 2019-08-01 15:32 評論0 收藏0
帶你玩轉Postman的集合

摘要：選擇選項，可以添加名稱和描述的數據，以便其他用戶了解你的相關信息，如圖創建一個新集合。如果用戶正在處理一些特定的集合，可以單擊圖標將集合置頂，如圖過濾集合。集合...

Bowman_han 2021-11-22 09:34 評論0 收藏0