es6的解構賦值、擴展運算符、rest參數使用

xuweijian 發布于2019-08-21 16:47 / 374人閱讀

摘要：模板字符串甚至還能嵌套解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。運算符使用場景應該稍少一些，主要是處理不定數量參數，可以避免對象的使用。

es6中較為常用的書寫風格

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

字符串模板 `abcdef${test}`

解構賦值 let [a, b, c] = [1, 2, 3]

擴展運算符 rest參數 ...

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

字符串模板

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

let url = location.protocol + "http://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數據的不同，來出發數據的重新加載，以達到動態綁定的目的。

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

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

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

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

字符串模板的 ${} 里面可以書寫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:ffffd=9,e:eee=9,f} = {a:1,b:2,c:3,d:4}
aaa // 1
b //2
c //3
ffffd //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 = /(Macs?OSs?Xs?)([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他有點相似：

剩余參數只包含那些沒有對應形參的實參，而 arguments 對象包含了傳給函數的所有實參。

arguments 對象不是一個真實的數組,而剩余參數是真實的 Array實例，也就是說你能夠在它上面直接使用所有的數組方法，比如 sort，map，forEach，pop。

arguments 對象對象還有一些附加的屬性 (比如callee屬性)。

還可以和結構賦值一起使用

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

擴展運算和rest參數注意

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

在等號賦值或for循環中，如果需要從數組或對象中取值，盡量使用解構。

在自己定義函數的時候，如果調用者傳來的是數組或對象，形參盡量使用解構方式，優先使用對象解構，其次是數組解構。代碼可讀性會很好。

在調用第三方函數的時候，如果該函數接受多個參數，并且你要傳入的實參為數組，則使用擴展運算符。可以避免使用下標形式傳入參數。也可以避免很多人習慣的使用apply方法傳入數組。

rest運算符使用場景應該稍少一些，主要是處理不定數量參數，可以避免arguments對象的使用。

云服務器 GPU云服務器解構賦值 es6字符串擴展 Rest參數賦值運算符重載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88731.html

ES6 ...操作符

摘要：在語法中，操作符有兩種意義剩余語法，參數和展開語法，展開數組對象，作為函數數組對象的擴展運算符。使用和參數進行操作其余參數傳給原始函數展開語法運算則可以看作是參數的逆運算。在ES6語法中，...操作符有兩種意義：rest(剩余語法，rest參數) 和 spread(展開語法，展開數組/對象)，作為函數、數組、對象的擴展運算符。從某種意義上說，剩余語法與展開語法是相反的：剩余語法將多...

MorePainMoreGain 2019-08-23 12:12 評論0 收藏0
ES6學習總結（1）

摘要：返回一個對象，遍歷對象自身和繼承的所有可枚舉屬性不含，與相同和在紅寶書中就已經提到過屬性，表示的是引用類型實例的一個內部指針，指向該實例的構造函數的原型對象。半個月前就決定要將ES6的學習總結一遍，結果拖延癥一犯，半個月就過去了，現在補起來，慚愧慚愧。阮一峰的《ES6標準入門》這本書有300頁左右，除了幾個新的API和js語法的擴展,真正有價值的內容并不多。所謂存在即合理，每部分的...

happyfish 2019-08-20 15:38 評論0 收藏0
ES6（上中）

摘要：正式因為它沒有，所以也就不能用作構造函數。函數的最后一步是調用函數，這就叫尾調用尾遞歸函數調用自身，稱為遞歸。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為的成員，然后返回該成員。這是ES6的入門篇教程的筆記，網址：鏈接描述，以下內容中粗體+斜體表示大標題，粗體是小標題，還有一些重點；斜體表示對于自身，還需要下功夫學習的內容。這里面有一些自己的見解，所...

winterdawn 2019-08-23 18:38 評論0 收藏0
《ES6標準入門》讀書筆記

摘要：標準入門讀書筆記和命令新增命令，用于聲明變量，是塊級作用域。用于頭部補全，用于尾部補全。函數調用的時候會在內存形成一個調用記錄，又稱為調用幀，保存調用位置和內部變量等信息。等到執行結束再返回給，的調用幀才消失。《ES6標準入門》讀書筆記 @(StuRep) showImg(https://segmentfault.com/img/remote/1460000006766369?w=3...

HollisChuang 2019-08-19 18:41 評論0 收藏0
ES6 知識整理一（es6快速入門）

摘要：函數調用會在內存形成一個調用記錄，又稱調用幀，保存調用位置和內部變量等信息。等到運行結束，將結果返回到，的調用幀才會消失。方法用于將一組值，轉換為數組。，和遍歷數組方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的方法類似。 ES6 簡介 ES6，全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標準，2015.06 發版。 let 和 const...

elva 2019-08-26 13:36 評論0 收藏0