溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文主要給大家介紹了關于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 line two line 3 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"
//部分匹配、設置初始值 【初始值需要對象或者數組的成員值嚴格等于undefined才會生效】
let [v, , x, z='zzz'] = ['vv', 'bb', 'xxxx'];
v //"vv"
x //"xxxx"
z // "zzz"
//對象解構 【注意對象解構時冒號 : 前面的是模式，用來和對象的鍵名匹配，不是變量】
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
//字面量的對象解構需要加上括號
({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);//1 console.log(rest);//[2, 3, 4]
擴展運算和rest參數注意
對于三個點號...，三點放在形參或者等號左邊為rest運算符; 放在實參或者等號右邊為spread運算符，或者說，放在被賦值一方為rest運算符，放在賦值一方為擴展運算符。
注意
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
