JavaScript入门到精通二十六（变量提升、函数剩余参数、展开运算符、ES6箭头函数）

一.变量提升

变量提升是JavaScript中比较"奇怪"的现象，它允许在变量声明之前即被访问(仅存在于var声

明变量)

javascript 复制代码

<body>
  <script>
    //把所有var声明的变量提升到 当前作用域的最前面
    //只提升声明，不提升赋值
    //var num
    console.log(num + '个');
    //num = 10
    var num = 10
    console.log(num)
  </script>
</body>

javascript 复制代码

<body>
  <script>
    function fn(){
      console.log(num);
      var num = 100
    }
    fn()
  </script>
</body>

1.变量在未声明即被访问时会报语法错误

2.变量在var声明之前即被访问，变量的值为undefined

3.let/const 声明的变量不存在变量提升

4.变量提升出现在相同作用域当中

5.实际开发中推荐先声明再访问变量

二.函数提升

函数提升与变量提升比较类似，是指函数在声明之前即可被调用

javascript 复制代码

<body>
  <script>
    //会把所有函数声明提升到当前作用域的最前面
    //只提升函数声明，不提升函数调用
    fn()
    function fn(){
      console.log('函数提升');
    }
  </script>
</body>

javascript 复制代码

<body>
  <script>
    //函数表达式 必须先声明和赋值，后调用，否则报错
    fn()
    var fn = function (){
      console.log('函数提升');
    }
  </script>
</body>

1.函数提升能够使函数的声明调用更灵活

2.函数表达式不存在提升的现象

3.函数提升出现在相同作用域当中

三.函数剩余参数

1.动态参数：

arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参

arguments动态参数只存在于函数里面

javascript 复制代码

<body>
  <script>
    function getSum(){
      console.log(arguments);
    }
    getSum(1,2,3,4,5)
  </script>
</body>

javascript 复制代码

<body>
  <script>
    function getSum(){
      console.log(arguments);
      let sum = 0
      for(let i = 0;i<arguments.length;i++){
        sum += arguments[i]
      }
      console.log(sum);
    }
    getSum(1,2,3,4,5)
  </script>
</body>

1.arguments是一个伪数组，只存在于函数中

2.arguments的作用是动态获取函数的实参

3.可以通过for循环依次得到传递过来的实参

4.当不确定传递多少个实参的时候，可以使用arguments动态参数

2.剩余参数：

剩余参数允许我们将一个不定数量的参数表示为一个数组（存在于函数中）

javascript 复制代码

<body>
  <script>
    function getSum(...arr){
      console.log(arr);
    }
    getSum(1,2,3)
    getSum(1,2,3,4,5)
  </script>
</body>

...是语法符号，置于最末函数形参之前，用于获取多余的实参

2.借助...获取的剩余实参，是个真数组

3.开发中，还是提倡多使用剩余参数

javascript 复制代码

<body>
  <script>
    function getSum(a,b,...arr){
      console.log(arr);
    }
    getSum(1,2,3,4,5)
  </script>
</body>

四.展开运算符

展开运算符(...)，将一个数组进行展开（函数、对象、数组都可以使用），不会修改原数组

javascript 复制代码

<body>
  <script>
    const arr = [1,2,3,4,5,8,6,12,4]
    console.log(...arr);
  </script>
</body>

典型运用场景：求数组最大值(最小值)、合并数组等

javascript 复制代码

<body>
  <script>
    const arr = [1,2,3,4,5,8,6,12,4]
    console.log(Math.max(...arr));
  </script>
</body>

javascript 复制代码

<body>
  <script>
    const arr1 = [1,2,3,4,5,8,6,12,4]
    const arr2 = [2,3,11,9,10,15]
    const arr = [...arr1,...arr2]
    console.log(arr);
  </script>
</body>

展开运算符和剩余参数的区别：

展开运算符：主要在数组中使用，数组展开

剩余参数：函数参数使用，得到真数组，函数内部使用

五.箭头函数

引入箭头函数的目的是更简短的函数写法 并且不绑定this，箭头函数的语法比函数表达式更简洁

使用场景：箭头函数更适用于那些本来需要匿名函数的地方

1.基本写法：

javascript 复制代码

<body>
  <script>
    // 普通写法
    const fn = function(){
      console.log(123);
    }
    fn()
    // 箭头函数写法1
    const fun = () => {
      console.log(456);
    }
    fun()
    // 箭头函数写法2
    const fun2 = a => {
      console.log(a);
    }
    fun2(100)
    // 只有一行代码时，可以省略大括号和return关键字
    const fun3 = a => console.log(a)
    fun3(100)
    // 箭头函数写法3
    const fun4= (a,b) => {
      console.log(a+b);
    }
    fun4(20,200)
    // 箭头函数可以直接返回一个对象
    const fun5 = (uname) =>({uname:uname})
    fun5('张三')
    console.log(fun5('张三'));
  </script>
</body>

1.箭头函数属于表达式函数，因此不存在函数提升

2.箭头函数只有一个参数时可以省略圆括号()

3.箭头函数函数体只有一行代码时可以省略花括号{}，并自动做为返回值被返回

4.加括号的函数体返回对象字面量表达式

2.箭头函数参数：

1.普通函数有arguments动态参数

2.箭头函数没有arguments动态参数 ，但是有剩余参数..args

javascript 复制代码

<body>
  <script>
    const getSum = (...arr) => {
      let sum = 0
      for(let i=0;i<arr.length;i++){
        sum += arr[i]
      }
      return sum
    }
    const res = getSum(1,2,3,4,5);
    console.log(res);
  </script>
</body>

3.箭头函数this：

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this

javascript 复制代码

<body>
  <script>
    console.log(this); // window
    function fn(){
      console.log(this); // window
    }
    fn()
    const obj ={
      name:'张三',
      say(){
        console.log(this); // obj
      }
    }
    obj.say()
    const fun = () => {
      console.log(this); // window
    }
    fun()
    const obj2 ={
      name:'李四',
      say2:()=>{
        console.log(this); // window
      }
    }
    obj2.say2()
    const obj3 ={
      name:'王五',
      say3:function(){
        let i = 5
        const count = () => {
          console.log(this); // obj3
        }
        count()
      }
    }
    obj3.say3()
  </script>
</body>

在开发中使用箭头函数前需要考虑函数中this 的值，事件回调函数使用箭头函数时，this为全局的

window，因此DOM事件回调函数为了简便，还是不太推荐使用箭头函数