ES2015入门系列6-Rest和Spread

keelii 发布于2019-08-20 17:40 / 526人阅读

摘要：就是的逆操作，看代码计算一个数组大于三个元素中前三个元素的和以及所有元素的和。前三个值为总和为结果前三个值为总和为前三个值为总和为

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入门实战系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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