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 相关文章推荐
Javascript 判断是否存在函数的方法
Jan 03 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
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仿discuz分页效果代码
2008/10/02 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python运行时间的几种方法
2016/06/17 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python实现维吉尼亚算法
2019/03/20 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
python yield和Generator函数用法详解
2020/02/10 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
领导干部作风建设总结
2014/10/23 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
Vue如何清空对象
2022/03/03 Vue.js