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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
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接口中interface存在的意义
2013/06/27 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
类如何去实现接口
2013/12/19 面试题
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
给导游的表扬信
2014/01/10 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
美德好少年主要事迹
2014/01/29 职场文书
公关活动策划方案
2014/05/25 职场文书
2014年技术员工作总结
2014/11/18 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书