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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
javascript实现前端分页效果
Jun 24 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
在html文件中也可以执行php语句的方法
2015/04/09 PHP
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
Javascript的this详解
2019/03/23 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
python 项目目录结构设置
2020/02/14 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
高中考试作弊检讨书
2014/01/14 职场文书
记帐员岗位责任制
2014/02/08 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
应收账款管理制度
2015/08/06 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
2019财务转正述职报告
2019/06/27 职场文书