ES6 Map和Set

Map對象

Map 對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。

Maps 和 Objects 的區(qū)別
  • 一個(gè) Object 的鍵只能是字符串或者 Symbols,但一個(gè)Map 的鍵可以是任意值
  • Map 中的鍵值是有序的(FIFO 原則),而添加到對象中的鍵則不是。
  • Map 的鍵值對個(gè)數(shù)可以從 size 屬性獲取,而 Object 的鍵值對個(gè)數(shù)只能手動(dòng)計(jì)算。
  • Object 都有自己的原型,原型鏈上的鍵名有可能和你自己在對象上的設(shè)置的鍵名產(chǎn)生沖突。
Map對象的屬性

size:返回Map對象中所包含的鍵值對個(gè)數(shù)。

Map對象的方法
  • set(key, val): 向Map中添加新元素;
  • get(key): 通過鍵值查找特定的數(shù)值并返回;
  • has(key): 判斷Map對象中是否有Key所對應(yīng)的值,有返回true,否則返回false;
  • delete(key): 通過鍵值從Map中移除對應(yīng)的數(shù)據(jù);
  • clear(): 將這個(gè)Map中的所有元素刪除。
const m1 = new Map([['a',222],['b',888]]);
console.log(m1); //{"a" => 222, "b" => 888}
console.log(m1.get('a'));  //222

const m2 = new Map([['c',777]]);
const m3 = new Map(m2);
console.log(m3.get('c'));   //777
console.log(m3.has('a'));   //false
console.log(m3.set('d',111));  {"c" => 777, "d" => 111}
遍歷方法

keys():返回鍵名的遍歷器
values():返回鍵值的遍歷器
entries():返回鍵值對的遍歷器
forEach():使用回調(diào)函數(shù)遍歷每個(gè)成員

Map與其他數(shù)據(jù)結(jié)構(gòu)的互相轉(zhuǎn)換

Map轉(zhuǎn)換為數(shù)組和對象

const arr = [[{'a': 1}, 111], ['b': 222]]
const myMap = new Map(arr)
[...myMap] // map轉(zhuǎn)數(shù)組。 [[{'a': 1}, 111], ['b': 222]]

const obj = {}
const map = new Map(['a', 111], ['b', 222])
for(let [key,value] of map) {
  obj[key] = value
}
console.log(obj) // {a:111, b: 222}

Set 對象

Set 對象允許你存儲任何類型的唯一值,無論是原始值或者是對象引用。
Set 中的特殊值

Set 對象存儲的值總是唯一的,所以需要判斷兩個(gè)值是否恒等。有幾個(gè)特殊值需要特殊對待:

  • +0 與 -0 在存儲判斷唯一性的時(shí)候是恒等的,所以不重復(fù);
  • undefined 與 undefined 是恒等的,所以不重復(fù);
  • NaN 與 NaN 是不恒等的,但是在 Set 中只能存一個(gè),不重復(fù)。
Set 對象作用

數(shù)組去重(利用擴(kuò)展運(yùn)算符)

const mySet = new Set([1, 2, 3, 4, 4])
[...mySet] // [1, 2, 3, 4]

并集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

交集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

差集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

注:x => b.has(x) 本質(zhì)是一個(gè)函數(shù)相當(dāng)于 function(x){return b.has(x)}。

Set實(shí)例對象的方法

add(value):添加某個(gè)值,返回 Set 結(jié)構(gòu)本身(可以鏈?zhǔn)秸{(diào)用)。
delete(value):刪除某個(gè)值,刪除成功返回true,否則返回false。
has(value):返回一個(gè)布爾值,表示該值是否為Set的成員。
clear():清除所有成員,沒有返回值。

Map和Set區(qū)別

區(qū)別:
1.Map是鍵值對,Set是值的集合,當(dāng)然鍵和值可以是任何的值;
2.Map可以通過get方法獲取值,而set不能,因?yàn)樗挥兄担?br> 3.都能通過迭代器進(jìn)行for...of遍歷;
4.Set的值是唯一的可以做數(shù)組去重,Map由于沒有格式限制,可以做數(shù)據(jù)存儲;
5.map和set都是stl中的關(guān)聯(lián)容器,map以鍵值對的形式存儲,key=value組成pair,是一組映射關(guān)系。set只有值,可以認(rèn)為只有一個(gè)數(shù)據(jù),并且set中元素不可以重復(fù)且自動(dòng)排序。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 作者:米書林參考文章:《菜鳥教程》、《 ECMAScript 6 入門》(阮一峰) Map對象 Map對象簡介 作...
    林之小記閱讀 422評論 0 0
  • 之前我們記錄過一些常用的ES6屬性,常用ES6總結(jié),今天再來學(xué)習(xí)兩個(gè)雖然不是太常見但是用起來非常好用的兩個(gè)屬性。 ...
    hengking閱讀 547評論 0 3
  • Map Map對象保存鍵值對,任何值(對象或者原始值)都可以作為一個(gè)鍵或一個(gè)值。 Map與Object的區(qū)別: 一...
    BlueSkyBlue閱讀 159評論 0 0
  • Map 對象 Map 對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。 Maps 和 Obje...
    依米_xx閱讀 164評論 0 0
  • 『ES6腳丫系列』Set+WeakSet+Map+WeakMap 如果有理解不到位的地方,歡迎大家糾錯(cuò)。 一、Se...
    吃碼小妖閱讀 331評論 0 0

友情鏈接更多精彩內(nèi)容