ES6 基礎

怨言

已經好久沒有動前端的知識了,再來到一個新落點,讓在下感概的是前端輕量度遠高於Java後端,重新技術到陳舊版本有點不太適應,而對於新落點的前端依然可使用VS Code開發Vue先後分離項目,在於習慣IDEA開發,SpringBoot開發的高效,忽然使用eclipse,Spring MVC 3.x版本、不聯網的開發,我也0疼...看着那個前端妹子打的噼啪噼啪好是羨慕

 

一時興起,那就學習一下ES6,雖然一段時間了,也補一補基礎,我的比較喜歡vue

 

ES6

es6 彌補 es三、es5 中的不足,好比常量、做用域、對象代理、類、繼承等等,這些功能在es三、es5也能夠實現,可是比較複雜,es6對其作了封裝,開發中使用會很是的方便、快捷

關於es三、es五、es6的區別通常體現也比較模糊,下面一邊對比一邊認識的方式作個學習記錄,來體現es6的好處

es6以前是沒有常量的,不過作後端的並不陌生,就不會在乎,es三、es5是沒有常量的概念,好比還有箭頭函數、默認參數等等都是es6特有的,對面新技術,有着飢渴的慾望,落後的我一步一步學習

快速搭個vue來學習,很是的快捷->  搭建方式

將搭建好的應用導入 VS code (推薦使用),下面是簡單的目錄展現,在conponents中能夠寫代碼,router是配置路由

 

常量

es3: 沒有

es5: 利用向對象添加屬性的方式來實現,js中全局對象是window,對於常量實現就是綁定在window上

語法 使用Object的defineProperty定義屬性的方法,再設置屬性只讀,就能夠達到做爲一個常量的存在

es6: 使用const定義常量

//es5 常量
  Object.defineProperty(window, "const_es5", {
    value: 123,
    writable: false
  })

  //es6 常量
  const const_es6=456

 

做用域

es6的做用域有明顯是界線---塊做用域

//es5
  var ary = []
  for (var i = 0; i <= 2; i++) {
    ary[i] = function () {
      return i * 2;
    }
  }

上面輸入的數組的元素都是6 , 不是應該有0纔對, 以往在javascript中只有全局做用域和函數做用域,並不存在塊做用域

注意: for中使用的是var定義的i變量,會有一個叫作變量提高效果,意思是var i=0;提高到for前面,而不屬於for循環中,被認爲是全局的i變量,第一步當i=0賦值ary[0],此步是對的,可是function函數體中的i並未取值,function中的i是對變量的引用,而不是對變量值的引用,體現出function函數體內是一個表達式,而不是一個值的存在,不會跑到for上面去獲取i變量,此處稱爲閉包,因此i*2這步並非0,i++的效果一直覆蓋着全局的i變量,直到不知足條件中止循環,function緊接着執行,這時候,全局i爲3,結果都是6

//es6
  var ary = []
  for (let i = 0; i <= 2; i++) {
    ary[i] = function () {
      return i * 2;
    }
  }

使用let代替var,輸出的結果就是0,2,4 

let有塊做用域的做用,當前的閉包取做用於當前的塊做用域,每次循環,保存當前變量i,供後面閉包使用,每次循環都會生成新的做用域

es6中{}就能夠起到塊做用域的簡單區分,es3,es5須要使用當即執行函數來起到做用域的隔離做用

 

箭頭函數

兩種函數的簡單示例 : 

es3,es5
function a(){
}

es6
()=>{
}

用對數組的遍歷操做來作一個demo實踐

{
  //es3,es5
  var ary = [1, 2, 3, 4, 5]
  var e = ary.map(function (v) {
    return v + 1;
  })
} 
{
  //es6
  let ary = [1, 2, 3, 4, 5]
  let e = ary.map(v => v + 1)
}

箭頭函數的寫法 和 後端的lambda表達式差很少, 當只有一個參數的時候能夠省去括號等等語法,作一個簡單的體會

箭頭函數有一個重要的特性,就是和this綁定

{
  //es3,es5中聲明一個類,用一個函數做爲類的構造器
  var factory=function(){
    this.a='a'
    this.b='b'
    this.c={
      a:'a+',
      b:function(){
        return this.a
      }
    }
  }
  console.log(new factory().c.b())
  //輸出是 a+
}

從上面能夠看出來es3,es6中,this的指向是c中的a,有人總結過this的套路:this的指向是該函數被調用的對象,就是函數被執行的時候,執行哪一個對象調用了他,上面能夠看到b()是被c調用的,因此this指向c中的a

下面使用es6 再操做一次

{
  //es6
  let factory=function(){
    this.a='a'
    this.b='b'
    this.c={
      a:'a+',
      b:()=>{
        return this.a
      }
    }
  }
  console.log(new factory().c.b())
  //輸出是 a
}

能夠看出 es6 箭頭函數的this區別了,es6箭頭函數中的this指向定義時this的指向,c中的b在定義時,b中this指向外側函數體中this,外側this指向factory實例,因此輸出時factory實例的a值

 

默認參數

默認參數是開發是常用的,好比一個function,函數中的幾個參數,參數無關緊要,沒有的時候,入函數體邏輯的時候就有一個默認值

{
  //es3,es5
  function a(x,y,z){
    x=x||1
    if(y==undefined){
      y=2
    }
    if(z==undefined){
      z=3
    }
    return x+y+z
  }
}

看到上面的code,都會有種想省,省優化都能拖出來一腿

{
  //es6
  function a(x=1,y=2,z=3){
    return x+y+z
  }
}

es6默認參數不只能夠默認值,還能夠對必填參數作校驗,好比非空

{
  //es6
  function checkEmpty(){
    throw new Error('this is empty');
  }
  function foo(x=checkEmpty,y=1){
    return x+y
  }
}

若是沒有值,函數體就拋出error

擴展: 可變參數,對函數體錄入的參數不肯定是幾個的狀況

{
  //es3,es5
  function a(x){
    var b=Array.prototype.slice.call(arguments)
    var sum=0
    b.forEach(element => {
      sum+=element+1
    });
    return sum
  }
  console.log(a(1,2,3)) 
  //9
}

利用arguments來實現可變參數,arguments是一個僞數組,能夠用數組的方式操做

{
  //es6
  function foo(...x){
    var sum=0
    x.forEach(y=>{
      sum+=sum+1
    })
    return sum
  }
}

...是擴展運算符 , 還有合併數組的做用

{
  //es3,es5 合併數組
  var ary=[1,2]
  var ary1=[3,4].concat(ary)
}
{
  //es6 合併數組
  var ary=[1,2]
  var ary1=[3,4,...ary]
}

 

對象代理

好比封裝一個數據,該數據只供內部方法使用,其餘地方訪問不到,作事後端就知道相似私有屬性的做用,es6提供對象代理的功能,來實現屬性私有化

加一箇中間代理層,好比

{
    let a=new Proxy(對象, {
    get(target, key) {
      return target(key)
    },
    set(target,key,value){
      //邏輯
      if(key == 'tom'){
        //..
      }
    }
  })
}

 

在對比下,可見es6的改變仍是比較大的,新型的操做十分便利,以上只是es6的一小部分

還有不少知識,好比解構賦值、模版字符串、正則擴展、數字擴展、Class、Module、Iterator、Set和Map、函數擴展、Symbol、對象擴展、Generator等等, 繼續擴展學習

----------------------------------------------------------