前言

本文主要給大家介紹了關于es6中解構賦值、擴展運算符和rest參數使用的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

es6中較為常用的書寫風格

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

本文希望能夠學習其中的主要的用法，方便書寫和簡潔性。

字符串模板

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

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

現在書寫的時候不需要這么多的+加好來連接，可以使用字符串模板變成這個樣子

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

寫起來還是簡便不少，有一個簡單的猜想，這個字符串模板會不會具有react、vue那樣的效果，動態的綁定數據，也就是說字符串模板的內容會跟著模板中的變量變化而變化

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

所以上面說的假想不會發生，react、vue都是存在虛擬dom來diff數據的不同，來出發數據的重新加載，以達到動態綁定的目的。

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

1、在模板字符串中如果需要使用 ` 字符的話，需要使用反斜杠轉譯 /`;

2、字符串模板可以表示多行字符串，所有的空格和縮進都會被保留在輸出之中；

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

3、字符串模板的 ${} 里面可以書寫JavaScript的表達式，

四則運算

test:${1+1} //"test2"

函數

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

如果大括號中的值不是字符串，將按照一般的規則轉為字符串。比如，大括號中是一個對象，將默認調用對象的toString方法

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

如果模板字符串中的變量沒有聲明，將報錯。

模板字符串甚至還能嵌套

解構賦值

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