js 函数参数 ES6 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>函数参数</title>
</head>
<body>
<!-- <script type="text/javascript">
    // function f1(username){
    //     console.log(username);
    // }

    // f1();
    // f1('zhangsan');

    // //给参数设置默认值
    // //ES5中变相实现  调用时不传参数，形参的值是undefined，可以赋值为另一个值。
    // function f2(username){
    //     var username = username || 'lisi';
    //     console.log(username)
    // }
    // f2();
    // f2('zhangsan');

    //ES6中  直接给形参设置默认值
    function f3(username='lisi', age=30){
        console.log(username, age);
    }
    f3();
    f3('zhangsan');
</script> -->
<!-- <script type="text/javascript">
    //展开运算符（拆包）  三个连续的小数点  ...
    //展开数组
    // var arr = [3,4,5];
    // console.log(arr);
    // console.log(...arr);
    // console.log(arr);
    //展开字符串
    // var str = 'hello';
    // console.log(str);
    // console.log(...str);
    // console.log('h', 'e', 'l');
    
    //使用：拓展参数：给函数传参数，使用展开数组的写法
    function f1(m,n){
        return m+n;
    }
    console.log( f1(2, 3) );

    var arr = [3,4];
    //如果参数放在数组中
    //ES5中
    // console.log( f1(arr[0], arr[1]) );
    // console.log( f1.apply(null, arr) );
    //ES6
    console.log( f1(...arr) ); // m=3 n=4


    var arr = [3,4,5,6];
    console.log( f1(...arr) );// m=3 n=4
</script> -->

<script type="text/javascript">
    //不定参数、剩余参数
    //如果函数参数 个数不确定
    //ES5中，可以在函数内部 使用arguments获取到所有的实参
    //ES6中，可以在形参 使用...声明一个数组变量，接收所有的实参
    // function f2(...x){
    //     console.log(x);
    // }

    // f2(3,4,5);
    // f2(3,4,5,6);

    //可以只使用...语法，接收剩余的参数
    function f3(m,n, ...x){
        console.log(m,n,x);
    }

    f3(3,4,5);
    f3(3,4,5,6);

    //很少使用以下用法：先展开，后又合并到数组。没必要
    var arr = [3,5,8,9,6];
    f3(...arr);

</script>
</body>
</html>

 

posted @ 2021-02-25 13:00  华北业余选手  阅读(55)  评论(0)    收藏  举报