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

