ECMAScript6中Map映射的基本概念與常用方法
映射(Map)是 ECMAScript 6 規(guī)范中引入的一種數(shù)據(jù)結(jié)構(gòu)。這是一種存儲(chǔ)鍵值對(duì)列表很方便的方法,類似于其他編程語(yǔ)言中的詞典或者哈希表。
什么是映射
Javascript 的對(duì)象(Object),本質(zhì)上是鍵值對(duì)的集合(Hash結(jié)構(gòu)),但是傳統(tǒng)上只能用字符串當(dāng)作鍵,這給使用帶來(lái)了很大的限制。為了解決這個(gè)問(wèn)題,ECMAScript 6 引入了 Map 數(shù)據(jù)結(jié)構(gòu)。它類似于對(duì)象,也是鍵值對(duì)的集合,但是"鍵"的范圍不僅僅局限于字符串,而是各種類型的值(包括對(duì)象)都可以當(dāng)作鍵。也就是說(shuō),Object 結(jié)構(gòu)(對(duì)象結(jié)構(gòu))提供了"字符串—值"的對(duì)應(yīng),而 Map 結(jié)構(gòu)提供了"值—值"的對(duì)應(yīng),是一種更完善的 Hash 結(jié)構(gòu)的實(shí)現(xiàn)。
下面來(lái)看一個(gè)簡(jiǎn)單的示例,了解Map的基本用法:
// 聲明map實(shí)例 const page_info = new Map() // 向 map 中添加元素 page_info.set("seo", { "keywords": "devpoint、Map", "description":"Map對(duì)象是一種簡(jiǎn)單的鍵/值映射,其中的鍵和值可以是任意值(原始值或?qū)ο蟮闹担? }) page_info.set("title", "javascript es6的map映射") console.log(page_info) console.log(typeof page_info) // object
輸出結(jié)果為:
Map { 'seo' => { keywords: 'devpoint、Map', description: 'Map對(duì)象是一種簡(jiǎn)單的鍵/值映射,其中的鍵和值可以是任意值(原始值或?qū)ο蟮闹担? }, 'title' => 'javascript es6的map映射' } object
從輸出結(jié)果看,本質(zhì)上 Map(映射)就是一個(gè)object對(duì)象。
Object與Map區(qū)別
Object和Map的相似之處在于,都是按鍵存取一個(gè)值,而且鍵都是可以刪除的??梢钥闯?,二者之間是非常相似的,它的不同這之處在于:
Map映射常用方法
常用的 Map 方法有:賦值set(key, value) 、獲取get(key) 、移除指定鍵名及其對(duì)應(yīng)的值delete(key) 、判斷是否存在has(key) 、 獲取所有值values() 、key/value迭代器entries()、遍歷forEach()和清空所有鍵/值對(duì)clear() 等。
聲明并初始化
const new_map = new Map(); console.log(new_map); //輸出:Map {}
賦值set
賦值使用map.set(key,value),可以用于增加新的鍵/值對(duì)或者修改鍵/值對(duì),返回整個(gè)Map對(duì)象。
const page_info = new Map() // 設(shè)置值 page_info.set("seo", { "keywords": "devpoint、Map", "description":"Map對(duì)象是一種簡(jiǎn)單的鍵/值映射,其中的鍵和值可以是任意值(原始值或?qū)ο蟮闹担? }); console.log(page_info); page_info.set("seo", "seo信息"); console.log(page_info);
上面的示例增加值,并修改值。
Map { 'seo' => { keywords: 'devpoint、Map', description: 'Map對(duì)象是一種簡(jiǎn)單的鍵/值映射,其中的鍵和值可以是任意值(原始值或?qū)ο蟮闹担? } } Map { 'seo' => 'seo信息' }
獲取鍵值get
使用 get(key) 獲取鍵值,如果獲取的 key->value 不存則返回 undefined
const page_info = new Map(); page_info.set("title", "javascript es6的map映射"); const title = page_info.get("title"); const seo_info = page_info.get("seo"); console.log(title); //javascript es6的map映射 console.log(seo_info); //undefined
刪除鍵值delete
map.delete(key) 刪除指定 key 的鍵值對(duì),返回成功或失敗結(jié)果,刪除成功返回true,刪除失敗返回false。
const page_info = new Map(); page_info.set("title", "javascript es6的map映射"); page_info.set("author", "devpoint"); console.log(page_info); // Map { 'title' => 'javascript es6的map映射', 'author' => 'devpoint' } const deleted_author = page_info.delete("author"); const deleted_seo = page_info.delete("seo"); console.log(deleted_author); // true console.log(deleted_seo); // false console.log(page_info); // Map { 'title' => 'javascript es6的map映射' }
判斷鍵值是否存在 has
使用map.has(key)判斷指定key是否存在。
const page_info = new Map(); page_info.set("title", "javascript es6的map映射"); console.log(page_info); // Map { 'title' => 'javascript es6的map映射' } console.log(page_info.has("title")); // true console.log(page_info.has("seo")); // false
獲取所有鍵值 values()
const page_info = new Map(); page_info.set("title", "javascript es6的map映射"); page_info.set("author", "devpoint"); console.log(page_info.values()); // [Map Iterator] { 'javascript es6的map映射', 'devpoint' }
key/value 迭代器 entries()
使用map.entries()返回一個(gè)包含Map對(duì)象中每一個(gè)[key, value]數(shù)組的Iterator迭代器。
const page_info = new Map(); page_info.set("title", "javascript es6的map映射"); page_info.set("author", "devpoint"); console.log(page_info.entries());
輸出的結(jié)果為:
[Map Entries] {
[ 'title', 'javascript es6的map映射' ],
[ 'author', 'devpoint' ]
}
遍歷所有鍵值 forEach(callback)
const page_info = new Map(); page_info.set("title", "javascript es6的map映射"); page_info.set("author", "devpoint"); page_info.forEach((value,key)=>{ console.log(key,value); });
輸出的結(jié)果為:
title javascript es6的map映射
author devpoint
清空Map映射所有鍵值 clear()
使用 map.clear() 清空Map所有的鍵值對(duì)。
const page_info = new Map(); page_info.set("title", "javascript es6的map映射"); page_info.set("author", "devpoint"); page_info.clear(); console.log(page_info); // Map {}
與其它數(shù)據(jù)結(jié)構(gòu)的轉(zhuǎn)換
Map映射轉(zhuǎn)為數(shù)組
Map轉(zhuǎn)為數(shù)組最方便方法是使用擴(kuò)展運(yùn)算符...
const page_info = new Map(); page_info.set("title", "javascript es6的map映射"); page_info.set("author", "devpoint"); console.log([...page_info]); // [ [ 'title', 'javascript es6的map映射' ], [ 'author', 'devpoint' ] ]
Map映射轉(zhuǎn)為對(duì)象
function mapToObj(map) { const obj = Object.create(null); map.forEach((v,k)=>{ obj[k] = v; }); return obj; } const page_info = new Map(); page_info.set("title", "javascript es6的map映射"); page_info.set("author", "devpoint"); console.log( mapToObj(page_info));
輸出結(jié)果為:
[Object: null prototype] {
title: 'javascript es6的map映射',
author: 'devpoint'
}
數(shù)組轉(zhuǎn)為Map映射
將數(shù)組傳入 Map 構(gòu)造函數(shù)即可,即 new Map(array)。
const page_info = [ ["title","javascript es6的map映射"], ["author","devpoint"] ]; console.log(new Map(page_info)); // Map { 'title' => 'javascript es6的map映射', 'author' => 'devpoint' }
對(duì)象轉(zhuǎn)為Map
對(duì)象轉(zhuǎn)為Map映射通過(guò) Object.entries()。
const page_info = { title:"javascript es6的map映射", author:"devpoint" }; console.log(new Map(Object.entries(page_info))); // Map { 'title' => 'javascript es6的map映射', 'author' => 'devpoint' }
映射Map轉(zhuǎn)為JSON
Map 轉(zhuǎn)為 JSON ,步驟是先把Map轉(zhuǎn)為對(duì)象,即前面的mapToObj,然后使用JSON.stringify方法
function mapToObj(map) { const obj = Object.create(null); map.forEach((v,k)=>{ obj[k] = v; }); return obj; } function mapToJson(map){ return JSON.stringify(mapToObj(map)); } const page_info = new Map(); page_info.set("title", "javascript es6的map映射"); page_info.set("author", "devpoint"); console.log( mapToJson(page_info)); // {"title":"javascript es6的map映射","author":"devpoint"}
總結(jié)
到此這篇關(guān)于ECMAScript6中Map映射的基本概念與常用方法的文章就介紹到這了,更多相關(guān)ECMAScript6中Map映射內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09詳解webpack的proxyTable無(wú)效的解決方案
這篇文章主要介紹了詳解webpack的proxyTable無(wú)效的解決方案,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06細(xì)說(shuō)webpack源碼之compile流程-入口函數(shù)run
Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析,然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。這篇文章主要介紹了webpack源碼之compile流程-入口函數(shù)run,需要的朋友可以參考下2017-12-12JavaScript基礎(chǔ)之靜態(tài)方法和實(shí)例方法分析
這篇文章主要介紹了JavaScript基礎(chǔ)之靜態(tài)方法和實(shí)例方法,簡(jiǎn)單分析了javascript靜態(tài)方法及實(shí)例方法的定義、使用相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12一款JavaScript壓縮工具:X2JSCompactor
一款JavaScript壓縮工具:X2JSCompactor...2007-06-06IE中document.createElement的iframe無(wú)法設(shè)置屬性name的解決方法
這篇文章主要介紹了IE中document.createElement的iframe無(wú)法設(shè)置屬性name的解決方法,需要的朋友可以參考下2015-09-09深入學(xué)習(xí)JavaScript中的promise
這篇文章主要介紹了深入學(xué)習(xí)JavaScript中的promise,Promise對(duì)象的主要?途是通過(guò)鏈?zhǔn)秸{(diào)?的結(jié)構(gòu),將原本回調(diào)嵌套的異步處理流程,轉(zhuǎn)化成“對(duì)象.then().then()...”的鏈?zhǔn)浇Y(jié)構(gòu)2022-06-06