VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 轻松学习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参数和参数默认值

    广而告之:
    热门推荐:
    ThinkPHP3.1新特性之多层MVC的支持

    1.模型(Model)层:默认的模型层由Model类构成,但是随着项目的增大和业务体系的复杂化,单一的模型层很难解决要求,从3.1开始推出了多层Model的支持,设计思路很简单,不同的模型层仍然都继承自系统的Model类,但是在目录结构和命名规范上做了区分,例如在某个项目设计中需要···

    PHP链表操作简单示例

    本文实例讲述了PHP链表操作。分享给大家供大家参考,具体如下: 在php中运行数据结构,基本都是用数组模拟的,只是用一直思想而已。 今天遇到的这个问题是,两个链表进行合并。 链表合并效果图 问题描述:A链表是模版链表,B链表的长度不确定,A,B二个链表结合后形成C链表。 ···

    php 正确解码javascript中通过escape编码后的字符

    这是很久以前收集的一个,不知道谁写的了,但经过测试没有问题~ JavaScript代码 复制代码 代码如下: function phpUnescape($escstr) { preg_match_all("/%u[0-9A-Za-z]{4}|%.{2}|[0-9a-zA-Z.+-_]+/", $escstr, $matches); $ar = &$matches[0]; $c = ""; foreach($ar as···

    mysql主从复制读写分离的配置方法详解

    一、说明 前面我们说了mysql的安装配置,mysql语句使用以及备份恢复mysql数据;本次要介绍的是mysql的主从复制,读写分离;及高可用MHA; 环境如下: master:CentOS7_x64 mysql5.721 172.16.3.175 db1 slave1:CentOS7_x64 mysql5.7.21 172.16.3.235 db2 slave2:CentOS7_x64 mysql5.···

    eWebEditor v3.8 商业完整版 (PHP)

    eWebEditor是eWebSoft.com旗下eWeb团队开发的基于网页的在线编辑器。她能够在网页上实现许多桌面编辑软件(如:Word)所具有的强大可视编辑功能;她是一个真正的绿色软件,不需要在计算机上安装任何的客户端软件。 功能非常的强大 /uploadfiles/ewebeditor_v38_php_78881···

    简介PHP的Yii框架中缓存的一些高级用法

    页面缓存 页面缓存指的是在服务器端缓存整个页面的内容。随后当同一个页面被请求时,内容将从缓存中取出,而不是重新生成。 页面缓存由 yii\filters\PageCache 类提供支持,该类是一个过滤器。它可以像这样在控制器类中使用: public function behaviors() { return [ [ ···

    php中批量修改文件后缀名的函数代码

    复制代码 代码如下:<?php function foreachDir($path){ $handle=opendir($path); if($handle){ while (false !== ($file = readdir($handle))) { if($file!="." && $file!='..'){ if(is_dir($path.$file)){ echo $path.$file."<br/>"; foreachDir($path···

    HTML网页头部代码实例详解

    知识点一:头部信息里设置网页的基底网址 基底网址的实质是统一设置超级链接的属性,基底网址标签是</base>,它有两个属性,href和_target。href用于设置基底网址的路径,_target用于设置超级链接的打开方式。 通过基底网址的添加,页面中所有的相对网站根目录地址可转···

    html插入链接的实现方法

    每个网页都已一个地址,用URL()标识,通常在网站内部创建链接时,通常使用相对地址 内部链接 XML/HTML Code复制内容到剪贴板 <a href="链接地址" target="目标窗口的打开方式(-self,-blank,-top,-parent)"> 说明文字 </a>···

    微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

    前言 小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支···