互聯網開(kāi)發&品牌全案設計(jì)

12年(nián) 實戰經驗,品質服務

ES6語法入門(mén) 之開(kāi)門(mén)見(jiàn)山(shān)

2018-04-14 關鍵詞: 2611

今天開(kāi)始一(yī)起來(lái)了(le)解下(xià)Es6這(zhè)個(gè)技(jì)術(shù)知(zhī)識點,這(zhè)樣我們自(zì)‌己也(yě)可(kě)以總結和(hé)學習(xí),也(yě)算(suàn)一(yī)個(gè)好(hǎo)的(de)開(kāi)始和(hé)堅持 。ECMAScript 6(以下(xià)簡稱ES6)是(shì)JavaScript語言的(de)下(xià)一(yī)代标準。因為(wèi)當前版本的(de)ES6是(shì)在 2015年(nián)發布的(de),所以又(yòu)稱ECMAScript 2015。也(yě)就(jλiù)是(shì)說(shuō),ES6就(jiù)是(shì)ES2015。

雖然目前并不(bù)是(shì)所有(yǒu)浏覽器(qì)都(dōu)能(néng)兼容ES6全部特性,但★(dàn)越來(lái)越多(duō)的(de)程序員(yuán)在實際項目當中已經開(kāi)始使用(yòng)ES6了(le)。所以就(jiù)算(suàn)你(nǐ)→現(xiàn)在不(bù)打算(suàn)使用(yòng)ES6,但(dàn)為(wèi)了(le)看(kàn)懂(dǒng)别人(rén)寫的(de)代碼你(nǐ)也(yě)必須要₩(yào)懂(dǒng)ES6的(de)語法了(le)...之前用(yòng)的(de),你(nǐ)所熟悉的(de)js語法是(shì)es5标準,現(xiàn)在是(shì)es6标準,恩就(•jiù)這(zhè)麽多(duō)。

ES6 常見(jiàn)語法

let, const, class, extends, super, arrow functions, template string, destructuring, d↓efault, rest arguments
這(zhè)些(xiē)是(shì)ES6最常用(yòng)的(de)幾個(gè)語法,基本上(shàng)學會(huì)它們,我們就(jiù)可(kě)以走遍天下(xiàλ)都(dōu)不(bù)怕啦!我會(huì)用(yòng)最通(tōng)俗易懂(dǒng)的(de)語言和(hé)例子(zǐ)來(lái)講解它們,保證一(yī)看(kàn$)就(jiù)懂(dǒng),一(yī)學就(jiù)會(huì)。

但(dàn)是(shì)ES6那(nà)麽多(duō)那(nà)麽多(duō)特性,我們需要(yào)全部都(dō‍u)掌握嗎(ma)?秉著(zhe)二八原則,掌握好(hǎo)常用(yòng)的(de),有(yǒu)用(yòng)的(de)這(zhè)個(gè)可(kě)以讓我們快(kuài)速掌握。今天跟蘇州φ網絡公司小(xiǎo)編來(lái)學最基礎的(de) 也(yě)是(shì)最有(yǒu)特點的(d≥e)  let, const

1.變量聲明(míng) const 和(hé) let

我們都(dōu)是(shì)知(zhī)道(dào)在ES6以前,var關鍵字聲明(míng)變量。無論聲明(m¥íng)在何處,都(dōu)會(huì)被視(shì)為(wèi)聲明(míng)在函數(shù)的(de)最頂部(不(bù)在函數(shù)內(nèi♥)即在全局作(zuò)用(yòng)域的(de)最頂部)。這(zhè)就(jiù)是(shì)函數(shù)變量提升例如(rú):

  function aa() {    
  if(bool) {       
       var test = 'hello man'
   } else {       
        console.log(test)
    }
  }
以上(shàng)的(de)代碼實際上(shàng)是(shì):

  function aa() {    var test // 變量提升
    if(bool) {
        test = 'hello man'
    } else {        
  
  //此處訪問(wèn)test 值為(wèi)undefined
        console.log(test)
    }    //此處訪問(wèn)test 值為(wèi)undefined
  }
所以不(bù)用(yòng)關心bool是(shì)否為(wèi)true or false。實際上(shàng),無論如(rú)何test都(dōu)會(huì)被≠創建聲明(míng)。

接下(xià)來(lái)ES6主角登場(chǎng):
我們通(tōng)常用(yòng)let和(hé)const來(lái)聲明(míng),let表示變量、const表示常量。let和(hé)const都(dōu)是(shì)塊級作(zuò≈)用(yòng)域。怎麽理(lǐ)解這(zhè)個(gè)塊級作(zuò)用(yòng)域?

在一(yī)個(gè)函數(shù)內(nèi)部
在一(yī)個(gè)代碼塊內(nèi)部
說(shuō)白(bái)了(le) {}大(dà)括号內(nèi)的(de)代碼塊即為(wèi)let 和(hé) €const的(de)作(zuò)用(yòng)域。
看(kàn)以下(xià)代碼:

  function aa() {    
      if(bool) {      
       let test = 'hello man'
    } else {        //test 在此處訪≥問(wèn)不(bù)到(dào)
        console.log(test)
    }
  }
let的(de)作(zuò)用(yòng)域是(shì)在它所在當前代碼塊,但(dàn)不(bù)會(huì)被提升到(dào)當前函數(shù)的(de)最頂部。

再來(lái)說(shuō)說(shuō)const。

    const name = 'lux'
    name = 'joe' //再次賦值此時(shí)會(huì)報(bào)錯(cuò)
說(shuō)一(yī)道(dào)面試題

    var funcs = []    
    for (var i = 0; i < 10; i++) {
        funcs.push(function() { console.l±og(i) })
    }
    funcs.forEach(function(func) {
        func()
    })
這(zhè)樣的(de)面試題是(shì)大(dà)家(jiā)常見(jiàn),很(hěn)多(duō)同學一(yī)看(kàn)就(jiù)™知(zhī)道(dào)輸出 10 十次
但(dàn)是(shì)如(rú)果我們想依次輸出0到(dào)9呢(ne)?兩種解決方法。直接上(shàng)代碼。

    // ES5告訴我們可(kě)以利用(yòng)閉包解決這(zhè)個(gè)問(wèn)題
    var funcs = []    
    for (var i = 0; i < 10; i++) {
        func.push((function(value) {       &nb'sp;    
            return function() { ♣             
            
              console.log(value)
            }
        }(i)))
    }    
    // es6
    for (let i = 0; i < 10; i++) {
        func.push(function() {        ←   
     console.log(i)
        })
    }
達到(dào)相(xiàng)同的(de)效果,es6簡潔的(de)解決方案是(shì)不(bù)是(shì)更讓你(nǐ)心動!!!想要(yà↓o)了(le)解的(de)更多(duō)可(kě)以去(qù)莫度上(shàng)去(qù)找哦,你(nǐ)懂(dǒng)的(de)。
欄目 案例 售後 電(diàn)話(huà)