轻松学习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 Math.random()随机数函数
Nov 04 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
JS与C#编码解码
Dec 03 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
Vue vee-validate插件的简单使用
Jun 22 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
js分页工具实例
2015/01/28 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
学习python (1)
2006/10/31 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
PyQT实现多窗口切换
2018/04/20 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
校长就职演讲稿
2014/01/06 职场文书
求职信需要的五点内容
2014/02/01 职场文书
和睦家庭事迹
2014/05/14 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python