es6語法

劍未佩妥發表於2018-07-16

1.變數宣告const和let

我們都是知道在ES6以前，var關鍵字宣告變數。無論宣告在何處，都會被視為宣告在函式的最頂部(不在函式內即在全域性作用域的最頂部)。這就是函式變數提升例如:

  function aaa() {
    if(bool) {
        var test = 'zuoan'
    } else {
        console.log(test)
    }
  } 複製程式碼

  function aa() {
    var test // 變數提升
    if(bool) {
        test = 'hello man'
    } else {
        //此處訪問test 值為undefined
        console.log(test)
    }
    //此處訪問test 值為undefined
  } 複製程式碼

所以不用關心bool是否為true or false。實際上，無論如何test都會被建立宣告。

接下來ES6：
我們通常用let和const來宣告，let表示變數、const表示常量。let和const都是塊級作用域。

在一個函式內部

在一個程式碼塊內部

說白了 {}大括號內的程式碼塊即為let 和 const的作用域。

  function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //test 在此處訪問不到
        console.log(test)
    }
  } 複製程式碼

let的作用域是在它所在當前程式碼塊，但不會被提升到當前函式的最頂部。

2.模板字串

es6模板字元簡直是開發者的福音啊，解決了ES5在字串功能上的痛點。

第一個用途，基本的字串格式化。將表示式嵌入字串中進行拼接。用${}來界定。

    //es5 
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux 複製程式碼

第二個用途，在ES5時我們通過反斜槓(\)來做多行字串或者字串一行行拼接。ES6反引號(``)直接搞定。

    // es5
    var msg = "Hi \
    man!
    "
    // es6
    const template = `<div>
        <span>hello world</span>
    </div>` 複製程式碼

對於字串es6當然也提供了很多厲害的方法。說幾個常用的。

    // 1.includes：判斷是否包含然後直接返回布林值
    let str = 'hahay'
    console.log(str.includes('y')) // true
    // 2.repeat: 獲取字串重複n次
    let s = 'hh'
    console.log(s.repeat(3)) // 'hehehe'
    //如果你帶入小數, Math.floor(num) 來處理 複製程式碼

3.函式

函式預設引數

在ES5我們給函式定義引數預設值是怎麼樣

    function action(num) {
        num = num || 200
        //當傳入num時，num為傳入的值
        //當沒傳入引數時，num即有了預設值200
        return num
    } 複製程式碼

num傳入為0的時候就是false， 此時num = 200 與我們的實際要的效果明顯不一樣

ES6為引數提供了預設值。在定義函式時便初始化了這個引數，以便在引數沒有被傳遞進去時使用。

    function action(num = 200) {
        console.log(num)
    }
    action() //200
    action(300) //300 複製程式碼

箭頭函式

ES6很有意思的一部分就是函式的快捷寫法。也就是箭頭函式。

箭頭函式最直觀的三個特點。

不需要function關鍵字來建立函式

省略return關鍵字

繼承當前上下文的 this 關鍵字

//例如：
    [1,2,3].map( x => x + 1 )
 
//等同於：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this)) 複製程式碼

當你的函式有且僅有一個引數的時候，是可以省略掉括號的。當你函式返回有且僅有一個表示式的時候可以省略{}；例如:

  var people = name => 'hello' + name
    //引數name就沒有括號 複製程式碼

4.擴充的物件功能

物件初始化簡寫

ES5我們對於物件都是以鍵值對的形式書寫，是有可能出現價值對重名的。例如：


 function people(name, age) {
        return {
            name: name,
            age: age
        };
    } 複製程式碼

鍵值對重名，ES6可以簡寫如下： 

  function people(name, age) {
        return {
            name,
            age
        };
    } 複製程式碼

ES6 同樣改進了為物件字面量方法賦值的語法。ES5為物件新增方法：

  const people = {
        name: 'lux',
        getName: function() {
            console.log(this.name)
        }
    } 複製程式碼

ES6通過省略冒號與 function 關鍵字，將這個語法變得更簡潔

    const people = {
        name: 'lux',
        getName () {
            console.log(this.name)
        }
    } 複製程式碼

ES6 物件提供了Object.assign()這個方法來實現淺複製。Object.assign()可以把任意多個源物件自身可列舉的屬性拷貝給目標物件，然後返回目標物件。第一引數即為目標物件。在實際專案中，我們為了不改變源物件。一般會把目標物件傳為{}

    const obj = Object.assign({}, objA, objB)複製程式碼



相關文章