ES6特性總結（1）——語法一

前言

ES6(也就是ES2015)是目前javascript語言採用的最新標準，於2015年6月發佈。ES6相比於以前的標準，加入了一系列的新語法和新特性，javascript也所以變得更加豐富和全面，尤爲是「類」的引入，讓更多習慣了面向對象開發的開發者能夠更好地上手javascript開發。咱們將從ES6的一些基本的語法新特性入手，看看咱們在新的標準下，能夠去進行哪些新的嘗試！

1. let與const關鍵字

在之前的javascript中，咱們只採用var關鍵字來聲明變量。咱們能夠看一下下面這段代碼：

function havingFood() {
    if (isHungry) {
        var food = 'A pancake';
    } else {
        var drink = 'sprite';
        console.log(food);// undefined
    }
}

事實上，之因此這裏會輸出undefined而不是error: food is not defined，是由於經過var聲明的變量，尤爲是在函數中，都會在函數運行前被「提高」，也就是在函數的最開始階段被聲明，以後再被賦具體的值。也就是說上述代碼實際上至關於：

function havingFood() {
    var food,drink;
    if (isHungry) {
        food = 'A pancake';
    } else {
        drink = 'sprite';
        console.log(food);
    }
}

也就是說，在ES6以前，**變量的做用域要麼是全局，要麼是整個函數域。**而在ES6中，因爲新的關鍵字let和const的出現，很好地突破了這個限制，這是由於他們的做用域是塊，而不是整個函數域。 一樣的代碼，咱們先試試用let或const進行聲明的變量：

function havingFood() {
    if (isHungry) {
       const food = 'A pancake';
    } else {
       const drink = 'sprite';
        console.log(food); // ReferenceError: food is not defined
    }
}

這就是區別！const和let的做用域必定是聲明所在的塊，而非「提高」到整個函數域的頭部。 至於const和let的使用規則，就很是簡單了，能夠歸納爲：**let能夠從新賦值，const不能從新賦值且必須有初值。**根據實際狀況的需求，選擇const或let進行變量聲明就OK了！

2.模板字面量

這聽上去真的是個很怪異的名字，你可能會覺得我筆誤。不過說真的它叫什麼並不重要，你只須要知道你有了一個更加方便地表示大段字符串內容的方式。 以往咱們須要將變量和字符串內容進行拼接，須要進行這樣的操做：

const Hero1 = {
    name: 'Iron Man',
    power: 'fly'
};
const Hero2 = {
    name: 'Captain American',
    power: 'shield'
};
const sentence = Hero1.name + 'is able to '
    + Hero1.power + ', but ' + Hero2.name + 'is able to use his ' + Hero2.power;
console.log(sentence); // Iron Manis able to fly, but Captain Americanis able to use his shield

而模板字面量的使用方法，是在變量外加上{}後，再在前面加上$，例如${Hero.name}，並使用反引號 `` 將整段內容包在一塊兒。一樣的內容，使用模板字面量：

const Hero1 = {
    name: 'Iron Man',
    power: 'fly'
};
const Hero2 = {
    name: 'Captain American',
    power: 'shield'
};
const sentence =`${Hero1.name} is able to ${Hero1.power}, but ${Hero2.name} is able to use his ${Hero2.power}`;
console.log(sentence);

這樣咱們就不須要一系列的「+」來進行拼接了，最重要的是，在模板字面量裏，換行符和空格符也同樣起做用。

3.數組解構

是的你沒有看錯，在javascript裏同樣可使用解構了。當咱們須要從現有對象或數組中取值，賦值給新的變量時，採用解構能夠變得很是方便。

例如數組的解構：

const Hero = ['Iron Man', 'Captain American', 'Thor', 'Eagle'];
const [Avenger1, , , Avenger2] = Hero;
console.log(Avenger2); // Eagle

對象一樣可使用解構：

const Hero = {
    name: 'Thor',
    age: 'Unknown',
    power: 'hammer',
    haircolor: 'blond'
};
const {name, age} = Hero;
console.log(name, age); // Thor Unknown

看到區別了？數組解構須要經過位置索引，而對象解構須要對應的鍵！

4.字面量簡寫

在以往咱們聲明一個對象時，若是屬性值和以前聲明的任何一個變量相同，那也沒有什麼辦法，咱們必須手動給對象進行賦值：

const name = 'Thor';
const age = '35';

const Hero = {
    name: name,
    age: age,
    power: 'hammer',
    haircolor: 'blond'
};
console.log(Hero.name);  // Thor

可是，在ES6中，咱們能夠再也不須要這多餘的賦值操做，若是屬性名相同，能夠直接使用！

const name = 'Thor';
const age = '35';

const Hero = {
    name,
    age,
    power: 'hammer',
    haircolor: 'blond'
};
console.log(Hero.name); // Thor

同時，在對象中聲明方法時，也能夠省略掉匿名函數的function關鍵字了。方便了很多對吧？ 以上是這篇討論的一些ES6中的小語法點。固然，ES6的特性遠遠不止這些，咱們將在下一篇中討論它更多的特性！包括for of循環，rest參數，spread操做符！