2.ES6,let基本用法

来源：互联网发布：js节点操作编辑：程序博客网时间：2024/05/24 07:00

----------------------------------------------------------------------------------let命令----------------------------------------------------

基本用法

ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

不存在变量提升

let不像var那样，会发生“变量提升”现象。

暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

--------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let与var的区别</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
       {
          var a=100;
       let b=200;   //let所声明的变量，只在let命令所在的代码块内有效
       }
       console.log(a); //100
       console.log(b); //b is not defined --Error
   </script>
</head>
<body>

</body>
</html>

----------------------------------------------------------------------let不存在变量提升------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let不存在变量提升</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
       //ES5
       console.log("ES5:");
       var a=[];
       for(var i=0;i<10;i++){
          var c=i;
          a[i]=function(){
              console.log(c);
          };
       };
       a[5]();//输出为9,不管a[]为几，总是要等循环结束才跳出循环

       //ES6
       console.log("ES6:");
       var b=[];
       for(var j=0;j<10;j++){
          let d=j;
          b[j]=function(){
              console.log(d);
          };
       };
       b[5](); //输出5，即 let不像var那样，会发生“变量提升”现象。
   </script>
</head>
<body>

</body>
</html>

---------------------------------------------------------------let暂时性死区-----------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let暂时性死区</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
       {
          console.log(a); //undefined
          let a=100;
          console.log(a); //100

       }
   </script>
</head>
<body>

</body>
</html>

---------------------------------------let不受外界影响-------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let不受外界影响</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
       var a=100;
       {
          console.log(a); //undefined
          let a=100;
          console.log(a); //100

       }
   </script>
</head>
<body>

</body>
</html>

--------------------------------------------------------------------------let模块内不允许重复声明----------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let模块内不允许重复声明</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
      {
       var a=100;
       var a=200;
      }
      console.log(a);
      {
       var b=100;
       let b=200;
      }
      console.log(b);//报错

      {
       let c=100;
       var c=200;
      }
      console.log(c);//报错

      {
       let d=100;
       let d=200;
      }
      console.log(d);//报错

   </script>
</head>
<body>

</body>
</html>

-------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>let不允许重复声明</title>
   <script src="js/traceur.js"></script>
   <script src="js/bootstrap.js"></script>
   <script type="text/traceur">
      {
       var a=100;
       var a=200;
      console.log(a);

      }
      {
       let a=300;
       console.log(a);
      }
      //模块内部不允许用let命令重复声明，模块之间可以重复声明
      {
       var a=1;
       let a=2;
      }

   </script>
</head>
<body>

</body>
</html>

------------------------------------

阅读全文

0 0