ES6 - Map

sugarmo 發布于2019-08-26 10:27 / 1789人閱讀

摘要：和是新增的種集合類型，在前面已經講過。對應的不會對方法的結果產生影響。方法的第一個參數也就是一個接受，，本身這三個參數。會按照鍵值對的插入順序輪詢得到打印結果以上，就是的一些基本特性和使用場景，下一篇我們講。

Set和Map是ES6新增的2種集合類型，Set在前面已經講過。這一篇我們主要來講一下Map。我們先來看一些Map的基本定義和描述：

1: Map是一種存儲著多個鍵值對的有序列表
2: Map的元素的key和value可以是任何數據類型
3: 鍵名的等值性通過Object.is()判斷，所以數字5和字符串"5"是兩個獨立的key

廢話不多說，我們來看看Map的基本用法：
一：創建和初始化一個Map
1：創建一個空Map

let map = new Map();

以上，我們創建了一個沒有元素的空Map。
2：用Array初始化Map

let map = new Map([["name", "mike"],["age", 25]]);
map.forEach(function (value, key, map) {
    console.log(`${key}: ${value}`)
})

得到打印結果：

name: mike
age: 25

用Array初始化Map，需要一個二維數組，二維數組里面的每一個元素（也就是一個一維數組）包含2個元素，第一個元素是鍵值對的key，第二個元素是鍵值對的value。

二：Map的增
在上面的內容里，我們說到通過調用new Map()創建了一個空Map。那如果我們想要往這個map里存儲數據，可以調用set(key, value)來完成：

let map = new Map();
map.set("name", "mike");
map.set("age", 25);
map.forEach(function (value, key, map) {
    console.log(`${key}: ${value}`)
})

以上的打印得到：

name: mike
age: 25

set()方法，第一個參數為key，第二個參數為value。

三：Map的刪
跟Set一樣，我們也可以通過調用clear()方法來刪除整個map里面的元素：

let map = new Map([["name", "mike"],["age", 25]]);
map.clear();
console.log(map.size); // 0

四：Map的查
1: 我們可以通過has()方法來查看在map里是否存在某個鍵名

let map = new Map([["name", ""],["age", 0]]);
console.log(map.has("name")); //true
console.log(map.has("age"));//true
console.log(map.has("country"));//false

需要特別注意的是，has()方法只檢查某個key是否存在，存在就返回true，不存在就返回false。key對應的value不會對has()方法的結果產生影響。

2: 我們可以通過get()方法來獲取某個key對應的value

let map = new Map([["name", "mike"],["age", 25]]);
console.log(map.get("name")); // mike
console.log(map.get("age")); // 25
console.log(map.get("country")); // undefined

如果獲取某個不存在的key，此方法返回undefined。

五：Map的減
與Set一樣，我們可以調用delete(key)刪除一個鍵值對：

let map = new Map([["name", "mike"], ["age", 25]]);
map.delete("name");
console.log(map.size); // 1

六：Map的forEach()方法
Map當然也有forEach()方法，我們在前面的例子其實已經使用過了。forEach()方法的第一個參數（也就是一個function）接受value，key，map本身這三個參數。forEach()會按照鍵值對的插入順序輪詢：

let map = new Map();
map.set(2, "lily");
map.set("name", "dan");
map.set(1, "mike");
map.forEach(function (value, key, mapSelf) {
    console.log(`${key}: ${value}`);
})

得到打印結果：

2: lily
name: dan
1: mike

以上，就是Map的一些基本特性和使用場景，下一篇我們講WeakMap。

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

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

ES6引入的數據結構 - ES6 - ECMAScript特性 - Javascript核心

摘要：引入的數據結構新加入的數據類型有這些數據結構的支持并不廣泛，在寫這篇文章的時候。是或其他可枚舉的對象，其每個元素是的元數組。開頭的和不對持有引用，不影響。因此，他們沒有辦法對自身的進行直接的枚舉。目前新版的和支持。原文：http://pij.robinqu.me/JavaScript_Core/ECMAScript/es6/es6_data_types.html 源代...

fobnn 2019-08-19 14:50 評論0 收藏0
深入理解：ES6中的Set和Map數據結構，Map與其它數據結構的互相轉換

摘要：學習筆記工作中常用到的語法只是簡單提及和，今天有空于是寫了這篇文章深入理解中的和數據結構，與其它數據結構的互相轉換。的提供了新的數據結構。本身是一個構造函數，用來生成數據結構。文中的內容主要是來自于阮一峰的《ES6標準入門》（第三版）。《學習ES6筆記──工作中常用到的ES6語法》只是簡單提及Set和Map，今天有空于是寫了這篇文章──《深入理解：ES6中的Set和Map數據結構，M...

Cristalven 2019-08-23 12:00 評論0 收藏0
深入理解ES6筆記（七）Set集合和Map集合

摘要：創建并添加項目可以使用數組來初始化一個，并且構造器會確保不重復地使用這些值使用方法來測試某個值是否存在于中移除值使用方法來移除單個值，或調用方法來將所有值從中移除。屬性的初始化將數組傳遞給構造器，以便使用數據來初始化一個。主要知識點：Set的基本操作，Weak Set，Map的基本操作，Weak MapshowImg(https://segmentfault.com/img/bVbf...

loostudy 2019-08-23 11:26 評論0 收藏0
學習ES6筆記──工作中常用到的ES6語法

摘要：但是有了尾調用優化之后，遞歸函數的性能有了提升。常被用來檢查對象中是否存在某個鍵名，集合常被用來獲取已存的信息。循環解構對象本身不支持迭代，但是我們可以自己添加一個生成器，返回一個，的迭代器，然后使用循環解構和。一、let和const 在JavaScript中咱們以前主要用關鍵var來定義變量，ES6之后，新增了定義變量的兩個關鍵字，分別是let和const。對于變量來說，在ES5中...

curried 2019-08-26 12:16 評論0 收藏0
由codewars上的一道題目學習ES6的Map

摘要：我對數據結構的學習最近在上做了一道題目，嗯，我這個渣渣沒有做出來，然后看了別人的解決方案，是時候學習一下的了。。。。。讀取對應的鍵值，如果找不到返回鍵是函數返回一個布爾值，表示某個鍵是否在數據結構中。我對ES6數據結構Map的學習最近在CodeWars上做了一道題目，嗯，我這個渣渣沒有做出來，然后看了別人的解決方案，Map？？？是時候學習一下ES6的Map了。。。。。以下是原題...

IamDLY 2019-08-21 15:29 評論0 收藏0
ES6中 Map 數據結構

摘要：新增了數據結構，對象保存鍵值對，任何值原始值或對象都可以作為一個鍵或一個值。基本用法實例的屬性和操作方法方法設置鍵名對應的鍵值為，然后返回整個結構。獲取的值方法返回一個布爾值，表示某個鍵是否在當前對象之中。如果刪除失敗，返回。 ES6新增了 Map數據結構，Map對象保存鍵值對，任何值（原始值或對象）都可以作為一個鍵或一個值。基本用法 let map = new Map(); let...

hlcfan 2019-08-23 12:11 評論0 收藏0