ECMAScript6函数剩余参数(Rest Parameters)


Posted in Javascript onJune 12, 2015

我们知道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,前面有三个点。定义好后调用了两次,结果分别如下

ECMAScript6函数剩余参数(Rest Parameters)

可以看到第一次调用时,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)

输出结果如下

ECMAScript6函数剩余参数(Rest Parameters)

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

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

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

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

ECMAScript6函数剩余参数(Rest Parameters)

当您使用剩余参数后,函数的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控制台如下

ECMAScript6函数剩余参数(Rest Parameters)

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
}

以上所述就是本文的全部内容了,希望大家能喜欢。

Javascript 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
Angular8 简单表单验证的实现示例
Jun 03 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
ECMAScript6函数默认参数
Jun 12 #Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 #Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 #Javascript
JS中产生标识符方式的演变
Jun 12 #Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 #Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 #Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 #Javascript
You might like
PHP对字符串的递增运算分析
2010/08/08 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
php实现的RSS生成类实例
2015/04/23 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
Python导出DBF文件到Excel的方法
2015/07/25 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
Python subprocess库的使用详解
2018/10/26 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python当中的array数组对象实例详解
2019/06/12 Python
Pytorch之保存读取模型实例
2019/12/30 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
python3访问字典里的值实例方法
2020/11/18 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
廉洁使者实施方案
2014/03/29 职场文书
合作意向协议书范本
2014/03/31 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
欢迎标语大全
2014/06/21 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
2014年党支部工作总结
2014/11/13 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
警示教育片观后感
2015/06/17 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
Go语言入门exec的基本使用
2022/05/20 Golang