交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 轻松学习JavaScript函数中的 Rest 参数

    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参数,这意味着你可以将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中的Rest参数和参数默认值
    • 深入学习JavaScript中的Rest参数和参数默认值

    广而告之:
    热门推荐:
    php实现的Cookies操作类实例

    本文实例讲述了PHP实现的Cookies操作类及其用法,分享给大家供大家参考。具体分析如下: 一、功能: 1.保存,读取,更新,清除cookies数据。 2.可设置前缀。 3.强制超时控制。 4.cookies数据可以是字符串,数组,对象等。 二、用法: Cookies.class.php类文件如下: <?···

    mysql学习笔记之数据引擎

    查看当前数据库支持的引擎 show engines +--------------------+---------+----------------------------------------------------------------+--------------+------+------------+ | Engine | Support | Comment | Transactions | XA | ···

    常用正则表达式收集

    经常对小的知识点进行整理,有助于知识的积累,加深知识点印象,今天小编就为大家整理了一些关于ASP.NET的常用正则表达式,觉得还不错的朋友记录下来。 整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$ 只能输入数字:"^[0-9]*$"。 只能输入n位的数字:"^\d{n}$"。 只能输入至少n位的···

    javascript ES6中箭头函数注意细节小结

    前言 ES6标准新增了一种新的函数:Arrow Function(箭头函数)。 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 但箭头函数带来了些许问题,下面来一起看看吧。 关于{} 第一个问题是关于箭···

    JavaScript与Div对层定位和移动获得坐标的实现代码

    1:移动图层 获得点的x轴y轴坐标,从而进行绝对定位(注意:竖拉框会影响 x 轴 y 轴坐标值) 复制代码 代码如下: var x,y,z,down=false,obj function init(){ obj=event.srcElement //事件触发对象 obj.setCapture() //设置属于当前对象的鼠标捕捉 z=obj.style.zIndex //获···

    CentOS安装php v8js教程

    CentOS release 5.11 (Final),CentOS release 6.6 (Final) x64测试通过。 gcc版本,glibc版本,libstdc++.so.6版本,gnu-binutils版本,tar版本,python版本,re2c版本都要对的上才行,最后弄上已经要吐血的,需要glibc高版本的话是搞不了的,硬要搞的话风险太大。 v8js目前最···

    JSQL 批量图片切换的实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/j···

    纯javascript实现简单下拉刷新功能

    代码很简单,实现的功能却很实用,直接奉上代码 CSS: 复制代码 代码如下: <meta charset="utf-8" /> <title>Pull to Refresh</title> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user···

    DedeCMS 上传缩略图启用水印的方法

    打开include\FCKeditor\editor\dialog\dede_image.php ,第117行,原文:   以下为引用的内容: if (in_array($imgfile_type,$cfg_photo_typenames)) { WaterImg($fullfilename,'up'); }   修改为:   以下为引用的内容:···

    jquery 插件开发方法小结

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 fn 是什么东西呢。查看jQuery代码,就不难发现。 复制代···