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的几种方法小结
Apr 25 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
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执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
php服务器的系统详解
2019/10/12 PHP
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[03:48]大碗DOTA
2019/07/25 DOTA
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python os.access()用法实例
2019/02/18 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python开头的coding设置方法
2019/08/08 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python 穷举指定长度的密码例子
2020/04/02 Python
什么是python的id函数
2020/06/11 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
工作求职自荐信
2014/06/13 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
教师工作表现自我评价
2015/03/05 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
致运动员的广播稿
2015/08/19 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫