欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ES6學(xué)習(xí)教程之Map的常用方法總結(jié)

 更新時間：2017年08月03日 09:03:38   作者：小谷xg  
Map 是 ES6 中新增的一種數(shù)據(jù)結(jié)構(gòu)，與 Set 一起添加，其實功能都差不多。下面這篇文章主要給大家總結(jié)介紹了關(guān)于ES6學(xué)習(xí)教程之Map的常用方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。

前言

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

1.Map 結(jié)構(gòu)轉(zhuǎn)為數(shù)組結(jié)構(gòu)

比較快速的方法是結(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é)構(gòu)的默認遍歷器接口（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)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

相關(guān)文章

  • JavaScript執(zhí)行環(huán)境及作用域鏈實例分析

    JavaScript執(zhí)行環(huán)境及作用域鏈實例分析

    這篇文章主要介紹了JavaScript執(zhí)行環(huán)境及作用域鏈,結(jié)合實例形式分析了JavaScript執(zhí)行環(huán)境及作用域鏈的相關(guān)概念、功能與使用技巧,需要的朋友可以參考下
    2018-08-08
  • 微信小程序自定義頭部導(dǎo)航欄和導(dǎo)航欄背景圖片 navigationStyle問題

    微信小程序自定義頭部導(dǎo)航欄和導(dǎo)航欄背景圖片 navigationStyle問題

    這篇文章主要介紹了微信小程序 自定義頭部導(dǎo)航欄和導(dǎo)航欄背景圖片 navigationStyle功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-07-07
  • javascript動態(tài)加載三

    javascript動態(tài)加載三

    首先是通過同步策略來實現(xiàn)模塊加載與回調(diào)函數(shù)之間進行分離，接著是通過異步策略來實現(xiàn)模塊加載與回調(diào)函數(shù)之間進行分離
    2012-08-08
  • javascript代碼簡寫的幾種常用方式匯總

    javascript代碼簡寫的幾種常用方式匯總

    任何一種編程語言的簡寫小技巧都是為了幫助你寫出更簡潔、更完善的代碼,讓你用更少的編碼實現(xiàn)你的需求,這篇文章主要給大家介紹了關(guān)于javascript代碼簡寫的幾種常用方式,需要的朋友可以參考下
    2021-08-08
  • JavaScript里四舍五入函數(shù)round用法實例

    JavaScript里四舍五入函數(shù)round用法實例

    這篇文章主要介紹了JavaScript里四舍五入函數(shù)round用法,實例分析了round函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-04-04
  • 微信小程序?qū)崿F(xiàn)圖片上傳功能實例（前端+PHP后端）

    微信小程序?qū)崿F(xiàn)圖片上傳功能實例（前端+PHP后端）

    這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)圖片上傳功能的相關(guān)內(nèi)容，文中詳細介紹了前端+PHP后端的示例代碼，對大家的理解和學(xué)習(xí)具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2018-01-01
  • JS中常見的6種繼承方式總結(jié)

    JS中常見的6種繼承方式總結(jié)

    繼承是面向?qū)ο笕筇卣髦?可以使得子類具有父類的屬性和方法,同時還可以在子類中重新定義以及追加屬性和方法,本文為大家整理了JS中常見的6種繼承方式,希望對大家有所幫助
    2023-08-08
  • 使用Webpack構(gòu)建多頁面程序的實現(xiàn)步驟

    使用Webpack構(gòu)建多頁面程序的實現(xiàn)步驟

    這篇文章主要介紹了使用Webpack構(gòu)建多頁面程序的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • JS實現(xiàn)的base64加密、md5加密及sha1加密詳解

    JS實現(xiàn)的base64加密、md5加密及sha1加密詳解

    這篇文章主要介紹了JS實現(xiàn)的base64加密、md5加密及sha1加密的方法,結(jié)合實例形式詳細分析了JavaScript各種常見加密方法與實現(xiàn)技巧,需要的朋友可以參考下
    2016-04-04
  • three.js中多線程的使用及性能測試詳解

    three.js中多線程的使用及性能測試詳解

    這篇文章主要給大家介紹了關(guān)于three.js中多線程的使用及性能測試的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01

最新評論