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 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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
德生PL660的电路分析和打磨
2021/03/02 无线电
php $_SERVER当前完整url的写法
2009/11/12 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php的4种常用运行方式详解
2016/12/22 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
围观tangram js库
2010/12/28 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python实现配置文件备份的方法
2015/07/30 Python
django rest framework serializers序列化实例
2020/05/13 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
学校安全责任书
2014/04/14 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL