我们知道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. 使用maven profile实现多环境可移植构建(转自CSDN)

    使用maven profile实现多环境可移植构建 标签: maven profilemaven自动构建maven自动部署maven可移植构建持续集成 2014-04-25 23:37 26905人阅 ...

  2. Java Selenium封装--RemoteWebDriver

    package com.selenium.driver; import java.io.File; import java.io.IOException; import java.net.URL; i ...

  3. Frameless - 用于预览 iOS8 原型的浏览器

    Frameless 是一个用于在 iOS8 中预览产品原型的浏览器.可以可以帮助那些需要一个简单的方法来预览 iOS 设备上的原型设计和开发效果.没有状态栏,通过手势控制浏览器的历史以及键盘的显示. ...

  4. 25个有用的和方便的 WordPress 速查手册

    如果你是 WordPress 开发人员,下载一些方便的 WordPress 备忘单可以在你需要的时候快速查找.下面这个列表,我们已经列出了25个有用的和方便的 WordPress 速查手册,赶紧收藏吧 ...

  5. DOM中的事件处理概览与原理的全面剖析

    事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信,DOM支持大量的事件: 本文通过这几点向大家详细解析事件处理的基本原理:事件类型.事件目标.事件处理程序.事件对象.事件传播 最后再向 ...

  6. 【高级功能】使用Web存储

    Web存储允许我们在浏览器里保存简单的键/值数据.Web存储和cookie很相似,但它有着更好的实现方式,能保存的数据量也很大.这两种类型共享相同的机制,但是被保存数据的可见性和寿命存在区别. PS: ...

  7. SQL SERVER代码生成器必备

    写代码生成器的时候经常用到的SQL 1.表添加注释 EXECUTE sp_addextendedproperty N'MS_Description', N'表注释', N'user', N'dbo', ...

  8. ABAP中RETURN与EXIT语句的区别

    EXIT:1) EXIT如果出现在循环中,退出的是整个循环操作,.程序会从循环结束处开始继续执行,其作用相当于Java与C++中的break.2)EXIT如果出现在循环之外,退出的是当前执行的程序块( ...

  9. JavaScript学习05 定时器

    JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) ...

  10. This version of android studio is incompatible with the gradle version used.Try disabling the instant run解决办法

    今天打开android studio又碰到一个奇怪的问题:This version of android studio is incompatible with the gradle version ...