Es6基础语法

箭头函数

     1.箭头函数 :  相当于function函数的简写
      (1) 把function改成箭头 =>    (2)把形参() 写在箭头  左边
            
     2.箭头函数语法注意点
      (1)如果箭头函数形参只有一个,则可以省略形参小括号
      (2)如果函数体只有一行,则可以省略大括号{}, 此时 必须要省略return 

代码演示

        let fn = (a,b)=>{
          console.log(a+b)
        }

        fn(10,20)

        //(1)如果箭头函数形参只有一个,则可以省略形参小括号
        let fn1 = a => {
          return a*2
        }

        let res1 = fn1(55)
        console.log(res1)

        //(2)如果函数体只有一行代码,则可以省略大括号(此时必须要省略return)
        let fn2 = a => a*2
      
        let res2 = fn2(55)
        console.log(res2)

箭头函数的this指向

    1.function函数this有三种指向 : 
        普通函数:  函数名()        this->window
        对象方法:  对象.方法名()    this->对象
        构造函数:  new 函数名()     this->new创建的实例
        
    2.箭头函数this : 箭头函数没有this
        * 箭头函数中使用this, 本质是通过作用域链找上一级作用域的this

    3.拓展： 箭头函数没有this,对箭头函数影响   
        (1)箭头函数不能作为构造函数
        (2)箭头函数不能修改this
        (3)事件处理函数一般不用箭头函数

关于this指向的练习题（让你快速掌握this指向）

let obj = {
      name: '我是谁',
      eat() {
        //1级  this : function函数指向对象obj
        function fn1() {
          //function函数this取决于调用   函数名()  this->window
          console.log(this)//window  
        }
        fn1()

        let fn2 = () => {
          //2级
          //this:箭头函数,访问上级1级this
          console.log(this)//obj 
        }
        fn2()
      },
      learn: () => {
        //1级 this箭头函数，访问上级 window
        function fn1() {
          //function函数this取决于调用   函数名()  this->window
          console.log(this)//window
        }
        fn1()

        let fn2 = () => {
          //2级  this箭头，访问上级1级的this -> window
          console.log(this)//window  
        }
        fn2()
      }
    } 

    obj.eat()
    obj.learn()

对象结构赋值（ES6新语法）

       解构赋值 ： 变量赋值 简写 
        1. 取出对象的属性 赋值给 变量
            let {name,age,sex} = obj
        2. 取出变量的值  赋值给 对象
            let user = {username,password}
            

//1. 取出对象的属性 赋值给 变量
        let obj = {
            name: '张三',
            age: 20,
            sex: '男'
        }
        //ES6 : 
        let { name, sex: gender, age } = obj

        console.log(name, age, gender)

        //2. 取出变量的值  赋值给 对象

        let username = 'admin'
        let password = '123456'

      
        //ES6
        let user = {
            username, // username:username
            password,
            eat() { }//eat:function(){}
        }

        console.log(user)

函数结构

       function fn( {name,age} ) {//   let {name,age} = { name: '张三', age:           20 }
            //对象解构
            console.log( name,age)
        }


        fn({ name: '张三', age: 20 })


        //函数参数解构流程推理

        // let obj = { name: '张三', age: 20 }
        // let {name,age} = obj

        //上面两行代码其实可以简写成一行
        let {name,age} = { name: '张三', age: 20 }