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中用星号表示预录入内容的实现代码
Jan 08 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
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
PHP:风雨欲来 路在何方?
2006/10/09 PHP
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
js转换对象为xml
2017/02/17 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
基于node.js实现微信支付退款功能
2017/12/19 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python 从远程服务器下载日志文件的程序
2013/02/10 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python字典的常用操作方法小结
2016/05/16 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
利用python计算时间差(返回天数)
2019/09/07 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python字符串判断密码强弱
2020/03/18 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
先进员工获奖感言
2014/08/14 职场文书
踏青活动策划方案
2014/08/19 职场文书
先进事迹演讲稿
2014/09/01 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
秋季运动会开幕词
2015/01/28 职场文书
花木兰观后感
2015/06/10 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
压缩Redis里的字符串大对象操作
2021/06/23 Redis