ES6函数的扩展（箭头函数）

1.函数形参的默认值

在我们的es6中支持给函数的形参赋默认值

代码示例

<script>
    // 函数默认值
    // 在es6中支持给函数形参添加默认值
    // 例如
    function show (a=10,b=30,){
      // 当有实参的时候使用实参，没有实参的是，会使用形参默认值
      console.log(a,b);//12 30
    }
    show(12) 

</script>

函数形参对象解构和赋默认值

在我们函数的形参是一个对象，并且解构的时候，可以给形参对象赋默认值

代码示例

  <script>
    // 函数形参默认值和解构对象
    function fn({
      // 给函数解构出来的形参赋默认值
      // a=10,
      // b=20,
      // c=30,
      // 相当于
      a: a = 10,
      b: b = 10,
      c: c = 10,
    } = {}) {
      console.log(a, b, c);//200,333,10
    }
    fn({
      a: 200,
      b: 333,
    })
  </script>

2.reat参数    ...

函数形参为rest参数的时候，rest参数只能写在函数形参的最后一个

<script>
// rest参数   ...
  function he(a,b,...arr){
    console.log(a,b,arr);
    // a和b会接收参数， ...arr会接受所有没有被接受的参数
    // 注意   rest参数只能写在函数形参的最后一个
  }
  he(10,20,30,40,50,60)
</script>

3.箭头函数    =>

在我们的es6中允许使用箭头代替函数 =>

并且当我们的箭头函数形参只有一个的时候可以省略小括号

并且当我们的箭头函数的函数体只有一句代码并且为return的时候可以省略花括号和return

代码示例

 <script>
     // 普通函数
     function show(a) {
      console.log(a);//10
    }
    show(10)
    // 改造为箭头函数
    let show1 = (a) => {
      console.log(a);//10
    }
    show1(10)
    // 在我们的箭头函数中，如果你的箭头函数参数只有一个，可以省略小括号
    let show2 = a => {
      console.log(a);//20
    }
    show2(20)
    // 在我们的箭头函数中，如果函数体只有一句话并且是return语句，  
    // 这时候我们还可以简化  可以省略return和花括号
    let show3 = a => a + 5;
    console.log(show3(20));//25
  </script>

   

箭头函数中this上下文

在我们的箭头函数中this是静态的，也就是说当我们的代码编写完成时，this的上下文已经固定了

在我们的箭头函数中   this的上下文  只有   函数   和script

代码示例

 <script>
      // 箭头函数中的this指向问题  在箭头函数中this是静态的
    // 也就是当代码书写完毕，this的指向已经固定了
    let age = 10
    let obj = {
      age: 18, 
      method: () => {
        console.log(this);//window
        // 因为在箭头函数中this的上下文，只有函数和script  两种
      }
    }
    obj.method()
  </script>

不建议改造为箭头函数有以下几种

1.构造函数

2.事件函数

3.对象的方法

等等等...