【VUE】ES6常用語法鞏固

前言:Vue是以ES6爲基礎構建的,加上ES6已經被目前絕大部分瀏覽器支持,是 JavaScript 的下一個版本標準,因此有必要單獨抽出來一篇來總結一下ES6的語法.

---

目錄

 

1.var const let 區別

2.箭頭函數

3.參數的默認值

4.展開運算符

5.省略字面量

---

1.var const let 區別

var的作用域是方法作用域,在方法外無法訪問通過var定義的變量.

const的作用域和let的作用域相同,是塊級作用域,只要出在同一個{}內都是可以被訪問到的,兩者的主要差別是const一旦被賦值就不能再被改變了,這點類比java中的final關鍵字即可理解. 在Vue中大部分情況下會用const,除非知道該變量值會被改變.

2.箭頭函數

// es5
var fn = function(a, b) {
    return a + b;
}

// es6 箭頭函數寫法，當函數直接被return時，可以省略函數體的括號
const fn = (a, b) => a + b;

// es5
var foo = function() {
    var a = 20；
    var b = 30;
    return a + b;
}

// es6
const foo = () => {
   const a = 20;
   const b = 30;
   return a + b;
}

值得一提的是,箭頭函數中沒有this,所以要使用this時儘量避免使用箭頭函數,否則容易出現undefined.

3.參數的默認值

當函數的參數沒有傳遞值時會使用默認值,在ES6中默認值的指定語法變得非常簡單.

//ES5
function add(x, y) {
    var x = x || 20;
    var y = y || 30;
    return x + y;
}

//ES6
function add(x = 20, y = 30) {
    return x + y;
}

4.展開運算符

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];

// 這樣，arr2 就變成了[1, 2, 3, 10, 20, 30];

在不知道Props有多少數據傳遞過來,用展開運算符即可解決該問題.

5.省略字面量

當屬性與值的變量同名時,值可以省略不寫.

// es6
const person = {
  name,
  age
}

// es5
var person = {
  name: name,
  age: age
};

目前已知的常用的幾項暫時總結到這裏,後續如有新的會持續更新過來.