ES2015入門系列6-Rest和Spread

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