映射（Map）是 ECMAScript 6 規(guī)范中引入的一種數(shù)據(jù)結(jié)構(gòu)。這是一種存儲鍵值對列表很方便的方法，類似于其他編程語言中的詞典或者哈希表。讓我們一起來看一下映射這種數(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": "80深圳、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: '80深圳、Map',
    description: 'Map對象是一種簡單的鍵/值映射，其中的鍵和值可以是任意值（原始值或?qū)ο蟮闹担?
  },
  'title' => 'javascript es6的map映射'
}
object

從輸出結(jié)果看，本質(zhì)上Map（映射）就是一個object對象。

Object與Map區(qū)別

Object和Map的相似之處在于，都是按鍵存取一個值，而且鍵都是可以刪除的。可以看出，二者之間是非常相似的，它的不同這之處在于：

?	Map	Object
意外的鍵	Map?默認情況不包含任何鍵。只包含顯式插入的鍵。	一個?Object?有一個原型, 原型鏈上的鍵名有可能和你自己在對象上的設(shè)置的鍵名產(chǎn)生沖突。 注意:?雖然 ES5 開始可以用?Object.create(null)?來創(chuàng)建一個沒有原型的對象，但是這種用法不太常見。
鍵的類型	一個?Map的鍵可以是任意值，包括函數(shù)、對象或任意基本類型。	一個Object?的鍵必須是一個?String?或是Symbol。
鍵的順序	Map?中的 key 是有序的。因此，當?shù)臅r候，一個?Map?對象以插入的順序返回鍵值。	一個?Object?的鍵是無序的 注意：自ECMAScript 2015規(guī)范以來，對象確實保留了字符串和Symbol鍵的創(chuàng)建順序； 因此，在只有字符串鍵的對象上進行迭代將按插入順序產(chǎn)生鍵。
size	?Map?的鍵值對個數(shù)可以輕易地通過size?屬性獲取	Object?的鍵值對個數(shù)只能手動計算
迭代	Map?是?iterable?的，所以可以直接被迭代。	迭代一個Object需要以某種方式獲取它的鍵然后才能迭代。
性能	在頻繁增刪鍵值對的場景下表現(xiàn)更好。	在頻繁添加和刪除鍵值對的場景下未作出優(yōu)化。

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": "80深圳、Map",
    "description":"Map對象是一種簡單的鍵/值映射，其中的鍵和值可以是任意值（原始值或?qū)ο蟮闹担?
});
console.log(page_info);
page_info.set("seo", "seo信息");
console.log(page_info);

上面的示例增加值，并修改值。

Map {
  'seo' => {
    keywords: '80深圳、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", "80sz.com");
console.log(page_info);         // Map { 'title' => 'javascript es6的map映射', 'author' => '80sz.com' }

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", "80sz.com");
console.log(page_info.values());       // [Map Iterator] { 'javascript es6的map映射', '80sz.com' }

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", "80sz.com");
console.log(page_info.entries());

輸出的結(jié)果為：

[Map Entries] {
  [ 'title', 'javascript es6的map映射' ],
  [ 'author', '80sz.com' ]
}

遍歷所有鍵值forEach(callback)

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "80sz.com");
page_info.forEach((value,key)=>{
    console.log(key,value);
});

輸出的結(jié)果為：

title javascript es6的map映射
author 80sz.com

清空Map映射所有鍵值clear()

使用map.clear()清空Map所有的鍵值對。

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "80sz.com");
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", "80sz.com");
console.log([...page_info]);  // [ [ 'title', 'javascript es6的map映射' ], [ 'author', '80sz.com' ] ]

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", "80sz.com");

console.log( mapToObj(page_info)); 

輸出結(jié)果為：

[Object: null prototype] {
  title: 'javascript es6的map映射',
  author: '80sz.com'
}

數(shù)組轉(zhuǎn)為Map映射

將數(shù)組傳入Map構(gòu)造函數(shù)即可，即new Map(array)。

const page_info = [
    ["title","javascript es6的map映射"],
    ["author","80sz.com"]
];
console.log(new Map(page_info)); // Map { 'title' => 'javascript es6的map映射', 'author' => '80sz.com' }

對象轉(zhuǎn)為Map

對象轉(zhuǎn)為Map映射通過Object.entries()。

const page_info = {
    title:"javascript es6的map映射",
    author:"80sz.com"
};
console.log(new Map(Object.entries(page_info)));  // Map { 'title' => 'javascript es6的map映射', 'author' => '80sz.com' }

映射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", "80sz.com");
console.log( mapToJson(page_info));   // {"title":"javascript es6的map映射","author":"80sz.com"}

?