JavaScript剩余操作符Rest Operator

jone5679 發布于2019-08-26 10:13 / 385人閱讀

摘要：剩余操作符和展開操作符的表示方式一樣，都是三個點但是他們的使用場景會不同。獲取參數剩余操作符可以用來方便地獲取傳進來的參數。想要變成數組，可以通過方法，使用剩余操作符可以避免將轉為數組的麻煩。

本文適合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、前端可視化方面有深入研究。對程序員思維能力訓練和培訓、程序員職業規劃和程序員理財投資有濃厚興趣。

云服務器 GPU云服務器 Operator operator_new javascript操作css javascript操作系統

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

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

JavaScript 編程精解中文第三版十二、項目：編程語言

摘要：來源編程精解中文第三版翻譯項目原文譯者飛龍協議自豪地采用谷歌翻譯部分參考了編程精解第版確定編程語言中的表達式含義的求值器只是另一個程序。若文本不是一個合法程序，解析器應該指出錯誤。來源：ApacheCN『JavaScript 編程精解中文第三版』翻譯項目原文：Project: A Programming Language 譯者：飛龍協議：CC BY-NC-SA 4.0 自豪地采用...

Near_Li 2019-08-23 18:20 評論0 收藏0
深入理解 ES6 的解構賦值

摘要：在可遍歷的量中使用數組模型數組解構使用一個迭代器來獲取數據源中的元素。所以，數組解構能夠在上工作的迭代器總是按照元素插入的順序將元素返回，所以上述的解構返回的結果總是相同的。解構賦值（destructuring assignment）語法是一個Javascript表達式，這種語法能夠更方便的提取出 Object 或者 Array 中的數據。這種語法可以在接受提取的數據的地方使用，比如...

only_do 2019-08-21 15:03 評論0 收藏0
ES6—擴展運算符和rest運算符（6）

摘要：擴展運算符簡介擴展運算符是三個點，可以將一個數組轉為用逗號分隔的參數序列。在實際項目中靈活應用擴展運算符運算符，能寫出更精簡易讀性高的代碼。 1、擴展運算符簡介擴展運算符（ spread ）是三個點（...），可以將一個數組轉為用逗號分隔的參數序列。說的通俗易懂點，有點像化骨綿掌，把一個大元素給打散成一個個單獨的小元素。 showImg(https://segmentfault.c...

Amio 2019-08-23 17:21 評論0 收藏0
ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解

摘要：變量聲明與賦值值傳遞淺拷貝與深拷貝詳解歸納于筆者的現代開發語法基礎與實踐技巧系列文章。變量聲明在中，基本的變量聲明可以用方式允許省略，直接對未聲明的變量賦值。按值傳遞中函數的形參是被調用時所傳實參的副本。 ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解歸納于筆者的現代 JavaScript 開發：語法基礎與實踐技巧系列文章。本文首先介紹 ES6 中常用的三種變量聲明方式，然后討論了...

snowLu 2019-08-21 11:55 評論0 收藏0
ES6的常用語法

摘要：和命令和類似于中的的使用都是用來聲明變量的，只是都存在各自的特殊用法。解構數組和對象是中最常用也是最重要表示形式。實例生成以后，可以用方法分別指定狀態和狀態的回調函數。這個迭代器對象擁有一個叫做的方法來幫助你重啟函數并得到下一個值。 let和const命令 let和const類似于javascript中的var的使用,都是用來聲明變量的，只是都存在各自的特殊用法。在javascrip...

gougoujiang 2019-08-22 17:09 評論0 收藏0