定义与参数_剩余参数和默认参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用剩余参数</title>
    <script src="../unitl/test.js"></script>
    <style>
        #results li.pass {color:green;}
        #results li.fail {color:red;}
    </style>
</head>
<body>

    <ul id="results"></ul>

    
</body>


<script>
    //剩余参数以...做前缀。
    function multMax(first,...remainingNumbers) {
        var sorted = remainingNumbers.sort(function(a,b){
            //以降序排序余下参数
            return b-a;
        });

        //函数调用方式和其他函数类似。
        return first * sorted[0];

    }

    //函数调用方式和其他函数类似。
    assert(multMax(3,1,2,3) ==9,"3*3=9 (first arg,by largest)");


</script>
</html>

为函数的最后一个命名参数加上省略号(...)前缀,这个参数就变成了一个叫作剩余参数的数组,数组内包含者传入的剩余的参数。

      function multMax(first,...remainingNumbers){
            ...
      } 

本例中用4个参数调用了multiMax函数,即multiMax(3,1,2,3)。在multiMax函数体内,第一个参数的值3被赋值给了第一个函数multiMax形参first。
由于函数的第二个参数是剩余参数,故所有的剩余参数(1,2,3)都放在一个新的数组remainingNumbers里。通过降序排列这个数组(可以看到为数组排序是很简单的)并取得排序后数组的第一个值即最大值。

默认参数

  • 注意:默认参数已加入ES6标准
      function performAction(ninja,action) {
            return ninja + " " + action;
      }
      performAction("Fuma","skulking");
      performAction("Yoshi","skulking");
      performAction("Hattori","skulking");
      performAction("Yagyu","sneaking");
      
 每次重复相同的参数skulking看起来相当无聊,在其他编程语言中,这个问题最常用的解决方式是函数重载,遗憾的是,javascript不支持函数重载,所以在过去面临这个问题的时候,开发者通常会采用清单3.8中所示。

···html

ES6之前处理默认参数的方式
<ul id="results"></ul>
</body> ``` 本例定义了一个函数performAction,该函数会检查参数action的值是否为undefined(通过使用typeof运算符),如果是,action的值就会被设置为skulking。如果函数调用的时候提供了 action的值(此时其值不会等于undefined),则保留该值。 由于这种常见的模式书写起来很冗长,令人乏味,所以ES6标准支持了默认函数。 ```html ES6之前处理默认参数的方式
<ul id="results"></ul>
</body> ``` 这个例子中可以看到javaScript默认参数的语法。创建默认参数的方式为函数的形参赋值。 ```javascript function performAction(ninja,action="skulking") { return ninja + " " + action; } ``` 随后,当函数调用后相应的参数都被赋予了默认值,Fuma,Yoshi和Hattori。 ```javascript
assert(performAction("Fuma")==="Fuma skulking","The default value is used for Fuma");

assert(performAction("Yoshi")==="Yoshi skulking","The default value is used for Fuma");

assert(performAction("Hattori") === "Hattori skulking", "The default value is used for Hattori");
反之,如果指定了实参的值,参数则会被覆盖。
```javascript
      assert(performAction("Yagyu","sneaking") === "Yagyu sneaking","Yagyu can do  whatever he pleases, even sneak" );

可以为默认参数赋任何值,它既可以是数字或者字符串这样的原始类型,也可以是对象,数组,甚至函数这样的复杂类型。每次函数调用时都会从左到右求得参数的值。
并且当对后面的默认参数赋值时可以引用前面的默认参数,如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6之前处理默认参数的方式</title>
    <script src="../unitl/test.js"></script>
    <style>
        #results li.pass {color:green;}
        #results li.fail {color:red;}
    </style>
</head>
<body>

    <ul id="results"></ul>

    
</body>


<script>

    //ES6可以为函数的形参赋值
    function performAction(ninja,action="skulking",message = ninja + " " + action) {
        
        return message;
        
    }

    console.log(performAction("Yoshi"));


    assert(performAction("Yoshi") === "Yoshi skulking", "Yoshi is skulking");



</script>
</html>
posted @ 2020-12-10 11:14  yongjar  阅读(128)  评论(0编辑  收藏  举报