es6中的解構(gòu)賦值、擴展運算符和rest參數(shù)使用詳解

前言

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

es6中較為常用的書寫風格

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

• 字符串模板 `abcdef${test}`
• 解構(gòu)賦值 let [a, b, c] = [1, 2, 3]
• 擴展運算符 rest參數(shù) ...

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

字符串模板

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

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

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

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

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

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

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

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

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

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

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

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

四則運算

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

函數(shù)

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

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

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

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

模板字符串甚至還能嵌套

解構(gòu)賦值

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

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

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

//對象解構(gòu) 【注意對象解構(gòu)時冒號 : 前面的是模式，用來和對象的鍵名匹配，不是變量】
let {a:aaa,b,c=9,d:ddd=9,e:eee=9,f} = {a:1,b:2,c:3,d:4}
aaa // 1
b //2
c //3
ddd //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ù)字、布爾值都可以解構(gòu)，不過并不是很實用，所以不過多的說明。

需要注意：解構(gòu)不成功的，數(shù)組可能是長度不夠完全匹配，對象可能是沒有匹配的鍵名，那么返回的值都是undefined，而且一旦左側(cè)匹配的格式出錯和右側(cè)的數(shù)據(jù)類型不對應的話（右側(cè)是數(shù)組或者對象之外的類型）還會報錯

使用場景

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

交換變量

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

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

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

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

還可以配合正則表達式獲取不同的部分內(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 = /(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的系統(tǒng)版本和chrome的版本

擴展運算符 ...

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

字面量的擴展，

//數(shù)組字面量擴展
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};

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

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];

rest剩余參數(shù)（rest parameter）

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

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

聽起來感覺和arguments他有點相似：

• 剩余參數(shù)只包含那些沒有對應形參的實參，而 arguments 對象包含了傳給函數(shù)的所有實參。
• arguments 對象不是一個真實的數(shù)組,而剩余參數(shù)是真實的 Array實例，也就是說你能夠在它上面直接使用所有的數(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]

擴展運算和rest參數(shù)注意

對于三個點號...，三點放在形參或者等號左邊為rest運算符; 放在實參或者等號右邊為spread運算符，或者說，放在被賦值一方為rest運算符，放在賦值一方為擴展運算符。

注意

• 在等號賦值或for循環(huán)中，如果需要從數(shù)組或?qū)ο笾腥≈?，盡量使用解構(gòu)。
• 在自己定義函數(shù)的時候，如果調(diào)用者傳來的是數(shù)組或?qū)ο?，形參盡量使用解構(gòu)方式，優(yōu)先使用對象解構(gòu)，其次是數(shù)組解構(gòu)。代碼可讀性會很好。
• 在調(diào)用第三方函數(shù)的時候，如果該函數(shù)接受多個參數(shù)，并且你要傳入的實參為數(shù)組，則使用擴展運算符?？梢员苊馐褂孟聵诵问絺魅?yún)?shù)。也可以避免很多人習慣的使用apply方法傳入數(shù)組。
• rest運算符使用場景應該稍少一些，主要是處理不定數(shù)量參數(shù)，可以避免arguments對象的使用。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。