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 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
JavaScript前端面试组合函数
Jun 21 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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
文件系统基本操作类
2006/11/23 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
Python获取linux主机ip的简单实现方法
2016/04/18 Python
django的ORM模型的实现原理
2019/03/04 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
tensorboard显示空白的解决
2020/02/15 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
Ajax和javascript的区别
2013/07/20 面试题
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
初中物理教学反思
2014/01/14 职场文书
公证委托书大全
2014/04/04 职场文书
图书室标语
2014/06/21 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
捐资助学感谢信
2015/01/21 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
活动宣传稿范文
2015/07/23 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
css3带你实现3D转换效果
2022/02/24 HTML / CSS
Python中第三方库Faker的使用详解
2022/04/02 Python
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers