摘要：對(duì)象的解構(gòu)賦值函數(shù)執(zhí)行后，返回的是一個(gè)對(duì)象。分別取出對(duì)象中屬性為和的值，根據(jù)解構(gòu)賦值的規(guī)則，在左側(cè)聲明變量，放在大括號(hào)中，變量名要和屬性名保持一致。箭頭函數(shù)在中，箭頭函數(shù)就是函數(shù)的一種簡(jiǎn)寫(xiě)形式允許使用箭頭定義函數(shù)。

原文博客地址，歡迎學(xué)習(xí)交流:點(diǎn)擊預(yù)覽

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

var聲明變量的問(wèn)題：

可以多次重復(fù)聲明同一個(gè)變量名，存在覆蓋的風(fēng)險(xiǎn)

在全局聲明的變量會(huì)掛在全局對(duì)象上

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

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

var存在很多問(wèn)題，let橫空出世。

let允許創(chuàng)建塊級(jí)作用域，let聲明的變量只在它所在的代碼塊內(nèi)有效

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

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

在if中使用：

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

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

在for中使用,i只能在循環(huán)體內(nèi)使用，循環(huán)體外會(huì)報(bào)錯(cuò)：

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

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

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

如果賦的值是引用類型，那么可以通過(guò)變量來(lái)修改引用類型的值：

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

總結(jié)let和const：

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

只在聲明所在的塊級(jí)作用域內(nèi)有效

不允許重復(fù)聲明

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

const 在聲明時(shí)必須被賦值值

ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。通過(guò)這種方式可以避免在對(duì)象賦值時(shí)產(chǎn)生中間變量。

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

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

test函數(shù)執(zhí)行后，返回的是一個(gè)數(shù)組。取數(shù)組前兩個(gè)值分別存在變量中，根據(jù)解構(gòu)賦值的規(guī)則，在左側(cè)聲明變量，放在中括號(hào)中，會(huì)把右邊數(shù)組中的值一一對(duì)應(yīng)賦值給左邊的變量。

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

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

test函數(shù)執(zhí)行后，返回的是一個(gè)對(duì)象。分別取出對(duì)象中屬性為a和b的值，根據(jù)解構(gòu)賦值的規(guī)則，在左側(cè)聲明變量，放在大括號(hào)中，變量名要和屬性名保持一致。

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

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

在形參中定義變量，得到實(shí)參對(duì)象指定的屬性。

可以給變量設(shè)置默認(rèn)值和另聲明一個(gè)變量

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

使用=給變量賦一個(gè)默認(rèn)值，如果右邊對(duì)象中沒(méi)有與之對(duì)應(yīng)的屬性，則按默認(rèn)值來(lái)。
使用:重新聲明一個(gè)變量，會(huì)把匹配到的a的值賦給新的變量otherVar，此時(shí)在外面使用時(shí)候，不能使用a。

也可以連著一起使用：

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

模板字符串（template string）是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)。
定義字符串

var str = `

    hello
`

在模板字符串中拼寫(xiě)HTML結(jié)構(gòu)，無(wú)需考慮回車(chē)換行。

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

var message = "hello";
var str = `

        ${message}
    
`

打印出：

"

    hello
"

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

var message = "hello";
var str = `

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

但不能在${}中寫(xiě)入if和for這樣的語(yǔ)句。

在ES6中，箭頭函數(shù)就是函數(shù)的一種簡(jiǎn)寫(xiě)形式,允許使用“箭頭”（=>）定義函數(shù)。

之前聲明函數(shù)：

function foo(){
    return 1;
}

改造為箭頭函數(shù):

let foo = () => 1;

上面使用“箭頭”（=>）定義的函數(shù)，左側(cè)的()包裹函數(shù)的形參，如果定義的函數(shù)沒(méi)有形參或者多個(gè)形參，一定要使用括號(hào)：

// 沒(méi)有參數(shù)，要使用()
let test = () => 1;

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

如果形參只有一個(gè)，可以省略括號(hào)：

let foo = a => a;

“箭頭”（=>）的右側(cè)是函數(shù)體代碼，會(huì)在函數(shù)執(zhí)行后作為函數(shù)的返回值，不需要顯示的使用return

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

以上的簡(jiǎn)寫(xiě)方式，使代碼變得非常簡(jiǎn)潔，忍不住再來(lái)個(gè)例子：

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

有多行代碼，可以寫(xiě)在一對(duì){}中，手動(dòng)調(diào)用return返回值：

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

當(dāng)要返回的是對(duì)象時(shí)，又不想手動(dòng)調(diào)用return，記得加上()保證是一個(gè)對(duì)象整體，而不被誤以為是函數(shù)體：

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

箭頭函數(shù)內(nèi)的this，綁定定義時(shí)所在的作用域的this，并不是在調(diào)用時(shí)候決定this的指向。

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

如果要在setTimeout中使用點(diǎn)擊時(shí)的元素，通常需要存一個(gè)變量。

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

如果使用箭頭函數(shù)，一切講變得非常簡(jiǎn)單：

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

箭頭函數(shù)是在事件處理函數(shù)中定義，事件處理函數(shù)this指向的是觸發(fā)事件的元素，所以這個(gè)this，也就是觸發(fā)事件的元素。

使用箭頭函數(shù)的特性：

函數(shù)體內(nèi)的this值，綁定定義時(shí)所在的作用域的this

不可以當(dāng)作構(gòu)造函數(shù)

不可以使用arguments對(duì)象

允許在形參聲明時(shí)，寫(xiě)入默認(rèn)值，說(shuō)明這個(gè)值是可選的。

傳統(tǒng)做法：

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

以上的方式是參數(shù)b如果沒(méi)傳入的話，值就為10；
這樣寫(xiě)會(huì)有一個(gè)問(wèn)題,假如傳到函數(shù)的參數(shù)為0，則b的值依然為10，正確的應(yīng)該是0才對(duì)，因?yàn)?strong>||運(yùn)算符左邊不成立，就返回右邊的值，左邊為0則不成立，就返回10了。

ES6中，允許給函數(shù)參數(shù)默認(rèn)值：

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

在形參中直接寫(xiě)上b=10即可。

擴(kuò)展運(yùn)算符和Rest操作符都指的是...,根據(jù)上下文的語(yǔ)境不同，解析方式也不同。

將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。

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

把數(shù)組的每一項(xiàng)擴(kuò)展到另一個(gè)數(shù)組中。

也可以從數(shù)組中找到最大值：

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

擴(kuò)展運(yùn)算符（...）用于取出參數(shù)對(duì)象的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象中，相當(dāng)于淺復(fù)制。

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

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

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

在使用解構(gòu)賦值時(shí)，會(huì)把剩余的值，放在一個(gè)數(shù)組中：

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

如果是對(duì)象，會(huì)把剩余的屬性放在新對(duì)象中：

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

在函數(shù)的形參中使用，會(huì)把剩余的形參都放在數(shù)組中：

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

fn(1,2,3,4)

Rest操作符可取到arguments,把實(shí)參傳入到一個(gè)數(shù)組中，而不是arguments類數(shù)組中：

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

fn(1,2,3,4)

注意，Rest操作符只能寫(xiě)在參數(shù)的最后，不能寫(xiě)在開(kāi)頭或中間，否則會(huì)報(bào)語(yǔ)法錯(cuò)誤：

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

變量名和屬性名相同，可直接寫(xiě)入變量名：

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

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

定義函數(shù)可省略function關(guān)鍵字

var o = {
    fn(){}
}

相當(dāng)于：

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

以上屬于個(gè)人理解，如有偏差歡迎指正學(xué)習(xí)，謝謝。