Vue 2.0 入門系列（14）學習 Vue.js 須要掌握的 es6 (1)

針對以前學習 Vue 用到的 es6 特性，以及接下來進一步學習 Vue 要用到的 es6 特性，作下簡單總結。

var、let 與 const

var 與 let

es6 以前，JavaScript 並無塊級做用域，所謂的塊，就是大括號裏面的語句所組成的代碼塊，好比

function fire(bool) {
    if (bool) {
        var foo = "bar";
    }
    console.log(foo);
}

fire(true); //=> bar

雖然變量 foo 位於 if 語句的代碼塊中，可是 JavaScript 並無塊級做用域的概念，所以被添加到了當前的執行環境 - 即函數中，在函數內均可以訪問到。

另一個使人困惑的地方是變量提高：

function fire(bool) {
    if (bool) {
        var foo = "bar";
    } else {
        console.log(foo);
    }
}
fire(false); //=> undefined

咱們都知道，直接訪問一個未定義的變量，會報錯:

console.log(nope); //=> Uncaught ReferenceError: nope is not defined

可是在上述的例子中，會返回 undefined。也就是說，變量的定義被提高到了做用域的頂部，等價於：

function fire(bool) {
    var foo;
    if (bool) {
           foo = "bar";
    } else {
        console.log(foo);
    }
}
fire(false);

而在 JavaScript 中，聲明可是未賦值的變量會被賦值爲 undefined，所以，結果輸出 undefined。

爲了解決上述問題，引入了 let 關鍵字，let 定義的變量。

首先，let 定義的變量只在代碼塊內有效：

function fire(bool) {
    if (bool) {
        let foo = "bar";
    }
    console.log(foo);
}

fire(true); //=> Uncaught ReferenceError: foo is not defined

其次, let 定義的變量不存在變量提高：

function fire(bool) {
    if (bool) {
        let foo = "bar";
    } else {
        console.log(foo);
    }
}
fire(false); //=> Uncaught ReferenceError: foo is not defined

所以，使用 let，上述問題徹底解決，這也告訴了咱們，應當儘量的避免用 var，用 let 來代替，除非你須要用到變量提高。

const

const 與 let 的基本用法相同，定義的變量都具備塊級做用域，也不會發生變量提高。不一樣的地方在於，const 定義的變量，只能賦值一次。

對於基本類型來講，須要經過賦值來改變其值，所以 const 定義以後就至關於沒法改變:

const a = 1;
a = 2;  // Uncaught TypeError: Assignment to constant variable.
++a;  // Uncaught TypeError: Assignment to constant variable.

對於數組和對象來講，值是能夠改變的:

const arr  = ["a","b","c"];
arr.push("d");
arr.pop();

那麼何時使用 const 呢? 在一些不須要重複賦值的場合能夠用:

const provinces = [];
const months = [];

總而言之，多用 let 和 const，少用 var 。

箭頭函數

在 Vue 中，使用箭頭函數的最大好處就是可讓 this 指向 Vue 實例：

var vm = new Vue({
    el:'#root',
    data:{
        tasks:[]
    },
    mounted(){
        axios.get('/tasks')
        .then(function (response) {
            vm.tasks = response.data;
        })
    }
});

因爲回調函數的 this 指向全局對象 window，所以，咱們須要經過 vm 來訪問實例的方法，若是使用箭頭函數，則能夠寫成:

new Vue({
    el:'#root',
    data:{
        tasks:[]
    },
    mounted(){
           axios.get('/tasks')
            .then(response => this.tasks = response.data);
    }
});

箭頭函數的 this 對象始終指向定義函數時所在的對象，至關於:

var vm = new Vue({
    el:'#root',
    data:{
        tasks:[]
    },
    mounted(){
        var that = this;
        axios.get('/tasks')
        .then(function (response) {
            that.tasks = response.data;
        })
    }
});

模板字符串

模板字符串爲 Vue 的組件模板定義帶來了巨大的便利，在此以前，須要這樣定義一個模板：

let template = '<div class="container"><p>Foo</p></div>';

若是要寫成多行，能夠用反斜槓：

let template = '<div class="container">\
                    <p>Foo</p>\
                </div>';

或者使用數組形式:

let template = [
    '<div class="container">',
    '<p>Foo</p>',
    '</div>'
].join('');

若是要嵌入變量，能夠寫成：

let name = "jack";
let template = `<div class="container"><p>` + name + '</p></div>';

而使用模板字符串，則能夠方便的在多行裏面編寫模板:

let template = `
    <div class="container">
        <p>Foo</p>
    </div>
`

因爲模板字符串的空格和換行會被保留，爲了避免讓首行多出換行符，能夠寫成：

let template = `<div class="container">
                            <p>Foo</p>
                        </div>
                    `

或者使用 trim() 方法從字符串中移除 前導 空格、尾隨空格和行終止符。

let template = `
    <div class="container">
        <p>Foo</p>
    </div>
`.trim();

模板字符串嵌入變量或者表達式的方式也很簡單:

let name = "jack";
let template = `
    <div class="container">
        <p>${name} is {100 + 100}</p>
    </div>
`.trim();

默認參數

在 es6 以前，JavaScript 不能像 PHP 那樣支持默認參數，所以須要本身手動定義:

function  takeDiscount(price, discount){
    discount  = discount || 0.9;
    return price * discount;
}
takeDiscount(100);

es6 則容許定義默認參數

function takeDiscount(price, discount = 0.9){
    return price * discount;
}
takeDiscount(100);

甚至能夠以函數形式傳遞參數:

function getDiscount(){
    return 0.9;
}

function takeDiscount(price, discount = getDiscount()){
    return price * discount;
}
takeDiscount(100);

rest 參數

先從函數的參數傳遞提及：

function sum(a,b,c){
    let total = a + b + c;
    return total;
}
sum(1, 2, 3);

在 JavaScript 中，函數參數實際上以數組的方式進行傳遞，參數會被保存在 arguments 數組中，所以上例等價於：

function sum(){
    let total = arguments[0] + arguments[1] + arguments[2];
    return total;
}
sum(1, 2, 3);

不過 arguments 不僅僅包括參數，也包括了其餘東西，所以無法直接用數組函數來操做 arguments。若是要擴展成任意多個數值相加，可使用循環:

function sum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total = total + arguments[i];
    }
    return total;
}
sum(1, 2, 3, 4, 6);

es6 則提供了 rest 參數來訪問多餘變量，上例等價於:

function sum(...num) {
    let total = 0;
    for (let i = 0; i < num.length; i++) {
        total = total + num[i];
    }
    return total;
}
sum(1, 2, 3, 4, 6);

能夠以變量形式進行傳遞:

function sum(...num) {
    let total = 0;
    for (let i = 0; i < num.length; i++) {
        total = total + num[i];
    }
    return total;
}
let nums = [1, 2, 3, 4, 6];
sum(...nums);

在函數中體內，num 就是單純由參數構成的數組，所以能夠用數組函數 reduce 來實現一樣的功能：

function sum(...num) {
    return num.reduce( (preval, curval) => {
        return preval + curval;
    })
}
sum(1, 2, 3, 4, 6);

... 還能夠與其餘參數結合使用，只須要將其餘參數放在前面便可:

function sum(total = 0, ...num) {
    return total + num.reduce( (preval, curval) => {
        return preval + curval;
    });
}

let nums = [1,2,3,4];
sum(100, ...nums);

對象的簡寫

函數的簡寫

函數的簡寫，以前在 Vue 中已經用到過:

Vue({
   el: '#root',
   data:data,
   methods: {
       addName: function() {
           vm.names.push(vm.newName);
           vm.newName = "";
       }
   }
});

能夠簡寫爲：

new Vue({
   el: '#root',
   data:data,
   methods: {
       addName() {
           vm.names.push(vm.newName);
           vm.newName = "";
       }
   }
});

在組件中頻繁用到:

Vue.component('example',{
    data(){
        return {

        };
    }
});

屬性的簡寫

let data = {
        message: "你好，Vue"
    };

var vm = new Vue({
    el: '#root',
    data:data
})

能夠簡寫成:

let data = {
        message: "你好，Vue"
    };

var vm = new Vue({
    el: '#root',
    data
})

也就是說，能夠直接在對象中直接寫入變量，當函數的返回值爲對象時候，使用簡寫方式更加簡潔直觀：

function getPerson(){
    let name = 'Jack';
    let age = 10;

    return {name, age};
    // 等價於
    // return {
    //     name : name,
    //     age : age
    // }

}
getPerson();

解構賦值

解構賦值能夠方便的取到對象的可遍歷屬性：

let person = {
    firstname : "steve",
    lastname : "curry",
    age : 29,
    sex : "man"
};

let {firstname, lastname} = person;
console.log(firstname, lastname);

// 等價於
// let firstname = person.firstname;
// let lastname = person.lastname;

能夠將其用於函數傳參中：

function greet({firstname, lastname}) {
    console.log(`hello,${firstname}.${lastname}!`);
};
greet({
    firstname: 'steve',
    lastname: 'curry'
});