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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
如何封装Vue Element的table表格组件
Feb 06 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使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
python中的闭包用法实例详解
2015/05/05 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
Python循环实现n的全排列功能
2019/09/16 Python
Python @property装饰器原理解析
2020/01/22 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
初一学生评语大全
2014/04/24 职场文书
励志演讲稿800字
2014/08/21 职场文书
2014年保育员工作总结
2014/12/02 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
各种货币符号快捷输入
2022/02/17 杂记