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 相关文章推荐
后台获取ZTREE选中节点的方法
Feb 12 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python3爬楼梯算法示例
2019/03/04 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python 变量初始化空列表的例子
2019/11/28 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
环境科学专业个人求职的自我评价
2013/11/28 职场文书
交通事故调解协议书
2014/04/16 职场文书
汽车转让协议书
2015/01/29 职场文书
社区国庆节活动总结
2015/03/23 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers