ES6新增加的语法,列举的只是冰山一角而已

是金子总会发光的
193 阅读2分钟

一.let与const关键字

  • let是用来声明变量的可以重新赋值
  • Const是用来声明常量的，设置初始值后，不可以重新赋值
  • let和const不允许重复声明
  • let和const不会提升变量
  • 只要作用域内存在let、const，它们所声明的变量或者常量就自动“绑定”在这个区域里面，不再受外部作用域的影响，并且只有在声明变量之后，才可以获取和使用该变量，否则就会报错。Let和const存在暂时性死区
  • let和const有块级作用域。{}、循环语句、判断语句和let、const配合使用的都可以成为块级作用域

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <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) */


   
    声明变量关键字
    1.ES5:var
    (1)有预解析:声明提前
    (2)没有块级:分支和循环大括号是全局变量
    2.ES6:let,const
    (1)没有预解析:变量先声明,后使用
    (2)有块级:分支和循环大括号是局部变量
    3.let和const区别
    let:变量, 可以修改
    const:常量, 不可以修改
    ES5:var
    (1)预解析:把var声明提升到当前作用域最顶端 */
    // console.log(num)
    // var num = 10
    /* var num
    console.log(num)
    num = 10 */

    // (2)没有块级作用域:分支和循环大括号里面是全局变量
    for (let i = 0; i < 6; i++) {
      console.log('循环内' + i)
    }
    console.log(i)
  </script>
</body>

</html>

效果如下:

image.png

二.对象解构赋值

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <audio src=""></audio>
    <script>
        /* 解构赋值 ： 变量赋值的简写(解构精髓：当变量名和对象属性值一致的时候，
        只需要写一个) 

            1. 取出对象的属性  赋值 给 变量
                let { name,age,sex } = obj
            2. 取出变量的属性  赋值 给 对象
                let obj = { 
                    name,// name : name
                    age,
                    sex 
                }
       

        /* let obj = {
            name:'张三',
            age:20,
            sex:'男'
        }
        //1. 取出对象的属性  赋值 给 变量
        //ES5 
        // let name = obj.name
        // let age = obj.age
        // let sex = obj.sex
        // let score = obj.score
        //ES6
        let {name,age,sex,score} = obj
        console.log(name,age,sex,score)//'张三',20,'男',undefined

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

        let username = 'admin'
        let password = '123456'
        
        //ES5
        // let p = {
        //     username:username,
        //     password:password
        // }

        //ES6 
        let p = {
            username,// username:username
            password,
            say(){
                console.log(111)                
            }//say:function(){}
        }

        console.log(p)
        p.say() */



         
        解构赋值: 变量赋值, 简写语法
        1.把对象的属性值赋值给变量
        let { name, age, sex } = obj
        2.把变量的值赋值给对象
        let obj = { name, age, sex } */

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

        // 把对象的属性值赋值给变量
        // ES5
        /*  let name = obj.name
         let age = obj.age
         let sex = obj.sex */

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

        // 把变量的值赋值给对象
        let username = 'admin'
        let password = 123456
        // ES5
        /*  let user = {
             username:username,
             password:password
         } */

        // ES6
        let user = {
            username,//username:username
            password,
            eat() {//eat:function(){}
                console.log(1111)
            }
        }
        console.log(user)
        user.eat()
    </script>
</body>

</html>

效果如下:

image.png

三.数组解构赋值

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /*数组解构 
        1.取出数组元素 赋值给变量
        2.取出变量的值 赋值给数组元素
        */

        // let arr = [10,20,30]

        //ES5
        // let n1 = arr[0]
        // let n2 = arr[1]
        // let n3 = arr[2]
        // let n4 = arr[3]
        //ES6
        // let [n1,n2,n3,n4]  = arr
        // console.log( n1,n2,n3,n4)//10 20 30 undefined

        //取出变量的值 赋值给数组
        // let num1 = 1
        // let num2 = 2
        // let arr1 = [num1,num2]


         
        let arr = [333, 44, 55, 6]
        // 1.把数组元素赋值给变量
        let [n1, n2, n3, n4] = arr
        console.log(n1, n2, n3, n4)

        // 2.把变量的值赋值给数组
        let num1 = 1
        let num2 = 2
        let num3 = 3

        let arr1 = [num1, num2, num3]
        console.log(arr1)
    </script>
</body>

</html>

效果如下:

image.png

四.函数参数解构

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <script>
        /* 函数参数解构: 当函数参数是对象类型,就可以对形参进行解构 */

        //传参本质： 实参给形参赋值
        /* function fn(obj){// let obj = {name:'张三',age:20,sex:'男'}
           console.log( obj )
           //对函数形参进行解构
           let {name,sex,age} = obj
           console.log( name,sex,age )
        }

        function fn1( {name,sex,age} ){// let {name,sex,age} = 
        {name:'张三',age:20,sex:'男'}
           console.log( name,sex,age )
        }

        fn( {name:'张三',age:20,sex:'男'} )
        fn1( {name:'张三',age:20,sex:'男'} ) */

        

        function fn({ name, age }) {//let{name,age} = {name:'李四',age:56}
            // 把参数解构
            // let { name, age } = obj
            // let name = obj.name
            // let age = obj.age
            console.log(name, age)
        }
        fn({ name: '李四', age: 56 })
    </script>
</body>

</html>

效果如下:

image.png

五.箭头函数

箭头函数可以说是es6的一大亮点，使用箭头函数，可以简化编码过程，使代码更加的简洁。

代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 1.箭头函数 : 相当于 function函数的简写
                (1)去掉function,改成 箭头 =>   (2)形参小括号写到箭头左边
         2.箭头函数语法注意点
            2.1 如果箭头函数只有一个形参,则可以省略小括号
            2.2 如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 
            （此时必须省略return）
        */

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

      fn(10,20)

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

      //(2)如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 
      （此时必须省略return）
      let fn2 = a=>a*2
      
      let res = fn2(88)
      console.log(res) */
      
      
     /*  1.箭头函数:相对于function简写
      (1)把function改成箭头 =>  (2)把形参小括号()放到箭头左边
      2.箭头函数语法注意点
      2.1当形参只有一个的时候,可以省略形参小括号
      2.2如果函数体只有一行,则可以省略大括号(此时必须省略return) */

      let fn = (a)=>{
        return a*a
      }
      console.log(fn(2))

      // 当形参只有一个的时候,可以省略形参小括号
      let fn1 = a=>{return a*a}
      console.log(fn1(3))

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


     
    </script>
  </body>
</html>

效果如下:

image.png

六.箭头函数this指向

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        1.function函数this有三种指向 :  谁 调用我 , 我就指向谁
            普通函数:   函数名()           this -> window
            对象方法:   对象名.函数名()     this -> 对象名
            构造函数:   new 函数名()       this -> new创建的实例对象

        2.箭头函数this : 没有this
            * 箭头函数本质是访问 上级作用域中的this
          

        
        
        /* let fn = ()=>{
            //1级
            console.log( this )
        }

        fn()

        let obj = {
            name:'张三',
            eat:fn
        }

        obj.eat()

        //由于箭头函数没有this,所以箭头函数不能作为构造函数
        (new会修改this指向,而箭头函数没有this)
        // new fn()
        //箭头函数也无法修改this (call apply bind)对箭头函数是无效的
        fn.call({name:'张三'}) */
        //由于箭头函数没有this,所以箭头函数一般不作为事件处理函数
       
        
        // 箭头函数this指向:箭头函数没有this
        // 箭头函数中的this本质是访问上级作用域this

        // 箭头函数没有this
        // (1)箭头函数不能上下文调用:无法修改this指向
        // (2)箭头函数不能作为构造函数
        //    (3)有两种函数最好不要是箭头函数:构造函数,事件处理函数
        let fn = ()=>{
            //1级
            console.log(this)
        }
        fn()

        let fn1 = ()=>{
            console.log(this)
        }
        fn1()
    </script>
</body>
</html>

效果如下:

image.png

七.展开运算符

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        1.展开运算符:  ...
            相当于对象遍历的简写
        2.应用 
            2.1 连接两个数组
            2.2 求数组最大值
        */

        /* let arr1 = [10,20,30]
        let arr2 = [40,50,60]

        //ES5 :  concat()
        // let arr = arr1.concat(arr2)
        // arr.push(70)
        //ES6
        let arr = [...arr1,...arr2,70]
        console.log( arr )

        //求数组最大值

        let max = Math.max(...arr1,...arr2)
        console.log( max ) */

        
        // 展开运算符:...
        // 作用:类似于对象遍历
        // 场景:
        // (1)用于连接数组/对象
        // (2)用于求数组最大值

        // 1.连接数组
        let arr1 = [10, 20, 30]
        let arr2 = [40, 50, 60]
        // ES5:arr.concat()
        // let arr = arr1.concat(arr2)
        // console.log(arr)
        // ES6: arr1.push(...arr2)
        arr1.push(...arr2)
        console.log(arr1)

        // 2.连接对象
        let student = {
            score:45,
            sex:'男'
        }
        let obj = {
            name:'张三',
            age:56,
            ...student
        }
        console.log(obj)

        // 3.求数组最大值
        let newArr = [34,56,4,5,6]
        console.log(Math.max(...newArr))
    </script>
</body>

</html>

效果如下:

image.png

八.数据类型Set

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 数据类型 Set : 集合
            * Set相当于是数组类型, 和数组Array唯一的区别是不能存储重复元素
        
        场景 :  数组去重
            let newArr = [ ...new Set(需要去重的数组) ]
        */

        // let arr = [10,20,30,50,60,88,20,50,60,90]
        // console.log( arr )

        //1.创建Set,去除数组重复元素
        // let set = new Set( arr )
        // console.log( set )
        //2.把set变成真数组
        // let newArr = [...set]

        //经典面试题： 一行代码实现数组去重
        // let newArr = [...new Set( arr ) ]
        // console.log(newArr)


        
        1.Set数据类型:集合  (类似于数组)
        Set和数组最大的区别是:Set无法存储重复数据
        2.Set应用:数组去重 */
        let arr = [34, 45, 66, 77, 66, 88, 88]

        /*  console.log(arr)
         // (1)声明Set
         let set = new Set(arr)
         console.log(set)
         // (2)把set转为array
         let newArr = [...set]
         console.log(newArr) */

        // 一行代码实现数组去重
        let newArr = [...new Set(arr)]
        console.log(newArr)
    </script>
</body>

</html>

效果如下:

image.png

九.箭头函数this指向经典面试题

    1.function函数this有三种指向 :  谁 调用我 , 我就指向谁
        普通函数:   函数名()           this -> window
        对象方法:   对象名.函数名()     this -> 对象名
        构造函数:   new 函数名()       this -> new创建的实例对象

    2.箭头函数this : 没有this
        * 箭头函数本质是访问 上级作用域中的this

代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    
    <script>
      /* let obj = {
        name: "王五",
        eat() {
          //1级   this : obj
          function fn1() {
            //2级  
            console.log(this)//window  
          }
          fn1()
          let fn2 = () => {
            //2级  ： 箭头函数访问上级 1级obj
            console.log(this)//obj   
          }
          fn2()
        },
        learn: () => {
          //1级 ： 上级 this->window
          function fn1() {
            console.log(this)//window 
          }
          fn1()
          let fn2 = () => {
            //2级  访问1级 this -> window  
            console.log(this)//window  
          }
          fn2()
        }
      }

      obj.eat()
      obj.learn() */


      
      let obj = {
        name:'张三',
        age:56,
        eat(){
          let fn1 = function(){
            console.log(this)//this指向window
          }
          fn1()
          let fn2 = ()=>{
            console.log(this)//this指向obj
          }
          fn2()
        },
        learn:()=>{
          let fn1 = function(){
            console.log(this)//this指向window
          }
          fn1()
          let fn2 = ()=>{
            console.log(this)//this指向window
          }
          fn2()
        }
      }

      obj.eat()
      obj.learn()

      
    </script>
  </body>
</html>

效果如下:

image.png

十.总结

ES6的新语法其实很多,在这里就不一一列举了,详情请参阅 ES6 入门教程

avatar
文章
阅读
粉丝