ES6學習教程之Map的常用方法總結(jié)
更新時間：2017年08月03日 09:03:38 作者：小谷xg
Map 是 ES6 中新增的一種數(shù)據(jù)結(jié)構，與 Set 一起添加，其實功能都差不多。下面這篇文章主要給大家總結(jié)介紹了關于ES6學習教程之Map的常用方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
前言
ES6包含了許多新的語言特性，這會讓JS變的更加強大且富有表現(xiàn)力。本文將給大家詳細介紹關于ES6中Map的常用方法，話不多說，來一起看看詳細的介紹：
1.Map 結(jié)構轉(zhuǎn)為數(shù)組結(jié)構
比較快速的方法是結(jié)合使用擴展運算符（...）
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 循環(huán)遍歷
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 結(jié)構的默認遍歷器接口（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); // {}
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
這篇文章主要介紹了無刷新預覽所選擇的圖片的具體實現(xiàn),需要的朋友可以參考下2014-04-04
js 獲取服務器控件值的代碼2010-03-03
在視頻前插入廣告...2006-11-11
這篇文章主要介紹了使用js讓圖片組成動畫,這樣就可以用js做動畫了，大家參考使用吧2014-01-01
這篇文章主要為大家詳細介紹了原生js實現(xiàn)自定義滾動條，可點擊、拖動到達，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
Web開發(fā)中,JavaScript與CSS的結(jié)合用于增強網(wǎng)頁的交互性和用戶體驗,本文將探索幾種高級方法來使用JavaScript操作CSS,并分別通過代碼示例進行講解,希望對大家有所幫助2023-12-12
$$()函數(shù)應用實例...2006-10-10
這篇文章主要介紹了javascript系統(tǒng)時間設置操作,涉及javascript時間運算與判斷相關操作技巧,需要的朋友可以參考下2019-06-06
Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)
這篇文章主要介紹了Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)的相關資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了Javascript Symbol原理及使用方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10