成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

acrazing / 2238人閱讀

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

本文同步帶你入門(mén) 帶你玩轉(zhuǎn) JavaScript ES6 (六) - Map 映射，轉(zhuǎn)載請(qǐng)注明出處。

本章我們講學(xué)習(xí) ES6 中的 Map(映射)。上一章節(jié)我們學(xué)習(xí)了 [Set(集合)]()的相關(guān)內(nèi)容，如果說(shuō) Set 類似于數(shù)組，那么 Map 就類似于對(duì)象。

一、 概念

Map 是一個(gè)可以存儲(chǔ)鍵值對(duì)的對(duì)象。其中鍵和值都可以是對(duì)象、原始值或二者的結(jié)合。

先看一個(gè)簡(jiǎn)單的示例，來(lái)了解 Map 基本用法:

// 申明 map 實(shí)例
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

本質(zhì)上 Map(映射) 就是一個(gè) object(對(duì)象)，在 ES6 以前，我們通常會(huì)使用 object 模擬出類似 Map 的數(shù)據(jù)結(jié)構(gòu)。

二、 Map 映射常用操作

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

2.1 初始化 
// 申明一個(gè) Map
let m = new Map()
console.log(m)
2.2 設(shè)置和獲取值

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

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

// 設(shè)置值
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}}

// 重復(fù)設(shè)置值, 如果鍵值存在則新值替換舊值
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(映射) 內(nèi)。

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 的鍵值對(duì)，并返回成功或失敗結(jié)果。

成功返回 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 映射內(nèi)所有元素

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 中元素個(gè)數(shù)

使用 map.size 可以獲取當(dāng)前 Map 中有多少個(gè)元素

三、 Map(映射) 的遍歷

由于 Map 同 Set 一樣，是一個(gè)可迭代對(duì)象，所以可以使用 for of 迭代語(yǔ)法 對(duì)其迭代獲取所有值

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 本質(zhì)是 Object 對(duì)象，雖然以前我們也拿 Object 當(dāng) Map 來(lái)使用，但是相比 Object 對(duì)象，Map 有一下特點(diǎn):

4.1 object 與 map 異同

object 通常有原型即對(duì)象實(shí)例有 prototype 屬性，Map 無(wú) prototype 屬性。雖然 ES5 開(kāi)始可以使用 map = Object.create(null) 創(chuàng)建無(wú) prototype 的對(duì)象。

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

Map 使用 size 屬性可以非常用以獲取鍵值對(duì)個(gè)數(shù)。而對(duì)象僅能手動(dòng)確認(rèn)。

4.2 如何選擇 Map 或 Object

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

- 在運(yùn)行之前 key 是否是未知的，是否需要?jiǎng)討B(tài)地查詢 key 呢？
- 是否所有的值都是統(tǒng)一類型，這些值可以互換么？
- 是否需要不是字符串類型的 key ？
- 鍵值對(duì)經(jīng)常增加或者刪除么？
- 是否有任意個(gè)且非常容易改變的鍵值對(duì)?
- 這個(gè)集合可以遍歷么(Is the collection iterated)?
五、 WeakMap

WeakMap 解構(gòu)同 Map 結(jié)構(gòu)類似，不同點(diǎn)在于 WeakMap 鍵名僅支持對(duì)象和null

參考資料

MDN Map

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92791.html

相關(guān)文章

  • 帶你玩轉(zhuǎn) JavaScript ES6 (七) - 異步

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

    he_xd 評(píng)論0 收藏0

  • 【深入淺出容器云】五分鐘帶你玩轉(zhuǎn)Docker容器服務(wù)

    摘要：深入淺出容器云系列文章是由時(shí)速云出品，本文是第二篇，歡迎大家不吝賜教。容器服務(wù)是一種高度可擴(kuò)展的高性能容器管理服務(wù)，服務(wù)于應(yīng)用的完整生命周期。存儲(chǔ)卷容器服務(wù)支持有狀態(tài)和無(wú)狀態(tài)服務(wù)。當(dāng)容器重新部署時(shí)也會(huì)隨著容器在不同主機(jī)之間遷移。 導(dǎo)語(yǔ)：隨著以Docker為代表的容器技術(shù)在國(guó)內(nèi)的迅速發(fā)展，容器云也逐漸被廣大開(kāi)發(fā)者所熟知，但容器云（CaaS）相比傳統(tǒng)的云主機(jī)（IaaS）在實(shí)際應(yīng)用中還存在著...

    AlexTuan 評(píng)論0 收藏0

  • 帶你玩轉(zhuǎn)css3的3D！

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

    Panda 評(píng)論0 收藏0

  • 帶你玩轉(zhuǎn)css3的3D！

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

    archieyang 評(píng)論0 收藏0

  • 帶你玩轉(zhuǎn)Postman的集合

    摘要：選擇選項(xiàng)，可以添加名稱和描述的數(shù)據(jù)，以便其他用戶了解你的相關(guān)信息，如圖創(chuàng)建一個(gè)新集合。如果用戶正在處理一些特定的集合，可以單擊圖標(biāo)將集合置頂，如圖過(guò)濾集合。 集合...

    Bowman_han 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<