ES6最簡(jiǎn)單易懂教程-小白必看

ES6是什么

  • ECMAScript6簡(jiǎn)稱ES6,是JavaScript語(yǔ)言的下一帶標(biāo)準(zhǔn)泵琳,在2015年6月進(jìn)行發(fā)布,也可以稱為ES2015俱尼。ES6簡(jiǎn)化了JavaScript的開(kāi)發(fā)脓鹃,隨后的每一年都會(huì)更新一版。
  • ES2016-ES7
  • ES2017-ES8
  • ES2018-ES9
  • ES2019-ES10
  • 2020年已經(jīng)發(fā)布ES11 詳情請(qǐng)見(jiàn)("http://www.reibang.com/p/02d377ce2078")前端大牛公羊無(wú)衣的技術(shù)文章

ES6更新了什么

變量以及常量的聲明

  • 在ES6以前,聲明變量的方法都是使用var,ES6更新了let和const。let是聲明變量的方法弓熏,const是聲明常亮的方法。
  • let的特性
    1糠睡、作用域:塊級(jí)作用域
    在括號(hào)內(nèi)用let聲明的變量只能在括號(hào)內(nèi)使用
    if(true){  
        let a = 10;
    }
    console.log(a);//報(bào)錯(cuò)a is not defined
    
    2挽鞠、變量在聲明之前無(wú)法使用
    console.log(a);//報(bào)錯(cuò)Cannot access 'a' before initialization
    let a = 10;
    
    3、在for循環(huán)中用let定義自動(dòng)形成閉包
  • const的特性
    1狈孔、書(shū)寫(xiě)方式:聲明的常量要全部大寫(xiě)
    2信认、必須要在聲明的時(shí)候賦值
    const LIST//報(bào)錯(cuò)Missing initializer in const
    
    3、聲明之后不允許被再次賦值
    const LISt = 20;
    LISt = 10;//報(bào)錯(cuò)Assignment to constant variable
    
    4除抛、常量一般用來(lái)存儲(chǔ) 對(duì)象的地址狮杨,字符串表達(dá)的地址,根據(jù)需求定義的常量

箭頭函數(shù)

  • 箭頭函數(shù)簡(jiǎn)寫(xiě)了function函數(shù)
    ES5的函數(shù)寫(xiě)法
    function sum(a,b){
        console.log(a+b)
    }
    sum(10,20)//結(jié)果 30
    
    ES6箭頭函數(shù)寫(xiě)法
    let sum = (a,b)=>{
        console.l0g(a+b)
    }
    sum(10,20)//結(jié)果30
    
  • 參數(shù)容器和代碼容器之間用=>連接
  • 參數(shù)只有一個(gè)的話可以省略小括號(hào)到忽,代碼只有一行可以省略大括號(hào)和return橄教,自動(dòng)返回。
    let foo = a => a * 10;
    console.log(foo(2));//結(jié)果 20
    
  • 與數(shù)組的API配合使用
    let  arr = [1,2,3,3,4,5,5,5,66,5,3,3,2,2,2];
    arr = arr.filter( item => item % 2 === 0 )//將數(shù)組中的偶數(shù)返回
    console.log(arr);//結(jié)果[2,4,66,2,2,2]
    

解構(gòu)賦值

  • 解構(gòu)賦值適用于數(shù)組的值喘漏,對(duì)象的屬性值护蝶,對(duì)象方法和類的靜態(tài)方法
    1、數(shù)組的解構(gòu)賦值
    let [a,b,c] = [1,2,3]
    console.log(a,b,c);//結(jié)果 1 2 3
    
    
    //可以隨意嵌套
    let [[a,b],c,d] = [ [ 1 , 2 ] , [3,33,333] , 4]
    console.log(a,b,c,d);//結(jié)果 1 2 [3,33,333] 4
    
    //交換
    let a = 10;
    let b = 20;
    [a,b] = [b,a];
    console.log(a,b) //結(jié)果  20 10
    
    2翩迈、對(duì)象的解構(gòu)賦值 是按照屬性名的
    let obj = {
                  a : 20 ,
                  b : 30,
                  d : {
                        c : 50
                  }
            }
    let { a : aaaa } = obj;
    console.log(aaaa);//結(jié)果 20
    

Set和Map

  • Set的方法和特性
    1持灰、Set是一個(gè)不重復(fù)的列表。
    2负饲、所有的數(shù)據(jù)都不是按照索引排列的堤魁,沒(méi)有索引。不能使用for和for in遍v歷返十,可以使用for of妥泉。
    let set = new Set([1,2,3,4,5,1,2,3,4,5]);
    console.log(set.has(5));//查看是否含有5結(jié)果為true
    for(let value of set){
        console.log(value);// 1 2 3 4 5
    }
    set.add(10);//添加元素
    set.delete(5);//刪除元素
    set.clear();//清除所有元素
    
  • Map的方法和特性
    1、Map是鍵值對(duì)存儲(chǔ)數(shù)據(jù)
    2洞坑、Map有長(zhǎng)度盲链,map中key可以任何類型,包括索引類型,value也可以任何類型
    var map=new Map();
    map.set("name","xietian");//set 是設(shè)置屬性
    map.set(3,10);
    map.set(true,false);
    var arr=[1,2,3]
    map.set(arr,[1,2,3]);
    var o={a:1};
    map.set(o,{a:2});
    console.log(map.get(true));//get 是獲取屬性
    console.log(map.get(arr));
    console.log(map.get(o));
    map.delete(3);//key按照key來(lái)刪除
    console.log(map.has("name"));//判斷有沒(méi)有這個(gè)屬性
    console.log(map.size) //長(zhǎng)度刽沾,有多少個(gè)數(shù)據(jù)
    map.clear();//清楚所有
    

還有生成器函數(shù)本慕、Promise沒(méi)有寫(xiě)。預(yù)知后事如何請(qǐng)看下回分解

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末侧漓,一起剝皮案震驚了整個(gè)濱河市锅尘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌火架,老刑警劉巖鉴象,帶你破解...
    沈念sama閱讀 211,265評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異何鸡,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)牛欢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門(mén)骡男,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人傍睹,你說(shuō)我怎么就攤上這事隔盛。” “怎么了拾稳?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,852評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵吮炕,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我访得,道長(zhǎng)龙亲,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,408評(píng)論 1 283
  • 正文 為了忘掉前任悍抑,我火速辦了婚禮鳄炉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘搜骡。我一直安慰自己拂盯,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布记靡。 她就那樣靜靜地躺著谈竿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪摸吠。 梳的紋絲不亂的頭發(fā)上空凸,一...
    開(kāi)封第一講書(shū)人閱讀 49,772評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音蜕便,去河邊找鬼劫恒。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的两嘴。 我是一名探鬼主播丛楚,決...
    沈念sama閱讀 38,921評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼憔辫!你這毒婦竟也來(lái)了趣些?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,688評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤贰您,失蹤者是張志新(化名)和其女友劉穎坏平,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體锦亦,經(jīng)...
    沈念sama閱讀 44,130評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡舶替,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了杠园。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片顾瞪。...
    茶點(diǎn)故事閱讀 38,617評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖抛蚁,靈堂內(nèi)的尸體忽然破棺而出陈醒,到底是詐尸還是另有隱情,我是刑警寧澤瞧甩,帶...
    沈念sama閱讀 34,276評(píng)論 4 329
  • 正文 年R本政府宣布钉跷,位于F島的核電站,受9級(jí)特大地震影響肚逸,放射性物質(zhì)發(fā)生泄漏爷辙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評(píng)論 3 312
  • 文/蒙蒙 一吼虎、第九天 我趴在偏房一處隱蔽的房頂上張望犬钢。 院中可真熱鬧,春花似錦思灰、人聲如沸玷犹。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,740評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)歹颓。三九已至,卻和暖如春油湖,著一層夾襖步出監(jiān)牢的瞬間巍扛,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,967評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工乏德, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留撤奸,地道東北人吠昭。 一個(gè)月前我還...
    沈念sama閱讀 46,315評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像胧瓜,于是被迫代替她去往敵國(guó)和親矢棚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評(píng)論 2 348