ES2015入門系列6-Rest和Spread

keelii 發布于2019-08-20 17:40 / 611人閱讀

摘要：就是的逆操作，看代碼計算一個數組大于三個元素中前三個元素的和以及所有元素的和。前三個值為總和為結果前三個值為總和為前三個值為總和為

ES2015為我們帶來了一個新的操作符: ...,

用于定義函數參數的地方，稱之為 Rest

用于調用函數的地方，稱之為 Spread

我們一個個來分析：

Rest

寫程序的時候或多或少都會有，傳入不定參數給一個函數的需求，如，給一個班級加入學生名單，可以一次給一個，也可以一次給多個，以前的做法，可能是傳入數組，或者定義2個方法，一個傳入單個學生，一個傳入學生數組，如：

class ClassRoom {

  constructor(name) {
     this.name = name;
     this.students = [];
  }

  addStudent(name) {
    this.students.push(name);
  }

  addStudents(names) {
    this.students = this.students.concat(names);
  }

  listStudents() {
     console.log(this.students);
  }

}

const classRoom = new ClassRoom("三年二班");
classRoom.addStudent("張三");
classRoom.addStudents(["李四", "王五"]);
classRoom.listStudents();

有了 Rest 我們的代碼就簡單了，

class ClassRoom {

  constructor(name) {
     this.name = name;
     this.students = [];
  }

  addStudents(...names) {
    this.students = this.students.concat(names);
  }

  listStudents() {
     console.log(this.students);
  }

}

const classRoom = new ClassRoom("三年二班");
classRoom.addStudents("張三");
classRoom.addStudents("李四", "王五");
classRoom.listStudents();

代碼中的...names, 意思就是： 從我開始不管后面有多少參數，請幫我把它們組成數組給我后面的參數。 如此一來，也可以這樣，

function callFriends(via, ...friends) {
  console.log("使用" + via + "通知: " + friends.join(",") + "等" + friends.length + "個好友");
}
callFriends("QQ", "張三");
callFriends("電話", "張三", "李四", "王五");

結果:

> 使用QQ通知: 張三等1個好友
> 使用電話通知: 張三,李四,王五等3個好友

應用剛才的解釋到這里，從...開始，不管后面有多少個朋友傳進來，請把他們組成數組放入friends參數給我。

Spread

Spread 就是 Rest 的逆操作，看代碼：

計算一個數組(大于三個元素)中前三個元素的和以及所有元素的和。

function sum(x, y, z, ...r) {
  let firstThree = x + y + z;
  let total = x + y + z + r.reduce((left, right) => left + right);
  console.log("前三個值為: " + firstThree);
  console.log("總和為: " + total);
}
sum(...[1, 2, 3, 4]);
sum(...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

結果:

> 前三個值為: 6
> 總和為: 10
> 前三個值為: 6
> 總和為: 55

GPU云服務器云服務器 es6-系列入門系列課程深度學習入門系列課程 spark入門實戰系列

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

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

ES6入門筆記（一）

摘要：用聲明的常量無法在后面的代碼中改值。表達式里還有一個很方便的就是表達式，舉個例子運行結果為后聲明的里以數組的形式存放了函數的剩余參數，是不是很方便。 ES6入門筆記（一）安裝babel 由于瀏覽器對ES6的支持還不是很好，編寫ES6代碼前我們要安裝一個babel工具將ES6代碼編譯成ES5代碼，用如下命令安裝babel： npm install -g babel-core ...

warkiz 2019-08-19 18:11 評論0 收藏0
「每日一瞥

摘要：目前前端主要有以下四種方法會觸發對應的回調方法方法客戶端回調客戶端回調參考地址每日一瞥是團隊內部日常業界動態提煉，發布時效可能略有延后。 showImg(https://segmentfault.com/img/remote/1460000017975436?w=1200&h=630); 「ES2015 - ES2018」Rest / Spread Properties 梳理 Thr...

xiangzhihong 2019-08-23 14:54 評論0 收藏0
ES2015入門系列1-初識ES2015

EcmaScript 其實是一種語言規范，常見的 JavaScript, ActionScript 等都是其具體實現，平時使用中一般可以將其和Javascript對等稱呼，本系列教程主要講述 EcmaScript2015(ES6) 為JavaScript帶來的新的特性，并初步掌握如何利用其進行開發。本系列面向有一定基礎知識的ES5使用者，不適合初學者。先來看兩段代碼： Human.js exp...

hellowoody 2019-08-20 17:37 評論0 收藏0
ES2015入門系列9-Babel和Rollup

摘要：雖然夠好用，奈何沒有瀏覽器對其可以完全支持，本文書寫時間，開發版號稱已經支持的特性。開始安裝本系列假定讀者都有使用經驗，如果還沒有，趕緊去這里了解并安裝吧。到此，我們的已經準備就緒。通過前面章節的講解，大家對ES2015的一些新語法有了初步的理解，之前我們的測試代碼都可以直接放入 Chrome Console 中直接運行，為了更好的學習后面的面向對象和模塊開發，我先用一章介紹一下 B...

eccozhou 2019-08-20 17:40 評論0 收藏0
每個JavaScript開發人員都應該知道的新ES2018功能（譯文）

摘要：為了使程序員能夠一次一個地處理集合中的元素，引入了迭代器接口。迭代器使用該方法獲取對象屬性名稱的數組，然后將其分配給常量。迭代器的缺點是它們不適合表示異步數據源。每次循環時，都會調用迭代器的方法，它返回一個。前言原文地址：https://css-tricks.com/new-es2018-features-every-javascript-developer-should-kno...

leonardofed 2019-08-23 14:44 評論0 收藏0