前言

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

es6中較為常用的書寫風(fēng)格

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

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

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

字符串模板

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

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

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

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

寫起來還是簡(jiǎn)便不少，有一個(gè)簡(jiǎn)單的猜想，這個(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)綁定的目的。

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

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

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

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

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

四則運(yùn)算

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

函數(shù)

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

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

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

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

模板字符串甚至還能嵌套

解構(gòu)賦值

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

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

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

//對(duì)象解構(gòu) 【注意對(duì)象解構(gòu)時(shí)冒號(hào) : 前面的是模式，用來和對(duì)象的鍵名匹配，不是變量】
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
//字面量的對(duì)象解構(gòu)需要加上括號(hào)
({a, b} = {a:1, b:2})
({a, b, ...rest} = {a:1, b:2, c:3, d:4});

除了數(shù)組、對(duì)象之外，其實(shí)字符串、數(shù)字、布爾值都可以解構(gòu)，不過并不是很實(shí)用，所以不過多的說明。

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

使用場(chǎng)景

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

交換變量

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

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

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 = /(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的版本

擴(kuò)展運(yùn)算符 ...

擴(kuò)展語(yǔ)法允許一個(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]
//對(duì)象字面量擴(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ù)組、對(duì)象

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

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

剩余參數(shù)（rest parameter）語(yǔ)法允許我們將一個(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ù)只包含那些沒有對(duì)應(yīng)形參的實(shí)參，而 arguments 對(duì)象包含了傳給函數(shù)的所有實(shí)參。
• arguments 對(duì)象不是一個(gè)真實(shí)的數(shù)組,而剩余參數(shù)是真實(shí)的 Array實(shí)例，也就是說你能夠在它上面直接使用所有的數(shù)組方法，比如 sort，map，forEach，pop。
• arguments 對(duì)象對(duì)象還有一些附加的屬性 (比如callee屬性)。

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

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

擴(kuò)展運(yùn)算和rest參數(shù)注意

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

注意

• 在等號(hào)賦值或for循環(huán)中，如果需要從數(shù)組或?qū)ο笾腥≈?，盡量使用解構(gòu)。
• 在自己定義函數(shù)的時(shí)候，如果調(diào)用者傳來的是數(shù)組或?qū)ο?，形參盡量使用解構(gòu)方式，優(yōu)先使用對(duì)象解構(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)算符使用場(chǎng)景應(yīng)該稍少一些，主要是處理不定數(shù)量參數(shù)，可以避免arguments對(duì)象的使用。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論