Map

JavaScript的對象(Object)颖御,本質(zhì)上是鍵值對的集合(Hash結(jié)構(gòu)),但是傳統(tǒng)上只能用字符串當(dāng)做鍵潘拱。這給它的使用帶來了很大的限制。
為解決這個(gè)問題瘪弓,ES6提供了Map數(shù)據(jù)結(jié)構(gòu)禽最,它類似于對象,也是鍵值對的集合呛占。但是“鍵”的范圍不限于字符串懦趋,各種類型的值(包括對象)都可以當(dāng)做鍵。

    const m = new Map();
    const o = { p: 'hello' }

    m.set(o, 'content');//使用set方法,將對象o作為m的一個(gè)鍵
    //使用get方法讀取
    console.log(m.get(o)); //content  
    console.log(m.has(o)); //true
    //使用delete方法刪除
    m.delete(o);
    console.log(m.has(o)); //false

作為構(gòu)造函數(shù)佛猛,Map也可以接受一個(gè)數(shù)組作為參數(shù)坠狡,該數(shù)組的成員是一個(gè)個(gè)表示鍵值對的數(shù)組

    const map = new Map([
        ['name', 'Mr Wang'],
        ['title', 'Author']
    ])

    console.log(map.size); //2 
    console.log(map.has('name')); // true
    console.log(map.get('name')); // Mr Wang
    console.log(map.has('title')); // true
    console.log(map.get('title')); // Author

Map構(gòu)造函數(shù)接受數(shù)組作為參數(shù)遂跟,實(shí)際上是執(zhí)行下面的操作

    const items = [
        ['name', 'Mr Wang'],
        ['title', 'Author']
    ]
    const map = new Map()
    items.forEach(
        ([key, value]) => map.set(key, value)
    )

注意:如果對一個(gè)鍵多次賦值,后面的值將覆蓋前面的值

實(shí)例的屬性和操作方法

  • size屬性

size屬性返回Map結(jié)構(gòu)的成員總數(shù)

    const map = new Map();
    map.set('one', 1);
    map.set('two', 2);

    console.log(map.size); // 2

-set(key,value)

set方法設(shè)置鍵名key對應(yīng)值為value凯亮,然后返回整個(gè)Map結(jié)構(gòu)哄尔,如果key已經(jīng)有值,則鍵值會被更新富拗,否則生成該鍵

    const map = new Map();
    map.set('one', 1);
    map.set('one', '一');
    map.set(2, 'two');
    map.set(undefined, true);

    console.log(map.get(undefined)); // true
    console.log(map.get(2)); // two
    console.log(map.get('one')); // 一

set方法返回的是當(dāng)前的Map對象鸣戴,因此可以采用鏈?zhǔn)綄懛?/strong>

    let map = new Map().set(1, 'a').set(2, 'b').set(3, 'c')
  • get(key)

get方法讀取key對應(yīng)的鍵值,如果找不到创千,返回undefined

    const map = new Map();

    const hello = function() { console.log('Hello') }
    map.set(hello, 'Hello Mr'); // 鍵是函數(shù)

    console.log(map.get(hello)); //Hello Mr
  • has(key)

has方法返回一個(gè)布爾值入偷,表示某個(gè)鍵是否在當(dāng)前Map對象之中

    const map = new Map();
    map.set('one', 1);
    map.set(2, 'two');
    map.set(undefined, true);

    console.log(map.has(2)); //true
    console.log(map.has(undefined)); //true
    console.log(map.has("name")); //false

delete(key)
delete方法刪除某個(gè)鍵,返回true氯檐,如果刪除失敗体捏,返回false

    const map = new Map();
    map.set('one', 1);

    console.log(map.has('one')); //true
    console.log(map.delete('one')); //true
    console.log(map.has('one')); //false

clear()
clear方法清除所有成員,沒有返回值

    const map = new Map();
    map.set('one', 1);
    map.set(2, 'two');
    map.set(undefined, true);
    console.log(map.size); //3
    map.clear()
    console.log(map.has('one')); //false
    console.log(map.size); //0

遍歷方法與Set結(jié)構(gòu)的數(shù)據(jù)大同小異河泳,唯一需要注意的是Map的遍歷順序就是插入順序

    const map = new Map([
        ['F', 'no'],
        ['T',  'yes'],
    ]);
    
    for (let key of map.keys()) {
        console.log(key);
    }
    // "F"
    // "T"
    
    for (let value of map.values()) {
        console.log(value);
    }
    // "no"
    // "yes"
    
    for (let item of map.entries()) {
        console.log(item[0], item[1]);
    }
    // "F" "no"
    // "T" "yes"
    
    // 或者
    for (let [key, value] of map.entries()) {
        console.log(key, value);
    }
    // "F" "no"
    // "T" "yes"
    
    // 等同于使用map.entries()
    for (let [key, value] of map) {
        console.log(key, value);
    }
    // "F" "no"
    // "T" "yes"

Map結(jié)構(gòu)轉(zhuǎn)為數(shù)組結(jié)構(gòu)年栓,比較快速的方法是使用拓展運(yùn)算符(...)

    const map = new Map([
        [1, 'one'],
        [2, 'two'],
        [3, 'three'],
    ]);
    
    [...map.keys()]
    // [1, 2, 3]
    
    [...map.values()]
    // ['one', 'two', 'three']
    
    [...map.entries()]
    // [[1,'one'], [2, 'two'], [3, 'three']]
    
    [...map]
    // [[1,'one'], [2, 'two'], [3, 'three']]
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市纸兔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌崎坊,老刑警劉巖洲拇,帶你破解...
    沈念sama閱讀 212,029評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異男翰,居然都是意外死亡纽乱,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,395評論 3 385
  • 文/潘曉璐 我一進(jìn)店門租冠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來敛熬,“玉大人,你說我怎么就攤上這事应民。” “怎么了繁仁?”我有些...
    開封第一講書人閱讀 157,570評論 0 348
  • 文/不壞的土叔 我叫張陵归园,是天一觀的道長。 經(jīng)常有香客問我捻浦,道長,這世上最難降的妖魔是什么朱灿? 我笑而不...
    開封第一講書人閱讀 56,535評論 1 284
  • 正文 為了忘掉前任钠四,我火速辦了婚禮,結(jié)果婚禮上侣灶,老公的妹妹穿的比我還像新娘。我一直安慰自己褥影,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,650評論 6 386
  • 文/花漫 我一把揭開白布煞檩。 她就那樣靜靜地躺著栅贴,像睡著了一般熏迹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上坛缕,一...
    開封第一講書人閱讀 49,850評論 1 290
  • 那天捆昏,我揣著相機(jī)與錄音,去河邊找鬼宠页。 笑死寇仓,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的遍烦。 我是一名探鬼主播,決...
    沈念sama閱讀 39,006評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼供填,長吁一口氣:“原來是場噩夢啊……” “哼罢猪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起坡脐,我...
    開封第一講書人閱讀 37,747評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎晌端,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蓬痒,經(jīng)...
    沈念sama閱讀 44,207評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡漆羔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,536評論 2 327
  • 正文 我和宋清朗相戀三年演痒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鸟顺。...
    茶點(diǎn)故事閱讀 38,683評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖蹦锋,靈堂內(nèi)的尸體忽然破棺而出欧芽,到底是詐尸還是另有隱情,我是刑警寧澤千扔,帶...
    沈念sama閱讀 34,342評論 4 330
  • 正文 年R本政府宣布昏鹃,位于F島的核電站,受9級特大地震影響洞渤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜载迄,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,964評論 3 315
  • 文/蒙蒙 一护昧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧惋耙,春花似錦熊昌、人聲如沸湿酸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,772評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽铁坎。三九已至蜂奸,卻和暖如春硬萍,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背碌奉。 一陣腳步聲響...
    開封第一講書人閱讀 32,004評論 1 266
  • 我被黑心中介騙來泰國打工寒砖, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嫉拐,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,401評論 2 360
  • 正文 我出身青樓漠嵌,卻偏偏與公主長得像盖呼,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子几晤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,566評論 2 349

推薦閱讀更多精彩內(nèi)容