JavaScript之Map和Set_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript的默認(rèn)對(duì)象表示方式{}可以視為其他語言中的Map或Dictionary的數(shù)據(jù)結(jié)構(gòu),即一組鍵值對(duì)。
但是JavaScript的對(duì)象有個(gè)小問題,就是鍵必須是字符串。但實(shí)際上Number或者其他數(shù)據(jù)類型作為鍵也是非常合理的。
為了解決這個(gè)問題,最新的ES6規(guī)范引入了新的數(shù)據(jù)類型Map。要測(cè)試你的瀏覽器是否支持ES6規(guī)范,請(qǐng)執(zhí)行以下代碼,如果瀏覽器報(bào)ReferenceError錯(cuò)誤,那么你需要換一個(gè)支持ES6的瀏覽器:
'use strict';
var m = new Map();
var s = new Set();
alert('你的瀏覽器支持Map和Set!');
Map
Map是一組鍵值對(duì)的結(jié)構(gòu),具有極快的查找速度。
舉個(gè)例子,假設(shè)要根據(jù)同學(xué)的名字查找對(duì)應(yīng)的成績(jī),如果用Array實(shí)現(xiàn),需要兩個(gè)Array:
var names = ['Michael', 'Bob', 'Tracy']; var scores = [95, 75, 85];
給定一個(gè)名字,要查找對(duì)應(yīng)的成績(jī),就先要在names中找到對(duì)應(yīng)的位置,再?gòu)膕cores取出對(duì)應(yīng)的成績(jī),Array越長(zhǎng),耗時(shí)越長(zhǎng)。
如果用Map實(shí)現(xiàn),只需要一個(gè)“名字”-“成績(jī)”的對(duì)照表,直接根據(jù)名字查找成績(jī),無論這個(gè)表有多大,查找速度都不會(huì)變慢。用JavaScript寫一個(gè)Map如下:
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
初始化Map需要一個(gè)二維數(shù)組,或者直接初始化一個(gè)空Map。Map具有以下方法:
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined
由于一個(gè)key只能對(duì)應(yīng)一個(gè)value,所以,多次對(duì)一個(gè)key放入value,后面的值會(huì)把前面的值沖掉:
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
Set
Set和Map類似,也是一組key的集合,但不存儲(chǔ)value。由于key不能重復(fù),所以,在Set中,沒有重復(fù)的key。
要?jiǎng)?chuàng)建一個(gè)Set,需要提供一個(gè)Array作為輸入,或者直接創(chuàng)建一個(gè)空Set:
var s1 = new Set(); // 空Set var s2 = new Set([1, 2, 3]); // 含1, 2, 3
重復(fù)元素在Set中自動(dòng)被過濾:
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
注意數(shù)字3和字符串'3'是不同的元素。
通過add(key)方法可以添加元素到Set中,可以重復(fù)添加,但不會(huì)有效果:
>>> s.add(4)
>>> s
{1, 2, 3, 4}
>>> s.add(4)
>>> s
{1, 2, 3, 4}
通過delete(key)方法可以刪除元素:
var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
小結(jié)
Map和Set是ES6標(biāo)準(zhǔn)新增的數(shù)據(jù)類型,請(qǐng)根據(jù)瀏覽器的支持情況決定是否要使用。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 一文帶你徹底搞懂JS中的Map與Set
- JavaScript中Set和Map數(shù)據(jù)結(jié)構(gòu)使用場(chǎng)景詳解
- 一文詳解JS中的Map、Set、WeakMap和WeakSet
- javascript中Set、Map、WeakSet、WeakMap區(qū)別
- javascript?ES6中set集合、map集合使用方法詳解與源碼實(shí)例
- JavaScript Set與Map數(shù)據(jù)結(jié)構(gòu)詳細(xì)分析
- js中Map和Set的用法及區(qū)別實(shí)例詳解
- 詳談js遍歷集合(Array,Map,Set)
- ES6學(xué)習(xí)總結(jié)之Set和Map的使用
相關(guān)文章
JavaScript實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話框(加滾動(dòng)條)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話框,附加滾動(dòng)條功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02
微信小程序?qū)崿F(xiàn)頁面監(jiān)聽自定義組件的觸發(fā)事件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頁面監(jiān)聽自定義組件的觸發(fā)事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11
js實(shí)現(xiàn)圖片實(shí)時(shí)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片實(shí)時(shí)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01
JavaScript設(shè)計(jì)模式策略模式案例分享
這篇文章主要介紹了JavaScript設(shè)計(jì)模式策略模式案例分享,策略設(shè)計(jì)模式就是指一個(gè)問題匹配多個(gè)解決方法,不一定要用到哪一個(gè),而且有可能隨時(shí)增加多個(gè)方案2022-06-06
javascript中for...of和for..in循環(huán)的區(qū)別
JS中循環(huán)語句眾多,你是否也有用的時(shí)候突然不知道用哪個(gè)的經(jīng)歷,本文主要介紹了javascript中for...of和for..in循環(huán)的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
JS實(shí)現(xiàn)根據(jù)當(dāng)前文字選擇返回被選中的文字
這篇文章主要介紹JS如何實(shí)現(xiàn)根據(jù)當(dāng)前文字選擇返回被選中的文字,需要的朋友可以參考下2014-05-05
Uniapp如何封裝網(wǎng)絡(luò)請(qǐng)求方法demo
這篇文章主要為大家介紹了Uniapp如何封裝網(wǎng)絡(luò)請(qǐng)求方法demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
js調(diào)試系列 斷點(diǎn)與動(dòng)態(tài)調(diào)試[基礎(chǔ)篇]
上幾篇文章已經(jīng)為大家介紹了js調(diào)試系列的一些基礎(chǔ)知識(shí),支持亂碼兄弟為大家?guī)砹薺s斷點(diǎn)與動(dòng)態(tài)調(diào)試方法,需要的朋友可以參考下2014-06-06

