我们知道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. 64位系统使用Access 数据库文件的彻底解决方法

    最近,有PDF.NET用户问我怎么在64位系统下无法访问Access数据库的问题,我第一反应是我怎么没有遇到呢?今天一看自己的VS和Office都是32位版本的,所以在VS里面调试访问Access是没 ...

  2. 硬连接与软连接,inode与links

    硬连接和软连接,第一感觉就像是window的快捷方式,实则不然 要说硬连接和软连接,那就必须了解inode和block以及分区了 EXT文件系统在创建分区的时候,就划分了两块区域,inode tabl ...

  3. 25款创新的 PSD 格式搜索框设计素材【免费下载】

    这一次,我们给大家带来的素材是25款很有吸引力的搜索框 PSD 设计,你可以免费下载使用.有时候,搜索框容易被访客忽视,因为其简单和没有吸引力的设计.如果这是你所面对的问题,那么我们会鼓励你去看看在这 ...

  4. 根据网址把图片下载到服务器C#代码

    根据网址把图片下载到服务器C#代码 ASPX页面代码: <%@ Page Language="C#" AutoEventWireup="true" Cod ...

  5. JS中数组排序

    法一:升序原理:循环嵌套即双向遍历,在从前往后的遍历过程中,如果前一个位子大于后一个位子,把前一个位子的值付给后一个位子, 在从后往前遍历过程中如果前一个值大于后一个的值,把前面的值付给后面,过程中把 ...

  6. 常用的css命名规则

    头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...

  7. 原生JS:String对象详解

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  8. 关于sharepoint2013的SPUtility.GetGenericSetupPath()方法过期解决办法

    有个时候需要读取layouts下的xml文件,因此需要知道路径,以前在SP2010用的SPUtility.GetGenericSetupPath()方法获取.现在SP2013提示过期否决 看2个结构分 ...

  9. BP神经网络实现

    # -*- coding: utf-8 -*- # -------------------------------------------------------------------------- ...

  10. Get item by sharepoint web service jquery

    对于sp2010,在ie浏览器中这个代码无法生效,只有chrome可以生效. //获取附件id function GetAttachments(listName) { var soapEnv = '& ...