轻松学习JavaScript函数中的 Rest 参数


Posted in Javascript onMay 30, 2019

JavaScript函数可以使用任意数量的参数。与其他语言(如C#和Java)不同,你可以在调用JavaScript函数时传递任意数量的参数。JavaScript函数允许未知数量的函数参数。在ECMAScript 6之前,JavaScript有一个变量来访问这些未知或可变数目的参数,这是一个类似数组的对象,并非一个数组。细想以下代码来理解arguments变量:

function add(){
var result = 0; 
for(let i=0;i<arguments.length;i++){
result = result + arguments[i];
}
return result; 
}
var r = add(6,9,3,2);
console.log(r);
var t = add(7,56,9);
console.log(t);

如你所见,arguments对象用于访问未知或可变的函数参数。即使arguments使用length属性和方括号,它也不是一个真正的JavaScript数组。你不能对arguments对象使用其他JavaScript数组方法,如pop,push,slice等。在使用arguments时存在的一些问题是:

JavaScript函数arguments对象不是一个真正的JavaScript数组;因此,你不能使用其他数组方法,如pop,push,slice等。
在内部函数中访问外部函数的arguments对象是很困难的。要访问的话,你需要在变量中分配外部函数的arguments函数,然后在内部函数中使用它。

如果你想要使用arguments对象作为数组,那么你需要通过Aarry.prototype.slice手动转换。
ECMAScript 6引入了一个新功能,Rest参数,它表示一个未知数量的参数作为函数中的一个数组。它不仅将额外的参数表示为数组,还解决了arguments对象的许多问题。使用rest参数重写上面的add函数。

function add(...theArgs){
var result = 0; 
for(let i=0;i<theArgs.length;i++){
result = result + theArgs[i];
}
return result; 
}
var r = add(6,9,3,2);
console.log(r);
var t = add(7,56,9);
console.log(t);

你可以将rest参数定义为…theArgs或… args。如果最后命名的函数参数以…(三个点)作为前缀,那么它将成为函数的rest参数。JavaScript函数的rest参数是纯JavaScript数组。在上面的代码中,…theArgs是函数add的rest参数,因为它是唯一的命名参数,且也以…(三个点)作为前缀。

由于rest参数是JavaScript数组,所以你可以对rest参数theArgs执行诸如push,pop等操作,如下面的代码所示:

function add(...theArgs){
theArgs.push(10);
var result = 0; 
for(let i=0;i<theArgs.length;i++){
result = result + theArgs[i];
}
var lastItem = theArgs.pop();
console.log(lastItem);
return result; 
}

JavaScript函数的rest参数也可以与其他参数一起工作。如果你不想在rest参数数组中包含特定参数的话,那么你可能需要在函数中使用其他命名参数。细想以下代码块:

function add(num1, num2, ...theArgs){
console.log(num1);
console.log(num2);
console.log(theArgs.length);
}
var r = add(6,9,3,2);
var t = add(7,56,9);

对于第一次函数调用,6和9将分别分配给num1和num2。对于第二个函数调用,7和56将被分配给num1和num2。启动第三个参数的参数将被分配给rest参数数组。请记住,前两个参数不会成为rest参数数组的一部分。所以,如果你打算将所有的值都包含在rest参数中,那么你应该一开始就将它们定义为用逗号分隔的命名参数。下面给出的代码将会导致错误:

function add(num1, ...theArgs,num2){
console.log(num1);
console.log(num2);
console.log(theArgs.length);
}

在上面的代码中,rest参数不是最后一个参数,所以JavaScript会抛出错误。rest参数必须是最后一个正式参数。

轻松学习JavaScript函数中的 Rest 参数

JavaScript允许你破坏rest参数,这意味着你可以将rest变量数据解包为不同的变量名称。请看下面的代码:

function add(...[a,b,c]){
return a+b+c; 
}
var r = add(6);
console.log(r);
var t = add(7,56,9);
console.log(t);

第一次函数调用,将分配a = 6,b = undefined,c = undefined,第二次函数调用,将分配a = 7,b = 56,c = 9。在此例子中,函数将忽略传递的任何额外的参数。

JavaScript函数的rest参数是对arguments对象使用函数未知参数的一个巨大改进。它是一个纯JavaScript数组;因此,你可以对它使用所有数组方法。你可以将rest变量数据解包到命名变量中。你可以给rest参数指定任何名称,这又是一个使用arguments关键字的重大改进。

英文原文:Easy JavaScript Part 2: What Is the Rest Parameter in a Function?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 元素相对定位代码
Oct 15 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
javascript history对象详解
Feb 09 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
vue实现简单的日历效果
Sep 24 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
细说Vue组件的服务器端渲染的过程
May 30 #Javascript
了解JavaScript中let语句
May 30 #Javascript
koa+jwt实现token验证与刷新功能
May 30 #Javascript
深入理解JavaScript 箭头函数
May 30 #Javascript
socket在egg中的使用实例代码详解
May 30 #Javascript
深入了解JavaScript 私有化
May 30 #Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
You might like
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python+logging+yaml实现日志分割
2019/07/22 Python
python实现统计代码行数的小工具
2019/09/19 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
python 异步async库的使用说明
2020/05/04 Python
如何使用Pytorch搭建模型
2020/10/26 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
员工安全责任书范本
2014/07/24 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
导游词之长城八达岭
2019/09/24 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
python实现Nao机器人的单目测距
2021/09/04 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
Golang 对es的操作实例
2022/04/20 Golang
使用python绘制横竖条形图
2022/04/21 Python