ES6學(xué)習(xí)教程之Map的常用方法總結(jié)
前言
ES6包含了許多新的語(yǔ)言特性，這會(huì)讓JS變的更加強(qiáng)大且富有表現(xiàn)力。本文將給大家詳細(xì)介紹關(guān)于ES6中Map的常用方法，話不多說(shuō)，來(lái)一起看看詳細(xì)的介紹：
1.Map 結(jié)構(gòu)轉(zhuǎn)為數(shù)組結(jié)構(gòu)
比較快速的方法是結(jié)合使用擴(kuò)展運(yùn)算符（...）
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 原生提供三個(gè)遍歷器:
- keys()：返回鍵名的遍歷器。
- values()：返回鍵值的遍歷器。
- entries()：返回所有成員的遍歷器。
下面是使用實(shí)例。
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);
}
上面代碼最后的那個(gè)例子，表示 Map 結(jié)構(gòu)的默認(rèn)遍歷器接口（Symbol.iterator 屬性），就是 entries 方法。
map[Symbol.iterator] === map.entries // true
3.Map 獲取長(zhǎng)度
map.size;
4.Map 獲取第一個(gè)元素
const m = new Map();
m.set('key1', {})
m.set('keyN', {})
console.log(m.entries().next().value); // [ 'key1', {} ]
獲取第一個(gè)key
console.log(m.keys().next().value); // key1
獲取第一個(gè)value
console.log(m.values().next().value); // {}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法示例
- ES6學(xué)習(xí)筆記之Set和Map數(shù)據(jù)結(jié)構(gòu)詳解
- ES6教程之for循環(huán)和Map,Set用法分析
- 淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu)
- ES6學(xué)習(xí)筆記之map、set與數(shù)組、對(duì)象的對(duì)比
- 一文搞懂ES6中的Map和Set
- ES6新特性五：Set與Map的數(shù)據(jù)結(jié)構(gòu)實(shí)例分析
- ES6 Map結(jié)構(gòu)的應(yīng)用實(shí)例分析
- es6中使用map簡(jiǎn)化復(fù)雜條件判斷操作實(shí)例詳解
相關(guān)文章
JavaScript執(zhí)行環(huán)境及作用域鏈實(shí)例分析
這篇文章主要介紹了JavaScript執(zhí)行環(huán)境及作用域鏈,結(jié)合實(shí)例形式分析了JavaScript執(zhí)行環(huán)境及作用域鏈的相關(guān)概念、功能與使用技巧,需要的朋友可以參考下2018-08-08
微信小程序自定義頭部導(dǎo)航欄和導(dǎo)航欄背景圖片 navigationStyle問(wèn)題
這篇文章主要介紹了微信小程序 自定義頭部導(dǎo)航欄和導(dǎo)航欄背景圖片 navigationStyle功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
首先是通過(guò)同步策略來(lái)實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離，接著是通過(guò)異步策略來(lái)實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離2012-08-08
javascript代碼簡(jiǎn)寫(xiě)的幾種常用方式匯總
任何一種編程語(yǔ)言的簡(jiǎn)寫(xiě)小技巧都是為了幫助你寫(xiě)出更簡(jiǎn)潔、更完善的代碼,讓你用更少的編碼實(shí)現(xiàn)你的需求,這篇文章主要給大家介紹了關(guān)于javascript代碼簡(jiǎn)寫(xiě)的幾種常用方式,需要的朋友可以參考下2021-08-08
JavaScript里四舍五入函數(shù)round用法實(shí)例
這篇文章主要介紹了JavaScript里四舍五入函數(shù)round用法,實(shí)例分析了round函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
微信小程序?qū)崿F(xiàn)圖片上傳功能實(shí)例（前端+PHP后端）
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)圖片上傳功能的相關(guān)內(nèi)容，文中詳細(xì)介紹了前端+PHP后端的示例代碼，對(duì)大家的理解和學(xué)習(xí)具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
繼承是面向?qū)ο笕筇卣髦?可以使得子類(lèi)具有父類(lèi)的屬性和方法,同時(shí)還可以在子類(lèi)中重新定義以及追加屬性和方法,本文為大家整理了JS中常見(jiàn)的6種繼承方式,希望對(duì)大家有所幫助2023-08-08
使用Webpack構(gòu)建多頁(yè)面程序的實(shí)現(xiàn)步驟
這篇文章主要介紹了使用Webpack構(gòu)建多頁(yè)面程序的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JS實(shí)現(xiàn)的base64加密、md5加密及sha1加密詳解
這篇文章主要介紹了JS實(shí)現(xiàn)的base64加密、md5加密及sha1加密的方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript各種常見(jiàn)加密方法與實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-04-04
這篇文章主要給大家介紹了關(guān)于three.js中多線程的使用及性能測(cè)試的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01