ES2015入门系列6-Rest和Spread

May 23, 2016

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