ES6语法

作者: 想吃热干面了 | 来源:发表于2020-09-14 08:59 被阅读0次

    一、let/var/const

    • let/var:事实上var的设计可以看成JS语言设计上的错误,所以设计者决定修复这个问题,添加了一个新的关键字:let。let可以看成更完美的var。都是用来定义变量。

    let/var的作用域,区别
      1.变量作用域:变量在什么范围内是可用。
       {
         var name = 'why';
         console.log(name);
      }
      console.log(name);
    
      2.没有块级作用域引起的问题 if快级
       var func;
       if(true){
         var name = "why";
         func = function () {
           console.log(name);
         }
      }
       name = 'kobe'
       func()
    
      3.没有块级作用域引起的问题 for快级
      var btns = document.getElementsByTagName('button');
       for (var i=0; i<btns.length; i++){
         下面代码只会打印最大按钮被点击信息
         btns[i].addEventListener('click',function () {
         console.log('第' + i + '个按钮被点击')
      })
    
         闭包可以解决上面的问题,因为函数是一个作用域
         (function(i){
            btns[i].addEventListener('click',function () {
            console.log('第' + (i+1) + '个按钮被点击')
          })
         })(i)
      }
      或者最简单的方式,用let
      for (let i=0; i<btns.length; i++) {
         //因为let有作用域
         btns[i].addEventListener('click',function () {
         console.log('第' + (i+1) + '个按钮被点击')
       })
     }
    </script>
    
    • const

    const:在跟多语言中都存在,主要作用是将变量修饰为常量。当我们修饰的标识符不会被再次赋值时,就可以使用const来保证数据的安全性。
    注:修饰的标识符必须赋值且不可以修改
    推荐:ES6开发中,优先使用const,只有标识符需要修改时用let

    常量的含义是指向的对象不能改变,但可以改变对象内部的属性
    const obj = {
      name: "kobe",
      age:  "18"
    }
    //不可以
    obj = {}
    //可以
    obj.name = "hello"
    

    二、

    对象字面量的增强写法

    1.属性的增强写法

    const name = "kobe";
    const height = "1.88";
    const age = "18";
    
    //ES5写法
    const obj5 = {
      name: name,
      height: height,
      age: age
    }
    
    //ES6写法
    const obj6 = {
      name,
      height,
      age
    }
    

    2.函数的增强写法

    //ES5写法
    const obj = {
      run: function () {
    
      },
      eat: function () {
    
      }
    }
    //ES6写法
    const obj = {
      run(){
    
      },
      eat(){
    
      }
    }
    

    三、箭头函数

    箭头函数也是一种定义函数的方式;一般在需要将一个函数当作参数时使用箭头函数。java8中的ramanda表达式。

    1.定义函数的三种方式

    1.1function
    const aaa = function () {
    
    }
    
    2.对象字面量中定义函数
    const obj = {
      bbb() {
    
      }
    }
    
    3.ES6中的箭头函数
    const ccc = (参数列表) => {
    
    }
    

    2.箭头函数参数和返回值

    2.1 参数问题
    //放入两个参数
    const sum = (num1, num2) => {
      return num1 + num2
    }
    //放入一个参数 ()可以省略
    const power = num => {
      return num * num
    }
    
    2.2 返回值
    //函数代码块中有多行代码时,正常写
    const test = () => {
      console.log('Hello world');
      console.log('Hello Vue.js');
    }
    
    //函数代码块中只有一行代码
    // const mul = (num1, num2) => {
    //   return num1 * num2
    // }
    const mul = (num1, num2) => num1 * num2
    
    // const demo = () => {
    //   console.log('Hello Demo');
    // }
    //函数没有返回值,会打印undefined
    const demo = () => console.log('Hello Demo')
    console.log(demo());
    

    3.箭头函数中this的指向

    箭头函数中的this是向外层作用域中,一层层查找this,直到有this的定义
    const obj = {
      aaa() {
        setTimeout(function () {
          console.log(this);//window
        },1000)
    
        setTimeout(() => {
          //上层找到aaa函数,aaa函数的this指向obj对象,所以这里箭头函数this指向obj对象
          console.log(this);//obj对象
        },1000)
      }
    }
    
    例子
    const obj = {
      aaa() {
        setTimeout(function () {
          setTimeout(function () {
            console.log(this);//window
          })
    
          setTimeout(() => {
            console.log(this);//window
          })
        },1000)
    
      setTimeout(() => {
        setTimeout(function () {
          console.log(this);//window
        })
    
        setTimeout(() => {
          console.log(this);//obj
        })
      },1000)
    }
    }
    

    相关文章

      网友评论

          本文标题:ES6语法

          本文链接:https://www.haomeiwen.com/subject/zvpzkktx.html