ES6常用语法

Posted by eight nine on 2021-11-30

ES6常用新特性

  • 箭头函数

    • ```
      function fn1(){a,b}
       let fn2 = (a,b)=>{
           
       }
      //等价
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22

      - this指向问题

      - 箭头函数不会改变this的指向(this指向箭头函数所在作用域)

      - this的指向(指向调用它的函数/对象所在的作用域)

      - ```
      function a(){
      var user = "追梦子";
      console.log(this.user); //undefined
      console.log(this);  //Window
      }
      window.a();

      var o = {
      user:"追梦子",
      fn:function(){
      console.log(this.user); //追梦子
      }
      }
      window.o.fn();
  • 扩展运算符

    • 可以把数组分割出来

    • ```
      let arr = [11,2,65,5]
      console.log(…arr)// == console.log(11,2,65,5)
      let arr3 = […arr]
      console.log(arr3)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16

      - 可以实现深度拷贝

      - 也可对对象使用,使用时要加{}

      - ```
      let stu = {
      name1:1,
      age:2,

      }

      // let name = stu.name
      // let age = stu.age

      console.log({...stu})
  • 解构赋值

    • 数组—依次赋值

      • ```
        let arr = [1,2,3]let [a,b,c] = arrconsole.log(a,b,c)
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17



        - 对象--按key值赋值

        - ```
        let stu = {
        name1:1,
        age:2,

        }

        // let name = stu.name
        // let age = stu.age

        let {name1,age} = stu
        console.log(name1,age)
    • 模板字符串

      • 在字符串中使用变量

        • let stu = {
              name1:1,
              age:2,
            
          }
            
          //  let name = stu.name
          //  let age = stu.age
          
           let {name1,age} = stu
          
           console.log(`my name is ${name1}`)