轻松学习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 新手24条实用建议[TUTS+]
Jun 21 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
细说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数组是否为空的代码
2011/09/08 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
js不是基础的基础
2006/12/24 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
简明 Python 基础学习教程
2007/02/08 Python
Python translator使用实例
2008/09/06 Python
Python greenlet实现原理和使用示例
2014/09/24 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
数据库面试要点基本概念
2013/10/31 面试题
大学本科生职业生涯规划书范文
2014/09/14 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
美术教师个人工作总结
2015/02/06 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers