ES6快速入門(mén)(二)

1. Map對(duì)象

ES6提供了新的數(shù)據(jù)結(jié)構(gòu)Map,Map結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng)嘉裤,是一種更完善的Hash結(jié)構(gòu)實(shí)現(xiàn)郑临。如果你需要“鍵值對(duì)”的數(shù)據(jù)結(jié)構(gòu),Map比Object更合適屑宠。它類(lèi)似于對(duì)象厢洞,也是鍵值對(duì)的集合,但是“鍵”的范圍不限于字符串典奉,各種類(lèi)型的值(包括對(duì)象)都可以當(dāng)作鍵躺翻。{"b" => "banana"}并且每一項(xiàng)都包含了key和value
我們來(lái)新建一個(gè)Map對(duì)象,并為其賦值:

    let map = new Map();
    map.set('a','apple');
    map.set('b','banana');
    console.log(map); //   Map {"a" => "apple", "b" => "banana"}

結(jié)果如圖:


獲取Map對(duì)象里面的值(map.get()):
    let map = new Map();
    map.set('a','apple');
    map.set('b','banana');
    console.log(map.get('b'));  //banana
刪除Map對(duì)象里面的值(map.delete();):
    let map = new Map();
    map.set('a','apple');
    map.set('b','banana');
    map.delete('a');
    console.log(map); // {"b" => "banana"}
獲取Map對(duì)象的“長(zhǎng)度”:
    let map = new Map();
    map.set('a','apple');
    map.set('b','banana');
    console.log(map.size);  //2
    console.log(map.length); //undefined
map.entries()
    let map = new Map();
    map.set('a','apple');
    map.set('b','banana');
    console.log(map.entries());  //  MapIterator {["a", "apple"], ["b", "banana"]}
遍歷Map對(duì)象(for...of... )
    let map = new Map();
    map.set('a','apple');
    map.set('b','banana');
    for(let name of map){
        console.log(name);  //["a", "apple"]  ["b", "banana"]
    }
    //循環(huán)出來(lái)的是以數(shù)組套鍵值對(duì)的方式

如果我們只要Map中的“值”怎么辦卫玖?別急

    let map = new Map();
    map.set('a','apple');
    map.set('b','banana');
    for(let val of map.values()){
        console.log(val);   //apple   banana
    }

如果我們只要Map中的“鍵(key)”怎么辦公你?別急

    let map = new Map();
    map.set('a','apple');
    map.set('b','banana');
    for(let key of map.keys()){
        console.log(key);  // a  b
    }

如果我們只要Map中的“鍵 --- 值”怎么辦?也別急

    let map = new Map();
    map.set('a','apple');
    map.set('b','banana');
    for(let [key,value] of map.entries()){
        console.log(key,value);   //a apple     b banana
    }

2.for循環(huán)那些事

a) for ... in ...循環(huán)

  //循環(huán)數(shù)組
    let arr = [12,5,8];
    for(let i = 0;i<arr.length;i++){
        console.log(i);    //0 1  2
        console.log(arr[i]);  //12  5  8
    }

    let arr = [12,5,8];
    for(let i in arr){
        console.log(i);      //0 1  2
        console.log(arr[i]);  //12  5  8
    }
    //循環(huán)json數(shù)據(jù)
    let json = {a:12,b:5,c:8};
    for(let name in json){
        console.log(name);  //a  b c
        console.log(json[name]);  //12 5 8
    }

b) for ... of ...循環(huán)

  //循環(huán)數(shù)組
    let arr = [12,5,8];
    for(let name of arr){
        console.log(name);  // 12 5 8
    }
 //循環(huán)json數(shù)據(jù)
    let json = {a:'apple',b:'banana'};
    for(let name of json){
        console.log(name);
    }
//報(bào)錯(cuò)假瞬,因?yàn)椴荒苡胒or ...of...來(lái)循環(huán)json數(shù)據(jù)

c) 刪除json的某一條數(shù)據(jù)

    let json = {a:12,b:5};
    delete json.a;
    console.log(json);  // b:5

3. 箭頭函數(shù)

ES6標(biāo)準(zhǔn)新增了一種新的函數(shù):Arrow Function(箭頭函數(shù))陕靠。
為什么叫Arrow Function迂尝?因?yàn)樗亩x用的就是一個(gè)箭頭:

x => x * x

我們先回顧下ES5函數(shù)定義與調(diào)用:

    var show = function(){
        alert(12);  
    };
    show();   // 12
    const show = () =>{
        alert(12);  
    };
    show();  // 12 
//個(gè)人理解:這里將function關(guān)鍵字去掉然后在“()”后面加一個(gè)“=>”
接下來(lái)我們舉幾個(gè)例子,來(lái)進(jìn)一步了解下箭頭函數(shù):

a) 函數(shù)有返回值

//ES5函數(shù)寫(xiě)法
    var sum = function(a,b){
        return a+b;
    }
    alert(sum(12,5));
//ES6函數(shù)寫(xiě)法
    let sum = (a,b) => {
        return a+b;
    }
    alert(sum(12,5));
  //進(jìn)化一下  ---   省略花括號(hào)
    let sum = (a,b) => a+b;
    alert(sum(12,5));

b) 參數(shù)是1個(gè)

        var show = function(a){ return 'welcome'}
        //相當(dāng)于   省略括號(hào)
        var show = a => 'welcome'

c) 參數(shù)是0個(gè)

        var show = function(){ return 'welcome'}
        //相當(dāng)于   省略括號(hào)
        var show = () => 'welcome'
注意:箭頭函數(shù)下 剪芥,arguments 不能使用了

var show = (a,b) => console.log(this.arguments); // 報(bào)錯(cuò)


######箭頭函數(shù)簡(jiǎn)單應(yīng)用:
數(shù)組排序
var arr = [12,55,8];

//es5寫(xiě)法
arr.sort(function(n1,n2){
return n1 - n2;
});
//es6寫(xiě)法
arr.sort((n1,n2) => n1-n2);
alert(arr);

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末辜王,一起剝皮案震驚了整個(gè)濱河市绝页,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖儡嘶,帶你破解...
    沈念sama閱讀 211,948評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件御蒲,死亡現(xiàn)場(chǎng)離奇詭異纵顾,居然都是意外死亡敬鬓,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)偏塞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)唱蒸,“玉大人,你說(shuō)我怎么就攤上這事灸叼∩裥冢” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,490評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵古今,是天一觀的道長(zhǎng)屁魏。 經(jīng)常有香客問(wèn)我,道長(zhǎng)捉腥,這世上最難降的妖魔是什么氓拼? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,521評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮抵碟,結(jié)果婚禮上桃漾,老公的妹妹穿的比我還像新娘。我一直安慰自己拟逮,他們只是感情好撬统,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,627評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著敦迄,像睡著了一般恋追。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上罚屋,一...
    開(kāi)封第一講書(shū)人閱讀 49,842評(píng)論 1 290
  • 那天苦囱,我揣著相機(jī)與錄音,去河邊找鬼沿后。 笑死沿彭,一個(gè)胖子當(dāng)著我的面吹牛朽砰,可吹牛的內(nèi)容都是我干的尖滚。 我是一名探鬼主播喉刘,決...
    沈念sama閱讀 38,997評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼漆弄!你這毒婦竟也來(lái)了睦裳?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,741評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤撼唾,失蹤者是張志新(化名)和其女友劉穎廉邑,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體倒谷,經(jīng)...
    沈念sama閱讀 44,203評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蛛蒙,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,534評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了渤愁。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片牵祟。...
    茶點(diǎn)故事閱讀 38,673評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖抖格,靈堂內(nèi)的尸體忽然破棺而出诺苹,到底是詐尸還是另有隱情,我是刑警寧澤雹拄,帶...
    沈念sama閱讀 34,339評(píng)論 4 330
  • 正文 年R本政府宣布收奔,位于F島的核電站,受9級(jí)特大地震影響滓玖,放射性物質(zhì)發(fā)生泄漏坪哄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,955評(píng)論 3 313
  • 文/蒙蒙 一势篡、第九天 我趴在偏房一處隱蔽的房頂上張望损姜。 院中可真熱鬧,春花似錦殊霞、人聲如沸摧阅。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,770評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)棒卷。三九已至,卻和暖如春祝钢,著一層夾襖步出監(jiān)牢的瞬間比规,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,000評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工拦英, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蜒什,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,394評(píng)論 2 360
  • 正文 我出身青樓疤估,卻偏偏與公主長(zhǎng)得像灾常,于是被迫代替她去往敵國(guó)和親霎冯。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,562評(píng)論 2 349

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

  • 三钞瀑,字符串?dāng)U展 3.1 Unicode表示法 ES6 做出了改進(jìn)沈撞,只要將碼點(diǎn)放入大括號(hào),就能正確解讀該字符雕什。有了這...
    eastbaby閱讀 1,519評(píng)論 0 8
  • //Clojure入門(mén)教程: Clojure – Functional Programming for the J...
    葡萄喃喃囈語(yǔ)閱讀 3,629評(píng)論 0 7
  • 一缠俺、ES6簡(jiǎn)介 ? 歷時(shí)將近6年的時(shí)間來(lái)制定的新 ECMAScript 標(biāo)準(zhǔn) ECMAScript 6(亦稱(chēng) ...
    一歲一枯榮_閱讀 6,062評(píng)論 8 25
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語(yǔ)法,類(lèi)相關(guān)的語(yǔ)法贷岸,內(nèi)部類(lèi)的語(yǔ)法壹士,繼承相關(guān)的語(yǔ)法,異常的語(yǔ)法偿警,線程的語(yǔ)...
    子非魚(yú)_t_閱讀 31,598評(píng)論 18 399
  • 特別后悔的一件事户敬,就是沒(méi)有堅(jiān)持2012年的工作落剪,09年畢業(yè)后的前幾年,一直不知道自己想干什么尿庐,年紀(jì)輕輕的做管理忠怖,不...
    miumiu4049閱讀 115評(píng)論 0 0