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 html()方法使用不了无法显示内容的问题
Aug 06 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 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
form自动提交实例讲解
2017/07/10 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
详解基于webpack&gettext的前端多语言方案
2019/01/29 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
react 生命周期实例分析
2020/05/18 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
基于Python实现粒子滤波效果
2020/12/01 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
服装促销活动方案
2014/02/23 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏
讲解MySQL增删改操作
2022/05/06 MySQL