ES6新语法

1.声明let 与const

ES6中声明变量let与const特点

        1.1没有预解析：变量必须先声明，不能使用

        console.log(num)//报错   变量不允许咋声明之前使用

let num = 10
        console.log(num)//10

        //1.2有块级作用域  if和for打括号里声明的变量是局部

        if(true){
            let age =30
            console.log(age)//30
        }
        // console.log(age)//报错   age is not   defined

        for(let i = 1;i<=5;i++){
            console.log(i);
        }
        // console.log(i)//报错  age is not defined

        /* let 与 const区别 */
        //const : 常量。只能再生命的时候赋值一次，不可以被修改
        const aaa='666'
        console.log(aaa)

2.对象解析

解构赋值 ： 变量赋值简写语法

         1.重点掌握

              1.1 取出对象的属性  赋值给 变量

                let {name,age,sex} = 对象名

              1.2 取出变量的值    赋值给 对象的属性

                let 对象名 = {name,age,sex}

  //1. 取出对象的属性  赋值给 变量

        // let obj = {
        //     name: "张三",
        //     age: 20,
        //     sex: "男"
        // }

        //ES5
        //    let name = obj.name
        //    let age = obj.age
        //    let sex = obj.sex
        //    console.log( name,age,sex )

        //ES6解构赋值
        // let hobby = obj.hobby
        // let { name, age, sex, hobby } = obj
        // console.log(name, age, sex, hobby)

        //2. 取出变量的值    赋值给 对象的属性
        let name = '李四'
        let age = 30
        let sex = '女'

        //ES5

        // let obj = {
        //     name:name,
        //     age:age,
        //     sex:sex,
        // }
        // console.log(obj)

        //ES6
        
        let obj = {
            name,//name:name
            age,
            sex,
            eat(){//eat:function(){}
                console.log('吃东西')
            }
        }
        console.log( obj )
        

        

 

 

3.箭头函数

1.箭头函数语法 ： 就是function简写

            1.1 把function单词 替换成  箭头 =>

            1.2 把形参() 移到 箭头的 左边

        2.箭头函数其他用法：

            2.1 如果只有一个形参，则可以省略形参小括号

                a=>{ return a*2 }

            2.2 如果函数体只有一行，则可以省略大括号。此时必须要省略return

                a=>a*2

箭头函数 与 function函数唯一的区别： this规则不同

       

        1. function函数this指向有三种情况

            this: 谁调用我，我就指向谁

            (1)普通函数：  函数名()         this指向window

            (2)对象方法：  对象.方法名()     this指向对象

            (3)构造函数：  new 函数名()     this指向new创建的实例对象

        2. 箭头函数this指向 : 箭头函数没有this

            * 箭头函数中使用this,会访问上级作用域this

                * 原因(作用域链)：箭头函数没有this, 就会往上级作用域找

  //1. function函数
        let fn = function(){
            console.log('11111')
        }
        fn()

        //2.箭头函数
        let fn1 = ()=>{
            console.log('2222')
        }
        fn1()

        /* 箭头函数其他用法 */
        //(1)如果箭头函数只有一个形参，则可以省略形参小括号
        // let fn2 = (a)=>{ return a*2 }
        let fn2 = a=>{ return a*2 }
        let res2 = fn2(10)
        console.log( res2 )//20

        //(2)如果箭头函数的函数体只有一行代码，则可以省略大括号.此时必须省略return
        let fn3 = a=>a*2
        let res3 = fn3(20)
        console.log(res3)//40
        

  let obj = {
            name:'张三',
            age:20,
            eat:function(){
                //eat是function函数， eat里面的this指向obj

                let fn1 = function(){
                    //fn1是function函数， this指向window (普通函数调用)
                    console.log( this )//window
                }
                fn1()

                let fn2 = ()=>{
                    //fn2是箭头函数， 访问上级作用域(eat函数)中的this
                    console.log( this )//obj
                }
                fn2()
            },
            learn:()=>{
                //learn是箭头函数，this指向上级（全局）中的this:window
                let fn1 = function(){
                    //fn1是function函数， this指向window (普通函数调用)
                    console.log( this )//window
                }
                fn1()

                let fn2 = ()=>{
                    //fn2是箭头函数，访问上级作用域(learn)this : window
                    console.log( this )//window
                }
                fn2()
            }
        }
        obj.eat()
        obj.learn()

 

 

 

4.解构函数语法及应用场景

 

 解构赋值本质 ： 变量赋值简写

        应用场景： 后期项目课程中封装函数，会经常使用解构赋值。两种语法都会频繁使用

        1.重点掌握 ： 对象解构

            1.1 取出对象属性值  赋值给 变量

              语法：  let {name,age,sex} = obj

           

            1.2 取出变量的值  赋值给 对象

              语法： let obj = {name,age,sex}

        2.解构赋值其他用法

            2.1 解构赋值默认值  

                let {name,age=18,sex} = obj

            2.2 自定义解构变量名

                let { sex:gender } = obj  相当于 let gender = obj.sex

 let obj = {
            name:'张三',
            sex:'男', 
        }

        // let name = obj.name
        // let gender = obj.sex
        // if( obj.age == undefined){ age = 18 }else{ age = obj.age }
        let {name,sex:gender,age=18} = obj
        console.log(name,gender,age)

 

5.数组解构

 

解构赋值 ： 变量赋值简写语法

         1.重点掌握

              1.1 取出对象的属性  赋值给 变量

                let {name,age,sex} = 对象名

              1.2 取出变量的值    赋值给 对象的属性

                let 对象名 = {name,age,sex}

let arr = [10,20,30]

        // 1.取出数组的元素 赋值给 变量
        let [n1,n2,n3,n4] = arr
        // let n1 = arr[0]
        // let n2 = arr[1]
        // let n3 = arr[2]
        // let n4 = arr[3]
        console.log( n1,n2,n3,n4)//10,20,30,undefined

        //2.取出变量的值 赋值给 数组的元素
        let num1 = 66
        let num2 = 88
        let num3 = 100
        let arr1 = [num1,num2,num3]
        console.log(arr1)
        

 

6展开符云算

 1.展开运算符 ：  ...

        2.作用： 相当于遍历对象简写

        3.应用场景：

            3.1 连接数组（上拉加载下一页） ：  arr1.push(...arr2)

            3.2 求数组最大值  :  Math.max(...arr)

 

  //1.用于连接数组 : 页面上拉加载下一页的时候，就需要连接数组
        let arr1 = [10,20,30,40]
        let arr2 = [50,60,70,80]

        //ES5 : arr1.push.apply(arr1,arr2)
        // arr1.push(arr2[0],arr2[1],arr2[2],arr2[3])
        // arr1.push.apply(arr1,arr2)

        //ES6 : arr1.push(...arr2)
        arr1.push(...arr2)
        console.log(arr1)
        
        //2.用于求数组最大值
        let arr = [20,0,60,88,100,50]

        //ES5 : Math.max.apply(Math,arr)
        let max1 =  Math.max.apply(Math,arr)
        console.log( max1 )

        //ES6 : Math.max(...arr)
        let max2 =  Math.max(...arr)
        console.log( max2 )