我们知道JS函数内部有个arguments对象,可以拿到全部实参。现在ES6给我们带来了一个新的对象,可以拿到除开始参数外的参数,即剩余参数(废话好多 O(∩_∩)O~)。

这个新的对象和arguments不一样,它是程序员自定义的一个普通标识符,只是需要在前面加上三个点:...

function func(a, ...rest) {
console.log(a)
console.log(rest)
}
func(1)
func(1, 2, 3, 4)

注意func的第二个参数rest,前面有三个点。定义好后调用了两次,结果分别如下

可以看到第一次调用时,rest为一个空数组,第二次为[2, 3, 4]。

又比如,在前面定义2个参数

function func(a, b, ...rest) {
console.log(a, b)
console.log(rest)
}
func(1, 2)
func(1, 2, 3, 4)

输出结果如下

通过以上两个示例应该已经了解剩余参数的意义了吧。

剩余参数嘛,所以后面就不要再跟其它的参数了,不然会报错

function func(a, ...rest, b) {

}

这里在rest后面加了一个参数b,Firefox会报错

当您使用剩余参数后,函数的length属性会发生一些变化

function func(a, b, ...rest) {
}
func.length // 2

即length不包含rest,为2。

有同学会想,剩余参数前面是否可以一个参数都没有呢? 答案是肯定的

function func(...rest) {
console.log(rest)
}
func(1) // [1]
func(1, 2, 3, 4) // [1,2,3,4]

这里的rest实际和arguments功能差不多,有同学想这不就替代了arguments吗? ECMAScript就是这个打算,在被废弃的ES4里就已经有Rest Parameters(熟悉AS3的同学应该了解),ES4被废弃后,Rest Parameters被保留到了ES6

请注意,rest不能和arguments一起使用,会报错

function func(...rest) {
console.log(rest)
console.log(arguments)
}

Firefox控制台如下

arguments和剩余参数的区别

  • arguments是一个伪数组(Array-like)
  • 剩余参数是一个真正数组(Array),具有Array.prototype上的所有方法
  • arguments上有callee,callee上有caller

function func(a, ...rest) {
console.log(rest instanceof Array)
}
func(1, 2) // true

最后我们以一个剩余参数实际应用作为结束

/*
* 任意个数相加
*
* **示例**
* sum(1)
* sum(1, 2)
* sum(1, 2, 3)
*/
function sum(first, ...rest) {
var result = first
var i = 0
var len = rest.length
while (i < len) {
result += rest[i]
i++
}
return result
}

  

相关:

http://www.cnblogs.com/snandy/archive/2011/03/21/1989743.html

ES6函数剩余参数(Rest Parameters)的更多相关文章

  1. ES6学习--函数剩余参数 (rest参数)

    ES6 引入 rest 参数(形式为“...变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了.rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中.(可以拿到除 ...

  2. ES6函数默认参数(Default Parameters)

    语言更新时每一个新增的特性都是从千百万开发者需求里提取过来的,规范采用后能减少程序员的痛苦,带来便捷. 我们经常会这么写 function calc(x, y) { x = x || 0; y = y ...

  3. Angular2入门:TypeScript的函数 - 剩余参数和箭头函数

  4. ES6新增语法(二)——函数和参数

    箭头函数 箭头函数:将原来函数的function关键字和函数名都删掉,并使用"=>"连接参数列表和函数体. 箭头函数语法: (参数1,参数2)=>{ 函数体 } 注意点 ...

  5. ES6新增语法和内置对象(let,const, Array/String/Set 扩展方法(解构赋值,箭头函数,剩余参数))

    1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...

  6. es6笔记 day2---函数默认参数、箭头函数、剩余参数

    函数变化: 1.函数默认参数 2.函数参数默认是已经定义了,不能再使用let.const声明 3.扩展运算符.rest运算符 ...就是扩展运算符,它的作用就是把数组给展开 结合函数使用传参,也可以将 ...

  7. [ES6系列-03]ES6中关于参数相关特性详解(参数默认值与参数解构赋值与剩余参数)

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 今天总结一下 ES6 中跟参数相关的内容. 欢迎补充斧正.留言交流. 让我们互相学习一起进步. 1. ES6 参数默认值( ...

  8. ES6躬行记(2)——扩展运算符和剩余参数

    扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对 ...

  9. ES6参数默认值,剩余参数及展开数组

    一.函数的参数默认值 在ES6之前,想要给参数设置默认值得话,只能在函数体内部加判断设置,比如如果传递参数为undefined时为true, 否则为false,如下图example1,ES6出现语法可 ...

随机推荐

  1. 【FOL】第六周

    最近太忙,三周(第四.五.六周)一起记录一下. 1.完成了键盘的输入,顺便把之前鼠标输入改了一下(最早是在渲染循环里面处理鼠标事件) 2.UI控件方面,做了个Edit控件,把之前的Label.Imag ...

  2. rabbitmq批量删除队列

    有些时候,我们需要批量的删除rabbitmq中的队列,尤其是对于那些客户端配置了队列不存在时自动创建,但断开时不自动删除的应用来说. rabbitmqctl并没有包含直接管理队列的功能,其提供的vho ...

  3. tomcat jdk servlet websocket版本对应关系

    最近在考虑公司主要基础三方库版本统一和升级的问题,特看了下tomcat jdk servlet websocket版本的对应关系,如下:

  4. Twproject Gantt – 开源的 JavaScript 甘特图组件

    Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CSS 皮肤等功能.更重要的是,它是免费开源的. ...

  5. 【特别推荐】10款唯美浪漫的婚礼 & 结婚纪念网站模板

    互联网的重要性不言而喻,如今我们的生活已经完全离不开网络.这里给大家分享一组唯美浪漫的结婚邀请网站以及婚礼请柬网站模板,如果你也正想制作这样的网站,相信这些漂亮的网站模板能够带给你很大的帮助,让你快速 ...

  6. PyCharm使用(完全图解(最新经典))

    PyCharm使用 一.PyCharm设置(版本:PyCharm 2016.1.2)  1.python环境设置        1.1.pycharm新建程序自动补全编码和环境: pycharm设置在 ...

  7. 提高CSS文件可维护性的五种方法

    当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...

  8. Android线程优先级设置方法技巧

    对于Android平台上的线程优先级设置来说可以处理很多并发线程的阻塞问题, 比如很多无关紧要的线程会占用大量的CPU时间,虽然通过了MultiThread来解决慢速I/O但是合理分配优先级对于并发编 ...

  9. Android 6.0 运行时权限处理

    在运行时请求权限 从Android 6.0(API级别23)开始,用户权限授予应用程序在应用程序运行时,当他们安装程序.这种方法简化了应用程序的安装过程,因为用户不需要安装或更新应用程序时授予权限.这 ...

  10. xcode中info.plist文件相关问题

    <一>关于提示http://访问网络不安全的解决方法 提示错误: App Transport Security has blocked a cleartext HTTP (http://) ...