成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript剩余操作符Rest Operator

jone5679 / 449人閱讀

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

本文適合JavaScript初學(xué)者閱讀
剩余操作符

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

剩余參數(shù)

定義函數(shù)的時候，如果函數(shù)的參數(shù)以… 為前綴，則改參數(shù)是剩余參數(shù)（rest parameter）。剩余參數(shù)表示參數(shù)個數(shù)不確定的參數(shù)列表。在函數(shù)被調(diào)用時,該形參會成為一個數(shù)組,數(shù)組中的元素都是傳遞給該函數(shù)的多出來的實參的值。

獲取參數(shù)

剩余操作符可以用來方便地獲取傳進(jìn)來的參數(shù)。

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

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

和arguments的差別

上面剩余參數(shù)args是一個數(shù)組，而函數(shù)的arguments是一個偽數(shù)組。應(yīng)此剩余參數(shù)可以使用數(shù)組的相關(guān)方法sort，map，forEach，pop，而arguments不能。

arguments想要變成數(shù)組，可以通過Array.prototype.slice.call方法，使用剩余操作符可以避免將arguments轉(zhuǎn)為數(shù)組的麻煩。

// 下面的代碼模擬了剩余數(shù)組
function sum(a,b,){
  var args = Array.prototype.slice.call(arguments, sum.length);  
  console.log(args.length); // 傳進(jìn)來的參數(shù)的個數(shù) 3
  let s = a + b;
  args.forEach(i => {s += i});
 return s;
}
sum(1, 2, 3, 4, 5 );

而使用剩余操作符，則不需要轉(zhuǎn)化，直接使用，更加方便。

剩余操作符與解構(gòu)賦值

我們知道，ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)（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

在解構(gòu)賦值時，可以使用剩余操作符。剩余操作符所操作的變量會匹配在解構(gòu)賦值中所有其他變量未匹配到的屬性。
比如如下代碼，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 }

對象中余下的屬性值被打包起來構(gòu)造一個新的對象賦值給了others。

數(shù)組也可以通過剩余操作符，把剩余的元素打包成一個新的數(shù)組賦值給剩余屬性，代碼如下：

let array = [1,2,3,4,5];
let [a,b,...c] = array;  // a 1,b 2, c [3,4,5]
剩余操作符和展開操作符

某種程度上，可以任務(wù)剩余操作符是展開操作符的相反操作。展開操作符會”展開“數(shù)組編程多個元素，剩余操作符會把多個元素壓縮成一個單一的元素。

歡迎關(guān)注公眾號“ITman彪叔”。彪叔，擁有10多年開發(fā)經(jīng)驗，現(xiàn)任公司系統(tǒng)架構(gòu)師、技術(shù)總監(jiān)、技術(shù)培訓(xùn)師、職業(yè)規(guī)劃師。熟悉Java、JavaScript。在計算機(jī)圖形學(xué)、WebGL、前端可視化方面有深入研究。對程序員思維能力訓(xùn)練和培訓(xùn)、程序員職業(yè)規(guī)劃和程序員理財投資有濃厚興趣。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105808.html

相關(guān)文章

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

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

    Near_Li 評論0 收藏0

  • 深入理解 ES6 的解構(gòu)賦值

    摘要：在可遍歷的量中使用數(shù)組模型數(shù)組解構(gòu)使用一個迭代器來獲取數(shù)據(jù)源中的元素。所以，數(shù)組解構(gòu)能夠在上工作的迭代器總是按照元素插入的順序?qū)⒃胤祷兀陨鲜龅慕鈽?gòu)返回的結(jié)果總是相同的。 解構(gòu)賦值（destructuring assignment）語法是一個Javascript表達(dá)式，這種語法能夠更方便的提取出 Object 或者 Array 中的數(shù)據(jù)。這種語法可以在接受提取的數(shù)據(jù)的地方使用，比如...

    only_do 評論0 收藏0

  • ES6—擴(kuò)展運算符和rest運算符（6）

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

    Amio 評論0 收藏0

  • ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解

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

    snowLu 評論0 收藏0

  • ES6的常用語法

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

    gougoujiang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<