剩余参数和默认参数以及两种声明变量的区别

131 阅读1分钟

1. arguments关键字

 <script>
        /* 
        1.arguments关键字: 获取函数所有实参
            * 是一个伪数组
            * 只能用于函数
        2.场景 : 例如数组push()方法,传多少实参就给数组添加多少元素。底层原理就是使用arguments实现的
         */

         function fn(){
            console.log(arguments)
         }

         fn(10,20,30,40)
    </script>

2. 剩余参数(rest参数

<script>
        /* 
        1.剩余参数(rest参数) : 获取函数剩余的所有实参
            * 是一个真数组
            * 只能写在函数最后形参位置
        2.场景:大多数情况下, rest参数可以替代arguments
            arguments是老语法,浏览器兼容性好
            rest参数:新语法,有些老的浏览器不支持
         */

         function fn(a,b,...c){
            console.log(arguments)//获取所有实参 10 20 30 40
            console.log(a,b)//10 20
            console.log(c)//[30,40] 获取剩余参数
         }

         fn(10,20,30,40)
    </script>

3.函数默认参数

<script>
        /*函数默认参数 
            ES5 : 逻辑或短路
                * 逻辑或口诀: 一真则真
                * 逻辑或短路口诀 : 找真.  左边为真就是左边的结果,否则右边的结果
            ES6 :  形参=默认值
        */

        function fn(a, b = 20) {
            // b = b || 20
            console.log(a)
            console.log(b)//如果b是undefined, 则 a + b = NaN
            //10 + Number(undefined) = 10 + NaN = NaN
            console.log(a + b)
        }

        fn(10,5)
        fn(10)

    </script>

4. 变量声明let与const

 <script>
      /* 声明变量关键字
        1. ES5声明变量 var 
            1.1 有变量预解析
            1.2 没有块级作用域

        2.ES6声明变量 let const
            1.1 没有变量预解析
            1.2 有块级作用域

        3. let与const区别
            let : 变量。 可以修改
            const : 常量。 不可以修改
        * 实际开发中, 只要不修改的变量都用const,需要改的时候用let
      */

      //1. ES5声明变量 var
      // 1.1 预解析 :  变量的声明会提升到当前作用域最顶端
      console.log(num)
      var num = 10

      /* 
        var num
        console.log( num )
        num = 10
      */

      //1.2 没有块级作用域 :
      for (var i = 1; i <= 5; i++) {}
      console.log(i)

    </script>