前言
本文主要給大家介紹了關于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）。解構運算可以算是一種很優雅的書寫方式，只要賦值表達式=的兩邊的模式相同的時候，左邊的變量就會被賦予右邊數組或者對象對應的值，直接看代碼：
// 完全匹配模式let [g, h, l] = ['gg', 'hh', 'll'];g //"gg"h //"hh"l //"ll"http://部分匹配、設置初始值 【初始值需要對象或者數組的成員值嚴格等于undefined才會生效】let [v, , x, z='zzz'] = ['vv', 'bb', 'xxxx'];v //"vv"x //"xxxx"z // "zzz"http://對象解構 【注意對象解構時冒號 : 前面的是模式，用來和對象的鍵名匹配，不是變量】let {a:aaa,b,c=9,d:ddd=9,e:eee=9,f} = {a:1,b:2,c:3,d:4}aaa // 1b //2c //3ddd //4eee //9f // undefined//字面量的對象解構需要加上括號({a, b} = {a:1, b:2})({a, b, ...rest} = {a:1, b:2, c:3, d:4});除了數組、對象之外，其實字符串、數字、布爾值都可以解構，不過并不是很實用，所以不過多的說明。
需要注意：解構不成功的，數組可能是長度不夠完全匹配，對象可能是沒有匹配的鍵名，那么返回的值都是undefined，而且一旦左側匹配的格式出錯和右側的數據類型不對應的話（右側是數組或者對象之外的類型）還會報錯
使用場景
很多時候使用解構會帶來很大的便利：
交換變量
let a =1, b=2;[a, b] = [b, a];
獲取接口或者函數返回的數組或者對象的某些部分
function f() { return [1, 2, 3];}let [a, , b] = f();還可以配合正則表達式獲取不同的部分內容
//就拿navigator.userAgent來說，想要獲取不同的內容，類似如下："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 = /(Mac/s?OS/s?X/s?)([/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的系統版本和chrome的版本
擴展運算符 ...
擴展語法允許一個表達式在期望多個參數（用于函數調用）或多個元素（用于數組字面量）或多個變量（用于解構賦值）的位置擴展
字面量的擴展，
//數組字面量擴展let test = [3,4,5], copyTest = [...test], // copyTest [3,4,5] extTest = [1,2,...test]; //extTest [1,2,3,4,5]//對象字面量擴展let obj = {a: 1, b: 2}, copyObj = {...obj}, // extObj = {...obj, c: 3};函數調用 作為實參
function myFunction(x, y, z) { return x+y+z; }var args = [0, 1, 2];myFunction(...args); //3替代apply方法的參數使用數組的形式
Array.prototype.push.apply(arr) //=>// Array.prototype.push(...arr)
合并數組、對象
let array1 = [1,2,3], array2 = [4,5,6],array3 = [...array1, ...array2];
rest剩余參數（rest parameter）
剩余參數（rest parameter）語法允許我們將一個不定數量的參數表示為一個數組,
function sortRestArgs(...theArgs) { var sortedArgs = theArgs.sort(); return sortedArgs;} alert(sortRestArgs(5,3,7,1)); // 彈出 1,3,5,7聽起來感覺和arguments他有點相似：
還可以和結構賦值一起使用
var [a, ...rest] = [1, 2, 3, 4];console.log(a);//1console.log(rest);//[2, 3, 4]
擴展運算和rest參數注意
對于三個點號...，三點放在形參或者等號左邊為rest運算符; 放在實參或者等號右邊為spread運算符，或者說，放在被賦值一方為rest運算符，放在賦值一方為擴展運算符。
注意
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
