摘要：模板字符串甚至還能嵌套解構(gòu)賦值允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)。運(yùn)算符使用場景應(yīng)該稍少一些，主要是處理不定數(shù)量參數(shù)，可以避免對象的使用。

為了書寫的方便，es6中提出了很多比較友好的書寫方式，其中最為常見的屬于以下幾個(gè)：

字符串模板 `abcdef${test}`

解構(gòu)賦值 let [a, b, c] = [1, 2, 3]

擴(kuò)展運(yùn)算符 rest參數(shù) ...

本文希望能夠?qū)W習(xí)其中的主要的用法，方便書寫和簡潔性。

在以前的日子，我們經(jīng)常撿到各種類別的字符串拼接，無論是跳轉(zhuǎn)鏈接還是請求，很多時(shí)候見到這樣的代碼

let url = location.protocol + "http://baidu.com/query?q=" + word +
            "&qn=" + queryWord;

現(xiàn)在書寫的時(shí)候不需要這么多的+加好來連接，可以使用字符串模板變成這個(gè)樣子

let url = `${location.protocol}//baidu.com/query?q=${word}&qn=${queryWord}`;

寫起來還是簡便不少，有一個(gè)簡單的猜想，這個(gè)字符串模板會(huì)不會(huì)具有react、vue那樣的效果，動(dòng)態(tài)的綁定數(shù)據(jù)，也就是說字符串模板的內(nèi)容會(huì)跟著模板中的變量變化而變化

let m = "test";
let n = `m+:${m}`;
n  //"m+:test"
m //"test"
m += "noTest" //改變字符串模板中的 m 的值
m //"testnoTest"
n //"m+:test"  

所以上面說的假想不會(huì)發(fā)生，react、vue都是存在虛擬dom來diff數(shù)據(jù)的不同，來出發(fā)數(shù)據(jù)的重新加載，以達(dá)到動(dòng)態(tài)綁定的目的。

字符串模板的一些特性和注意

在模板字符串中如果需要使用 ` 字符的話，需要使用反斜杠轉(zhuǎn)譯 `;

字符串模板可以表示多行字符串，所有的空格和縮進(jìn)都會(huì)被保留在輸出之中；

let k = `one line
    two line
    3 line`;
k  //輸出如下
"one line
two line
3 line"

字符串模板的 ${} 里面可以書寫JavaScript的表達(dá)式，

四則運(yùn)算
test:${1+1} //"test2"

函數(shù)

  `TEST:${new Date()}` //"TEST:Wed Sep 27 2017 15:48:53 GMT+0800 (CST)"

如果大括號中的值不是字符串，將按照一般的規(guī)則轉(zhuǎn)為字符串。比如，大括號中是一個(gè)對象，將默認(rèn)調(diào)用對象的toString方法

var tt = {a:1,b:2};
`test:${tt}` //"test:[object Object]"
tt.toString()  //"[object Object]"

如果模板字符串中的變量沒有聲明，將報(bào)錯(cuò)。

模板字符串甚至還能嵌套

ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。解構(gòu)運(yùn)算可以算是一種很優(yōu)雅的書寫方式，只要賦值表達(dá)式=的兩邊的模式相同的時(shí)候，左邊的變量就會(huì)被賦予右邊數(shù)組或者對象對應(yīng)的值，直接看代碼：

// 完全匹配模式
let [g, h, l] = ["gg", "hh", "ll"];
g //"gg"
h //"hh"
l //"ll"

//部分匹配、設(shè)置初始值 【初始值需要對象或者數(shù)組的成員值嚴(yán)格等于undefined才會(huì)生效】
let [v, , x, z="zzz"] = ["vv", "bb", "xxxx"];
v //"vv"
x //"xxxx"
z // "zzz"

//對象解構(gòu) 【注意對象解構(gòu)時(shí)冒號 : 前面的是模式，用來和對象的鍵名匹配，不是變量】
let {a:aaa,b,c=9,d:ffffd=9,e:eee=9,f} = {a:1,b:2,c:3,d:4}
aaa // 1
b //2
c //3
ffffd //4
eee //9
f // undefined
//字面量的對象解構(gòu)需要加上括號
({a, b} = {a:1, b:2})
({a, b, ...rest} = {a:1, b:2, c:3, d:4});

除了數(shù)組、對象之外，其實(shí)字符串、數(shù)字、布爾值都可以解構(gòu)，不過并不是很實(shí)用，所以不過多的說明。
需要注意：解構(gòu)不成功的，數(shù)組可能是長度不夠完全匹配，對象可能是沒有匹配的鍵名，那么返回的值都是undefined，而且一旦左側(cè)匹配的格式出錯(cuò)和右側(cè)的數(shù)據(jù)類型不對應(yīng)的話（右側(cè)是數(shù)組或者對象之外的類型）還會(huì)報(bào)錯(cuò)

很多時(shí)候使用解構(gòu)會(huì)帶來很大的便利：

交換變量

let a =1, b=2;
[a, b] = [b, a];

獲取接口或者函數(shù)返回的數(shù)組或者對象的某些部分

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

let [a, , b] = f();

還可以配合正則表達(dá)式獲取不同的部分內(nèi)容

//就拿navigator.userAgent來說，想要獲取不同的內(nèi)容，類似如下：
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36"

let ua = /(Macs?OSs?Xs?)([d_]+).*Chrome/([d.]+)/.exec(navigator.userAgent);
/* ua = ["Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100",
        "Mac OS X ",
        "10_12_6",
        "61.0.3163.100"]

*/
let [ , ,macVersion, chromeVersion] = ua; //分別獲取mac的系統(tǒng)版本和chrome的版本

擴(kuò)展語法允許一個(gè)表達(dá)式在期望多個(gè)參數(shù)（用于函數(shù)調(diào)用）或多個(gè)元素（用于數(shù)組字面量）或多個(gè)變量（用于解構(gòu)賦值）的位置擴(kuò)展

字面量的擴(kuò)展，

//數(shù)組字面量擴(kuò)展
let test = [3,4,5],
    copyTest = [...test], // copyTest [3,4,5]
    extTest = [1,2,...test]; //extTest [1,2,3,4,5]
//對象字面量擴(kuò)展
let obj = {a: 1, b: 2},
    copyObj = {...obj}, //
    extObj = {...obj, c: 3};

函數(shù)調(diào)用 作為實(shí)參

function myFunction(x, y, z) {
    return x+y+z;
 }
var args = [0, 1, 2];
myFunction(...args); //3

替代apply方法的參數(shù)使用數(shù)組的形式

Array.prototype.push.apply(arr) //=>// Array.prototype.push(...arr)

合并數(shù)組、對象

let array1 = [1,2,3], array2 = [4,5,6],array3 = [...array1, ...array2];

剩余參數(shù)（rest parameter）語法允許我們將一個(gè)不定數(shù)量的參數(shù)表示為一個(gè)數(shù)組,

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}
 
alert(sortRestArgs(5,3,7,1)); // 彈出 1,3,5,7

聽起來感覺和arguments他有點(diǎn)相似：

剩余參數(shù)只包含那些沒有對應(yīng)形參的實(shí)參，而 arguments 對象包含了傳給函數(shù)的所有實(shí)參。

arguments 對象不是一個(gè)真實(shí)的數(shù)組,而剩余參數(shù)是真實(shí)的 Array實(shí)例，也就是說你能夠在它上面直接使用所有的數(shù)組方法，比如 sort，map，forEach，pop。

arguments 對象對象還有一些附加的屬性 (比如callee屬性)。

還可以和結(jié)構(gòu)賦值一起使用

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

對于三個(gè)點(diǎn)號...，三點(diǎn)放在形參或者等號左邊為rest運(yùn)算符; 放在實(shí)參或者等號右邊為spread運(yùn)算符，或者說，放在被賦值一方為rest運(yùn)算符，放在賦值一方為擴(kuò)展運(yùn)算符。
注意

在等號賦值或for循環(huán)中，如果需要從數(shù)組或?qū)ο笾腥≈担M量使用解構(gòu)。

在自己定義函數(shù)的時(shí)候，如果調(diào)用者傳來的是數(shù)組或?qū)ο?，形參盡量使用解構(gòu)方式，優(yōu)先使用對象解構(gòu)，其次是數(shù)組解構(gòu)。代碼可讀性會(huì)很好。

在調(diào)用第三方函數(shù)的時(shí)候，如果該函數(shù)接受多個(gè)參數(shù)，并且你要傳入的實(shí)參為數(shù)組，則使用擴(kuò)展運(yùn)算符。可以避免使用下標(biāo)形式傳入?yún)?shù)。也可以避免很多人習(xí)慣的使用apply方法傳入數(shù)組。

rest運(yùn)算符使用場景應(yīng)該稍少一些，主要是處理不定數(shù)量參數(shù)，可以避免arguments對象的使用。