ES2015入门系列6-Rest和Spread

ES2015为我们带来了一个新的操作符: ,

  • 用于定义函数参数的地方,称之为 Rest
  • 用于调用函数的地方,称之为 Spread

我们一个个来分析:

  • Rest

写程序的时候或多或少都会有,传入不定参数给一个函数的需求,如,给一个班级加入学生名单,可以一次给一个,也可以一次给多个,以前的做法,可能是传入数组,或者定义2个方法,一个传入单个学生,一个传入学生数组,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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 我们的代码就简单了,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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, 意思就是: 从我开始不管后面有多少参数,请帮我把它们组成数组给我后面的参数。 如此一来,也可以这样,

1
2
3
4
5
function callFriends(via, ...friends) {
console.log('使用' + via + '通知: ' + friends.join(',') + '等' + friends.length + '个好友');
}
callFriends('QQ', '张三');
callFriends('电话', '张三', '李四', '王五');

结果:

1
2
> 使用QQ通知: 张三等1个好友
> 使用电话通知: 张三,李四,王五等3个好友

应用刚才的解释到这里,从…开始,不管后面有多少个朋友传进来,请把他们组成数组放入friends参数给我。

  • Spread

Spread 就是 Rest 的逆操作,看代码:

计算一个数组(大于三个元素)中前三个元素的和以及所有元素的和。

1
2
3
4
5
6
7
8
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]);

结果:

1
2
3
4
> 前三个值为: 6
> 总和为: 10
> 前三个值为: 6
> 总和为: 55
本文使用「CC BY 4.0」创作共享协议,只要在使用时署名,您可以对本文进行转载、节选、混编、二次创作,并允许商业性使用。
本文为作者原创,如果您认为本文对您有帮助,欢迎打赏作者