轻松学习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 相关文章推荐
javascript中的作用域scope介绍
Dec 28 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
javascript绘制简单钟表效果
Apr 07 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
PHP模板引擎SMARTY
2006/10/09 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
php session的应用详细介绍
2017/03/22 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
python中pygame模块用法实例
2014/10/09 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
开始着手第一个Django项目
2015/07/15 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
python如何运行js语句
2020/09/09 Python
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
电台实习生求职信
2014/02/25 职场文书
学习经验演讲稿
2014/05/10 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL