ES6學習教程之Map的常用方法總結

前言

創新互聯專業網站設計制作、成都做網站，集網站策劃、網站設計、網站制作于一體，網站seo、網站優化、網站營銷、軟文平臺等專業人才根據搜索規律編程設計，讓網站在運行后，在搜索中有好的表現，專業設計制作為您帶來效益的網站！讓網站建設為您創造效益。

ES6包含了許多新的語言特性，這會讓JS變的更加強大且富有表現力。本文將給大家詳細介紹關于ES6中Map的常用方法，話不多說，來一起看看詳細的介紹：

1.Map 結構轉為數組結構

比較快速的方法是結合使用擴展運算符（...）

let map = new Map([
 [1, 'one'],
 [2, 'two'],
 [3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

2.Map 循環遍歷

Map 原生提供三個遍歷器:

keys()：返回鍵名的遍歷器。
values()：返回鍵值的遍歷器。
entries()：返回所有成員的遍歷器。

下面是使用實例。

let map = new Map([
 ['F', 'no'],
 ['T', 'yes'],
]);

for (let key of map.keys()) {
 console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
 console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
 console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
 console.log(key, value);
}

// 等同于使用map.entries()
for (let [key, value] of map) {
 console.log(key, value);
}

上面代碼最后的那個例子，表示 Map 結構的默認遍歷器接口（Symbol.iterator 屬性），就是 entries 方法。

map[Symbol.iterator] === map.entries // true

3.Map 獲取長度

map.size;

4.Map 獲取第一個元素

const m = new Map();
m.set('key1', {})
m.set('keyN', {})

console.log(m.entries().next().value); // [ 'key1', {} ]

獲取第一個key

console.log(m.keys().next().value); // key1

獲取第一個value

console.log(m.values().next().value); // {}

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創新互聯的支持。

文章標題：ES6學習教程之Map的常用方法總結
文章位置：http://m.kartarina.com/article2/gecsic.html

成都網站建設公司_創新互聯，為您提供網站制作、網站導航、企業網站制作、Google、用戶體驗、網站營銷

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容