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