zoukankan      html  css  js  c++  java
  • ES6学习笔记(1)let和const命令

    参考书《ECMAScript 6入门》
    http://es6.ruanyifeng.com/

    let和const命令

    let 总结
    1.声明变量基本使用方法与var 相同
      不同点
      a.在代码块中使用let声明的变量只在代码块中有效,代码块外无法访问,而用var声明的在代码块外也可以访问。可以利用这点声明局部变量,也可用它解决js中的for循环闭包的问题
     
      ****闭包的解释****
     
      function out(){//外部函数
        var arr = [];
        for(var i = 0; i < 3; i ++){
            arr[i] = function(){//匿名函数
                console.log(i);
            }
        }
        return arr;
      }
     
      out()[0]();
     
      期待结果 0
      实际结果 2
     
      造成结果偏差的原因就是闭包
     
      闭包的定义:有权访问另一个函数作用域中的变量的函数
     
      在此例子中,函数out内部创建了另外一个匿名函数,并且这个匿名函数可以访问out的变量i,这就形成了闭包(实现了匿名函数有权访问out的作用域中的变量)
     
      解决闭包的方法
     
      M1.匿名函数自执行传参
      function out(){//外部函数
        var arr = [];
        for(var i = 0; i < 3; i ++){
            arr[i] = (function(number){//匿名函数
               console.log(number);
            })(i);
            //使用()()利用匿名函数自执行的方式将参数传递给匿名函数使用
            //这里每循环执行一次i,i就会作为参数进行匿名函数自执行,然后最终结果就是0,1,2
        }
        return arr;
      }
      out();//0,1,2
      M2.将参数传给匿名函数的变量
      function out(){//外部函数
        var arr = [];
        for(var i = 0; i < 3; i ++){
            arr[i] = function(number){//匿名函数
               console.log(number);
            }(i)//和(function(){})()是一个意思,都是告诉浏览器自动运行这个匿名函数,这时将参数传给匿名函数的参数,可以不用加()
        }
        return arr;
      }
      out();//0,1,2
      M3.let 定义块级作用域变量的方式
      function out(){//外部函数
        var arr = [];
        for(let i = 0; i < 3; i ++){
            arr[i] = function(){//匿名函数
               console.log(i);
            }
        }//let声明的变量是块级作用域变量,每次循环都生成一个新的变量i,所以console.log(i) 也只能返回for循环内部的每次i,无法像var 定义的一样返回访问全局的i
       return arr;
      }
      out()[0]();//0
     
      b. let 不支持变量提升
     
      console.log(a); //会报ReferenceError错误,表示不存在这个变量。在代码块中,使用let/const声明变量前,变量都是不可用的,称为“暂时性死区”
      a = 23;//ReferenceError
      typeof a;//ReferenceError
      let c = c;//ReferenceError  c还没有完成变量声明,不可以用来赋值
      function test(x = y,y = 2){return x+y};//ReferenceError: y is not defined   在给x赋值y时,y还没有声明
      //暂时性死区本质:在块级作用域里,变量只有等到声明变量的那一行代码出现时,才可以赋值和使用,不然都会报错
      let a = 9;  
     
      console.log(b);//undefined 当用var声明变量时,浏览器运行时会先声明这个变量b,但是b没有赋值,就输出undfined
      var b = 9;
     
      c.let不支持重复声明变量
     
      funtion test(){var a = 1;var a = 2;}
      test();//不报错 undefined
     
      funtion test(){let a = 1;var a = 2;}
      test();//报错 Uncaught SyntaxError: Identifier 'c' has already been declared
     
      funtion test(){var a = 1;let a = 2;}
      test();//报错 Uncaught SyntaxError: Identifier 'c' has already been declared
     
      funtion test(){let a = 1;let a = 2;}
      test();//报错 Uncaught SyntaxError: Identifier 'c' has already been declared
     
      function action(event){let event = event || window.event}
      action();//Uncaught SyntaxError: Identifier 'event' has already been declared
     
      function action(event){var event = event || window.event}
      action();//不报错
     
    2. let命令声明了js的块级作用域

    var a = 1;
    function test(){
      console.log(a);//undefined  此处发生了变量提升,这里的a指的是if中的那个a
      if(true){
         var a = 3;
      }
      console.log(a);//3  此处的a是if中重新声明赋值的a
    }

    let b = 1;
    function test(){
      console.log(b);//1 第一个let作用域内的b
      if(true){
         let b = 3;
      }
      console.log(b);//1  第一个let作用域内的b
    }

    立即执行函数等同于let块级作用域
    (function(){var c = ..........;}())------------{ let c = ......;}

    es6可以在块级代码中声明函数

    if(true){
      function test(){}//函数声明语句
    }

    if(true){
     let c = function(){}//函数表达式
    }

    const 总结
    1.声明常量,声明的同时就要赋值,且不允许再被改变
    const NATURE = 3//ok
    const NATURE1;//报错Uncaught SyntaxError: Missing initializer in const declaration,必须声明的同时赋值

    2.块级作用域,不支持变量提升,暂时性死区,同一作用域内不允许重复声明变量与let一致

    const obj = {}
    obj.name = '123'//ok 给对象增加属性属于对象obj的功能
    obj = {"name" : "123"};//报错 常量obj不可以重新赋值

    小结:ES6是ES5的升级版
          ES5有两种声明变量的方法:var,function
          ES6有六种声明变量的方法:var,function,let,const,import,class
          

  • 相关阅读:
    Linux下Mysql的安装步骤
    分布式集群Session原理及实现共享
    MySQL数据库表分区功能详解
    PHP面向对象程序设计之接口(interface)
    PHP面向对象程序设计之抽象类和抽象方法
    MySQL优化技巧
    MySQL性能优化之max_connections参数
    PHP环境下Memcache的使用方法
    PHP之Trait详解
    如何选择合适的MySQL数据类型
  • 原文地址:https://www.cnblogs.com/carolddz/p/8509827.html
Copyright © 2011-2022 走看看