ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年釋出的，所以又稱ECMAScript 2015。雖然目前並不是所有瀏覽器都能相容ES6全部特性，但越來越多的程式設計師在實際專案當中已經開始使用ES6了。所以就算我們現在不打算使用ES6，但是也該懂點ES6的語法了。

let和const

這兩個的用途與var類似，都是用來宣告變數的，但在實際運用中他倆都有各自的特殊用途。
注意:ES6裡let和const沒有變數的提升，一定要聲明後再使用，但程式碼編譯成ES5之後，變數提升依舊存在.
let
（1）在ES5只有全域性作用域和函式作用域，沒有塊級作用域，而let則實際上為JavaScript新增了塊級作用域。用它所宣告的變數，只在let命令所在的程式碼塊內有效。

let name = 'yuu'

while (true) {
    let name = 'xiao'
    console.log(name)  //xiao
    break
}

console.log(name)  //yuu

（2）另外一個var帶來的不合理場景就是用來計數的迴圈變數洩露為全域性變數，而使用let則不會出現這個問題。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

const
const也用來宣告變數，但是宣告的是常量。一旦宣告，常量的值就不能改變,當我們嘗試去改變用const宣告的常量時，瀏覽器就會報錯。
const有一個很好的應用場景，就是當我們引用第三方庫的時宣告的變數，用const來宣告可以避免未來不小心重新命名而導致出現bug.

const PI = Math.PI
PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

注意：當值為基礎資料型別時，那麼這裡的值，就是指值本身。 而當值對應的為引用資料型別時，那麼這裡的值，則表示指向該物件的引用。這裡需要注意，正因為該值為一個引用，只需要保證引用不變就可以，我們仍然可以改變該引用所指向的物件。

const obj = {
    a: 20,
    b: 30
}

obj.a = 30;
obj.c = 40;

console.log(obj); // Object {a: 30, b: 30,c:40}
 

這種情況下只要不是直接覆蓋obj的值，只改變屬性什麼的還是還可以

模版字串

模板字串是為了解決使用+號拼接字串的不便利而出現的。使用 反引號“(鍵盤上esc下面那個鍵) 將整個字串包裹起來，而在其中使用 ${} 來包裹一個變數或者一個表示式。

// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);

// es6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;

預設引數（Default Parameters）

以前我們通過下面方式來定義預設引數:

var link = function (height, color, url) {
    var height = height || 50;
    var color = color || 'red';
    var url = url || 'http://azat.co';
    ...
}

但是到引數值是0後，就有問題了，因為在JavaScript中，0表示fasle，它是預設被hard-coded的值，而不能變成引數本身的值。但在ES6，我們可以直接把預設值放在函式聲明裡:

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

多行字串（Multi-line Strings ）

ES6的多行字串是一個非常實用的功能。在ES5中，我們不得不使用以下方法來表示多行字串：

alert("你好，\n 我叫\n yuu");

然而在ES6中，僅僅用反引號就可以解決了：

alert(`你好
我叫
olive`);

解構(destructuring)賦值

陣列以序列號一一對應，這是一個有序的對應關係。
物件根據屬性名一一對應，這是一個無序的對應關係。
陣列的解構賦值

// es5
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a,b,c)  // 1,2,3

物件的解構賦值

const MYOBJ = {
    className: 'trigger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

// es5
var loading = MYOBJ.loading;
var clicked = MYOBJ.clicked;

// es6
const { loading, clicked } = MYOBJ;
console.log(loading);// false

// 還可以給一個預設值，當props物件中找不到loading時，loading就等於該預設值
const { loadings = false, clicked } = MYOBJ;
console.log(loadings);// false

展開運算子(spread operater)

在ES6中用…來表示展開運算子，它可以將陣列方法或者物件進行展開。
1.函式呼叫中使用展開運算子

//函式呼叫裡，將一個數組展開成多個引數，我們會用到apply：
function test(a, b, c) { }
var args = [0, 1, 2];
test.apply(null, args);

//ES6
function test(a,b,c) { }
var args = [0,1,2];
test(...args);

2.陣列字面量中使用展開運算子
有了ES6，我們可以直接加一個數組直接合併到另外一個數組當中.

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

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

展開運算子也可以用在push函式中，可以不用再用apply()函式來合併兩個陣列.

var arr1=['a','b','c'];
var arr2=['d','e'];
arr1.push(...arr2); //['a','b','c','d','e']

3.用於解構賦值

let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']

注意：解構賦值中展開運算子只能用在最後，否則會報錯
4.展開運算子可以將偽陣列變成真正的陣列

var list=document.querySelectorAll('div');
var arr=[..list];

Object.prototype.toString.apply(list) // "[object NodeList]"
　Object.prototype.toString.apply(arr) // "[object Array]"