ES2015入门系列6-Rest和Spread

2024年5月18日 134次阅读 来源: chekun

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
    原文作者：chekun
    原文地址: https://segmentfault.com/a/1190000009992594
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞