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 相关文章推荐
jquery 元素相对定位代码
Oct 15 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 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
laravel 5 实现模板主题功能
2015/03/02 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
大学生求职工作的自我评价
2014/02/13 职场文书
晚会主持词开场白
2014/03/17 职场文书
优秀应届生求职信
2014/06/16 职场文书
师德师风事迹材料
2014/12/20 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
mysql的单列多值存储实例详解
2022/04/05 MySQL