本文適合JavaScript初學者閱讀

剩餘操作符

之前這篇文章JavaScript展開操作符(Spread operator)介紹講解過展開操作符。剩餘操作符和展開操作符的表示方式一樣，都是三個點 '…',但是他們的使用場景會不同。

剩餘引數

定義函式的時候，如果函式的引數以… 為字首，則改引數是剩餘引數（rest parameter）。剩餘引數表示引數個數不確定的引數列表。在函式被呼叫時,該形參會成為一個數組,陣列中的元素都是傳遞給該函式的多出來的實參的值。

獲取引數

剩餘操作符可以用來方便地獲取傳進來的引數。

function sum(a,b,...args){
 
  console.log(args.length); // 傳進來的引數的個數 3
  let s = a + b;
  if(args && args.length){
      args.forEach(i => {s += i});
  }  
 return s;
 
}
sum(1, 2, 3, 4, 5 ); // 傳進來的引數的個數 3

其中第一個形參a對應的是1,第二個形參b對應的2,…args表示的就是[3, 4, 5]。

和arguments的差別

上面剩餘引數args是一個數組，而函式的arguments是一個偽陣列。應此剩餘引數可以使用陣列的相關方法sort，map，forEach，pop，而arguments不能。

arguments想要變成陣列，可以通過Array.prototype.slice.call方法，使用剩餘操作符可以避免將arguments轉為陣列的麻煩。

// 下面的程式碼模擬了剩餘陣列
function sum(a,b,){
  var args = Array.prototype.slice.call(arguments, sum.length);  
  console.log(args.length); // 傳進來的引數的個數 3
  let s = a + b;
  args.forEach(i => {s += i});
 return s;
}
sum(1, 2, 3, 4, 5 );

而使用剩餘操作符，則不需要轉化，直接使用，更加方便。

剩餘操作符與解構賦值

我們知道，ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）。 比如如下程式碼：

let array = [1,2,3]
let [a,b,c] = array; // a 1, b 2, c 3

再比如如下程式碼：

let obj = {a:1,b:2,c:3}
let {a,b,c} = obj; // a 1, b 2, c 3

在解構賦值時，可以使用剩餘操作符。剩餘操作符所操作的變數會匹配在解構賦值中所有其他變數未匹配到的屬性。
比如如下程式碼，others會匹配到first和second對於屬性的餘下的屬性：

const { first, second, ...others } = {
  first: 1,
  second: 2,
  third: 3,
  fourth: 4,
  fifth: 5
}

first // 1
second // 2
others // { third: 3, fourth: 4, fifth: 5 }

物件中餘下的屬性值被打包起來構造一個新的物件賦值給了others。

陣列也可以通過剩餘操作符，把剩餘的元素打包成一個新的陣列賦值給剩餘屬性，程式碼如下：

let array = [1,2,3,4,5];
let [a,b,...c] = array;  // a 1,b 2, c [3,4,5]

剩餘操作符和展開操作符

某種程度上，可以任務剩餘操作符是展開操作符的相反操作。展開操作符會”展開“陣列程式設計多個元素，剩餘操作符會把多個元素壓縮成一個單一的元素。

歡迎關注公眾號“ITman彪叔”。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。熟悉Java、JavaScript。在計算機圖形學、WebGL、前端視覺化方面有深入研究。對程式設計師思維能力訓練和培訓、程式設計師職業規劃和程式設計師理財投資有濃厚興趣。

ITman彪叔公