es6函数之rest参数用法实例分析


Posted in Javascript onApril 18, 2020

本文实例讲述了es6函数之rest参数用法。分享给大家供大家参考,具体如下:

es6引入rest参数(形式为 …变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了,rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add (...values) {
 let sum = 0;
 for (var val of values) {
 sum += val
 }
 return sum
}

add(2, 3, 5) // 10

上面代码的add函数是一个求和函数,利用rest参数,可以向该函数传入任意数目的参数。

下面是一个rest参数代替arguments变量的例子。

// arguments变量的写法
function sortNumbers() {
 return Array.prototype.slice.call(arguments).sort()
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort()

上面代码的两种写法,比较后可以发现,rest参数的写法更自然也更简洁。

arguments对象不是数组,而是一个类似数组的对象。所以为了使用数组的方法,必须使用Array.prototype.slice.call先将其转为数组。rest参数就不存在这个问题,它就是一个真正的数组,数组特有的方法都可以使用。下面是一个利用rest参数改写数组push方法的例子。

function push(array, ...items) {
 items.forEach(item => {
 array.push(item)
 })
}

var a = []
push(a, 1, 2, 3)

注意,rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错

function f (a, ...b, c) {
 // ..
} // 报错

函数的length属性,不包括rest参数。

(function (a) {}).length // 1
(function (...a) {}).length // 0
(function (a, ...b) {}).length // 1

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
JavaScript类库D
Oct 24 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
js自定义select下拉框美化特效
May 12 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
vue实现短信验证码输入框
Apr 17 #Javascript
JS监听组合按键思路及实现过程
Apr 17 #Javascript
javascript canvas检测小球碰撞
Apr 17 #Javascript
Vue实现浏览器打印功能的代码
Apr 17 #Javascript
基于JavaScript获取url参数2种方法
Apr 17 #Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 #Javascript
vue fetch中的.then()的正确使用方法
Apr 17 #Javascript
You might like
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
python 实现客户端与服务端的通信
2020/12/23 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
GWT都有什么特性
2016/12/02 面试题
六查六看剖析材料
2014/02/15 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
2016猴年春节问候语
2015/11/11 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技