轻松学习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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
一个选择最快的服务器转向代码
Apr 27 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
vue实现Toast组件轻提示
Apr 10 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
php 什么是PEAR?(第三篇)
2009/03/19 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
python MySQLdb使用教程详解
2018/03/20 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
基于python实现名片管理系统
2018/11/30 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
哪些是python中web开发框架
2020/06/17 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
单位单身证明范本
2014/01/11 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
python中super()函数的理解与基本使用
2021/08/30 Python