摘要：對象的解構賦值函數執行后，返回的是一個對象。分別取出對象中屬性為和的值，根據解構賦值的規則，在左側聲明變量，放在大括號中，變量名要和屬性名保持一致。箭頭函數在中，箭頭函數就是函數的一種簡寫形式允許使用箭頭定義函數。

原文博客地址，歡迎學習交流:點擊預覽

可以使用let、const關鍵字聲明變量，而不推薦使用var聲明變量

var聲明變量的問題：

可以多次重復聲明同一個變量名，存在覆蓋的風險

在全局聲明的變量會掛在全局對象上

var不能形成塊級作用域，例如：if、for范圍外依然可以使用var聲明的變量

var聲明的變量具備變量提升（hoisting）特性--- 允許使用在前，聲明在后

var存在很多問題，let橫空出世。

let允許創建塊級作用域，let聲明的變量只在它所在的代碼塊內有效

{
  let test = 10;
  var foo = 1;
}

console.log(test) // ReferenceError: miaov is not defined.
console.log(foo) // 1

在if中使用：

if(false){
  let test = 10;  // 只在這個代碼塊內有效，形成了塊級作用域
  var foo = 1;
}

console.log(test) // ReferenceError: miaov is not defined.
console.log(foo) // undefined

在for中使用,i只能在循環體內使用，循環體外會報錯：

for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i); // ReferenceError: i is not defined

const聲明變量同let聲明變量一樣，在塊級作用域有效。不同的是，const用來聲明常量，一旦聲明賦值后，變量不能被重新賦值：

const test = 123;
test = 10;
console.log(test);  // Uncaught TypeError: Assignment to constant variable.

如果賦的值是引用類型，那么可以通過變量來修改引用類型的值：

const test = {};
test.a = 1;
test.b = 2;
console.log(test);  // {a: 1, b: 2}

總結let和const：

聲明的變量不具備變量提升（hoisting）特性

只在聲明所在的塊級作用域內有效

不允許重復聲明

暫時性死區（TDZ）所聲明的變量綁定在定義的區域，使用let命令聲明變量之前，該變量都是不可用的

const 在聲明時必須被賦值值

ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。通過這種方式可以避免在對象賦值時產生中間變量。

function test(){
    return [1,2,3,4];
}

var [a,b] = test();
console.log(a,b); // 1,2

test函數執行后，返回的是一個數組。取數組前兩個值分別存在變量中，根據解構賦值的規則，在左側聲明變量，放在中括號中，會把右邊數組中的值一一對應賦值給左邊的變量。

function test(){
    return {a:1,b:2,c:3};
}

var {a,b} = test();
console.log(a,b); // 1,2

test函數執行后，返回的是一個對象。分別取出對象中屬性為a和b的值，根據解構賦值的規則，在左側聲明變量，放在大括號中，變量名要和屬性名保持一致。

function test({a,b}){
    console.log(a,b);
}

test({a:1,b:2,c:3})

在形參中定義變量，得到實參對象指定的屬性。

可以給變量設置默認值和另聲明一個變量

var {a:otherVar,b,d="默認值"} = {a:1,b:2,c:3};
console.log(d); // 默認值
console.log(otherVar); // 1
console.log(a); // Uncaught ReferenceError: a is not defined

使用=給變量賦一個默認值，如果右邊對象中沒有與之對應的屬性，則按默認值來。
使用:重新聲明一個變量，會把匹配到的a的值賦給新的變量otherVar，此時在外面使用時候，不能使用a。

也可以連著一起使用：

var {a,b,d:foo="默認值"} = {a:1,b:2,c:3};
console.log(foo); // "默認值"

模板字符串（template string）是增強版的字符串，用反引號（`）標識。
定義字符串

var str = `

    hello
`

在模板字符串中拼寫HTML結構，無需考慮回車換行。

在模板字符串中要渲染某個變量的值，可以寫在占位符${}中

var message = "hello";
var str = `

        ${message}
    
`

打印出：

"

    hello
"

${}中可以寫入任意的表達式（表達式是可以被求值的代碼），例如：

var message = "hello";
var str = `

        ${message}
        ${1+1}
        ${1 > 2 ? true : false}
        ${
            [1,2,3].map(function(item){
                return item*2
            })
        }
    
`

但不能在${}中寫入if和for這樣的語句。

在ES6中，箭頭函數就是函數的一種簡寫形式,允許使用“箭頭”（=>）定義函數。

之前聲明函數：

function foo(){
    return 1;
}

改造為箭頭函數:

let foo = () => 1;

上面使用“箭頭”（=>）定義的函數，左側的()包裹函數的形參，如果定義的函數沒有形參或者多個形參，一定要使用括號：

// 沒有參數，要使用()
let test = () => 1;

// 多個參數，要使用()
let foo = (a,b) => a + b;
let bar = (a,b,c) => a + b + c;

如果形參只有一個，可以省略括號：

let foo = a => a;

“箭頭”（=>）的右側是函數體代碼，會在函數執行后作為函數的返回值，不需要顯示的使用return

let foo = (a,b) => a + b;
console.log(foo(1,2)); // 3

以上的簡寫方式，使代碼變得非常簡潔，忍不住再來個例子：

let arr = [1,2,3];  
let newArr = arr.map(item => item * 2);
console.log(newArr); // [2,4,6]

有多行代碼，可以寫在一對{}中，手動調用return返回值：

let foo = (a,b) => {
    console.log(a)
    console.log(b)
    return a + b; 
}

當要返回的是對象時，又不想手動調用return，記得加上()保證是一個對象整體，而不被誤以為是函數體：

var obj = () => ({a:1,b:2})
console.log(obj());  // {a:1,b:2}

箭頭函數內的this，綁定定義時所在的作用域的this，并不是在調用時候決定this的指向。

document.onclick = function (){
    setTimeout(function (){
        console.log(this); // 定時器執行的函數，在非嚴格模式下this指向window    
    },1000)    
}

如果要在setTimeout中使用點擊時的元素，通常需要存一個變量。

document.onclick = function (){
    var that = this;
    setTimeout(function (){
        console.log(that); // that變量存的就是觸發事件的元素
    },1000)    
}

如果使用箭頭函數，一切講變得非常簡單：

document.onclick = function (){
    setTimeout( () => {
        console.log(this); 
    },1000)    
}    

箭頭函數是在事件處理函數中定義，事件處理函數this指向的是觸發事件的元素，所以這個this，也就是觸發事件的元素。

使用箭頭函數的特性：

函數體內的this值，綁定定義時所在的作用域的this

不可以當作構造函數

不可以使用arguments對象

允許在形參聲明時，寫入默認值，說明這個值是可選的。

傳統做法：

/*
    參數：
        a是必填項
        b可選的
*/
function fn(a,b){
    b = b || 10;
    return a + b;
}

以上的方式是參數b如果沒傳入的話，值就為10；
這樣寫會有一個問題,假如傳到函數的參數為0，則b的值依然為10，正確的應該是0才對，因為||運算符左邊不成立，就返回右邊的值，左邊為0則不成立，就返回10了。

ES6中，允許給函數參數默認值：

function fn(a,b=10){
    return a + b;
}

在形參中直接寫上b=10即可。

擴展運算符和Rest操作符都指的是...,根據上下文的語境不同，解析方式也不同。

將一個數組轉為用逗號分隔的參數序列。

var arr = [1,2,3,4];
console.log([...arr]);  // [1,2,3,4]

把數組的每一項擴展到另一個數組中。

也可以從數組中找到最大值：

var arr = [1,2,3,4];
console.log(Math.max(...arr)); // 會依次把數組的每一項傳入到函數中

擴展運算符（...）用于取出參數對象的所有可遍歷屬性，拷貝到當前對象中，相當于淺復制。

var arr = {a:1,b:2,c:3};
console.log({...arr});

利用對象的屬性是唯一的特性，后面定義的覆蓋前面的屬性，可以修改一個屬性的值：

var arr = {a:1,b:2,c:3};
console.log({...arr,a:"修改了"});

在使用解構賦值時，會把剩余的值，放在一個數組中：

var arr = [1,2,3,4];
var [a,...b] = arr;
console.log(a);  // 1 
console.log(b); // [2,3,4]

如果是對象，會把剩余的屬性放在新對象中：

var o = {a:1,b:2,c:3};
var {a,...d} = o;
console.log(a);  // 1
console.log(d); // {b:2,c:3}

在函數的形參中使用，會把剩余的形參都放在數組中：

function fn(a,...b){
    console.log(a);  // 1
    console.log(b); // [2,3,4]
}

fn(1,2,3,4)

Rest操作符可取到arguments,把實參傳入到一個數組中，而不是arguments類數組中：

function fn(...b){
    console.log(b); // [1,2,3,4]
}

fn(1,2,3,4)

注意，Rest操作符只能寫在參數的最后，不能寫在開頭或中間，否則會報語法錯誤：

function fn(a,...b,c){
    console.log(a); // 
    console.log(b);
    console.log(c)
}

fn(1,2,3,4); // Uncaught SyntaxError: Rest parameter must be last formal parameter

變量名和屬性名相同，可直接寫入變量名：

var a = 10;
var b = 20;
var o = {
    a,
    b
}

console.log(o); // {a:10,b:20}

定義函數可省略function關鍵字

var o = {
    fn(){}
}

相當于：

var o = {
    fn: function () {}
}

以上屬于個人理解，如有偏差歡迎指正學習，謝謝。